Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Style a Header with CSS
To style a header with CSS, we can use various CSS properties to make it look attractive. In this article, we will learn and understand to style the header using diferent CSS properties.
Style header with CSS
- We have used two h1 headings inside div element to add padding and background-color to header with div class name as header and test.
- In first heading with id head1, we have used "font-style: oblique;" and "text-align: center;"properties to add style and align it to center.
- In second heading with class namehead, we have used "font-family" and "color: white;" properties to add font family and change text color to white.
Example
Here is the complete example code implementing above mentioned steps.
<!DOCTYPE html>
<html>
<head>
<title>
To style a header with CSS
</title>
<style>
body {
margin: 10px;
}
.header {
padding: 30px;
background-color: bisque;
}
.test {
padding: 30px;
background-color: #04af2f;
}
#head1 {
font-style: oblique;
text-align: center;
}
.head {
font-family: "Segoe UI", Tahoma,
Geneva, Verdana,
sans-serif;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="header">
<h1 id="head1">
Styling header with CSS
</h1>
<p>
For this header, we have used
CSS font-style and text-align
property to style the header.
</p>
</div>
<div class="test">
<h1 class="head">
Welcome to Tutorials Point.
</h1>
<p>
For this header, we have used
CSS font-family and color
property to style the header.
</p>
</div>
</body>
</html>
Conclusion
In this article we have understood how to style a header with CSS. We have used font-style, font-family, color, text-align and background-color to style the header.
Updated on: 2024-07-23T17:38:15+05:30
10K+ Views
Advertisements