Style Sheets: Introduction (Part 2)
Classes let you identify a content area
regardless of the tags used to create it and assign a style to it. For example,
a <p>tag with header class would look like this:
<p class="header">This is the header</p>
You can define rules for classes just as easy as
for regular tags except classes always start with a period. Here's an example
of a class declaration.
.header { font-family: "ms sans serif"
font-size: 24pt; }
.content { font-family: "arial"
font-size: 12pt;
color: blue; }
This makes it easy to set up a CSS definition
that defines the style for the various elements in your page without having to
hard-code each one. It's easier, saves time, and makes for smaller HTML files.
CSS lets you add styles to your pages in several
ways. As we saw above, you can use the <STYLE>
tag to add your style declarations at the top of each individual page. This is
great when you only want to modify one page but a better solution is to put all
your style declarations in an external file and link to them from your Web
page. This way you can update your entire Web site by modifying just one
file. Using the first example we could create a style sheet file named
"styles.css":
P { font-family: "ms sans serif"
font-size: 12pt;
background-color: yellow; }
H1 { font-family: "impact"
font-size: 35pt;
color: blue; }
and link to it by inserting the following within
the <HEAD> of your Web page.
<HEAD>
<TITLE>Page Title</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
</HEAD>
Finally, if you want to apply a style declaration to just a single HTML element, you can
do that too. Here's an example.
<font face="arial" style="background-color: yellow;
font-size: 16pt;">
Inline Style Declaration
</font>
Style Sheets: Introduction Part 1
| Style Sheets: Introduction Part 2
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
