How to Format a Header in CSS
Cascading Style Sheets (CSS) allows you to write a set of style rules in a single file and then embed that file in every page where you want to apply those rules. To format a header in CSS, you should embed one of these CSS files and then style both the header's container tags and any of its contents, such the site title and tagline. Pay particular attention to how you style the website title, since that part of your website should stand out. You will need to know how to set fonts and colors to style your header and title.
Other People Are Reading
Instructions
-
-
1
Open Notepad twice so you have two Notepad windows open on your desktop. Position them side-by-side so you can read code in both windows at the same time. Go to "File" and "Open..." in the first Notepad window and open your Web page. Save the blank file in the second window as a style sheet using the CSS file extension.
-
2
Add this code after the "<title>" tags in your Web page:
<link rel="stylesheet" href="path/to/style.css" type="text/css" />
Change "path/to/style.css" to the path to your CSS file, including the name of the file.
-
-
3
Locate the header code in your Web page. Do not confuse the header with the code between the "<head>" tags, which does not display in the browser. This is a typical, though very stripped-down header:
<div id="header">
<h1>Site Title</h1>
<small>Tagline for your website</small>
</div>
-
4
Start by writing style code for the "<div>" or "<header>" tags that wrap around your header:
#header {
width: 100%;
background-color: black;
padding: 20px;
}
Change "header" to the ID name of the tags that wrap around your header, but keep the hash symbol as CSS needs this to know to look for an ID name. The code sample sets the header to the full width of the screen or any container that wraps around the entire page. The background is set to black. Use padding to add space around any content within the header.
-
5
Write a style rule for your "<h1>" tags:
#header h1 {
font-family: Georgia, serif;
font-size: 36px;
color: white;
}
Set the font to use for the title in your header using the "font-family" CSS property. When setting a font, add the font you most want to use first and then add some standard, fallback fonts to the list, separating each font with a comma. For fonts with spaces in their names, put quotation marks around the names.
-
6
Style any other HTML element -- a set of tags and the content they mark up -- using the same "#idname tagname" selection method as you used to style the "<h1>" tags. Save both files before testing or uploading to your server.
-
1
