We can further style our h2 headings...
<html>
<head>
<title></title>
<style type="text/css">
H2 { color:#ff0000; font-style:italic; }
</style>
</head>
<body>
<h2>Section 2</h2>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
h2 { color:#ff0000; font-style:italic; font-family:arial,sans-serif; }
</style>
</head>
<body>
<h2>Section 2</h2>
</body>
</html>
Font-family can be either the name of a font (arial, "times new roman", verdana, etc), or a general description (serif, sans-serif, etc)
Again, these properties can be found in the CSS Properties section in the CSS reference section of this tutorial.
So, now what we've done is this... all H2 headings on the page will be red, italic and arial...
<html>
<head>
<title></title>
<style type="text/css">
h2 { color:#ff0000; font-style:italic; font-family:arial,sans-serif; }
</style>
</head>
<body>
Level 2 headings:
<h2>Section 1</h2>
<h2>Section 2</h2>
<h2>Section 3</h2>
<hr>
All heading sizes:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Notice only the H2 heading is affected by our style sheet.
</body>
</html>
All right Joe, I get it, but I don't get it. Please tell me how this is even the least bit useful.
Well, it's useful because with a few clicks of your keyboard, you can alter the look and feel of your whole site. Later we'll learn how to place the CSS code in a separate file and each page on your site can reference that code. If you look at the navigation items on HTMLisEasy.com you'll see that the colors and fonts used are all controlled by one CSS file. (You may have to download it by right clicking on the link and choose Save Link/Target As, then open it with a text editor such as Notepad.)
It's also useful because it can make your HTML files smaller. You aren't continually repeating a bunch of color, font, spacing, etc properties in your HTML tags.
All in all it can be a very useful tool to have in your HTML toolbox.
| CSS Tutor |
| Lessons: Intro 1 2 3 4 5 6 CSS Reference |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
