Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to style a header with CSS?
To style a header with CSS, we can use various CSS properties to make it look attractive. Headers are important elements that define the structure and visual hierarchy of a webpage.
Syntax
header {
background-color: value;
color: value;
font-family: value;
text-align: value;
padding: value;
}
Common CSS Properties for Header Styling
| Property | Description |
|---|---|
background-color |
Sets the background color of the header |
color |
Changes the text color |
font-family |
Specifies the font type |
text-align |
Aligns text horizontally |
padding |
Adds space inside the header |
Example: Basic Header Styling
The following example demonstrates how to style headers using different CSS properties −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 10px;
font-family: Arial, sans-serif;
}
.header-style1 {
padding: 30px;
background-color: #3498db;
color: white;
text-align: center;
font-family: "Georgia", serif;
margin-bottom: 20px;
}
.header-style2 {
padding: 25px;
background-color: #e74c3c;
color: white;
text-align: left;
font-family: "Arial", sans-serif;
border-radius: 8px;
}
.header-style1 h1 {
margin: 0;
font-size: 2.5em;
}
.header-style2 h1 {
margin: 0;
font-style: italic;
}
</style>
</head>
<body>
<div class="header-style1">
<h1>Welcome to Our Website</h1>
<p>This header uses blue background with centered text</p>
</div>
<div class="header-style2">
<h1>Latest News Section</h1>
<p>This header features red background with italic text</p>
</div>
</body>
</html>
Two styled headers appear: 1. A blue header with white centered text "Welcome to Our Website" and description 2. A red header with rounded corners, white italic text "Latest News Section" and description
Example: Modern Gradient Header
Here's an example of a modern header with gradient background and enhanced typography −
<!DOCTYPE html>
<html>
<head>
<style>
.modern-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px 20px;
text-align: center;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.modern-header h1 {
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.modern-header p {
margin: 10px 0 0 0;
font-size: 1.2rem;
opacity: 0.9;
}
</style>
</head>
<body>
<header class="modern-header">
<h1>CSS Header Styling</h1>
<p>Beautiful headers with gradient backgrounds</p>
</header>
</body>
</html>
A modern header with purple-to-blue gradient background, large uppercase white text "CSS HEADER STYLING" with letter spacing, and a subtitle below with shadow effect.
Conclusion
Styling headers with CSS allows you to create visually appealing and professional-looking webpage sections. By combining properties like background-color, color, font-family, and text-align, you can achieve various header designs that enhance your website's visual hierarchy.
Updated on: 2026-03-15T15:15:19+05:30
11K+ Views
Advertisements