In style: Cascading Style Sheets
You've probably heard a lot about Cascading Style Sheets (CSS) lately and even if you haven't, there's a good chance you've been using numerous Web sites that make use of this new technology. Here you'll find a step-by-step guide to CSS, and how you can use it to your advantage.
CSS offers Web designers many of the features commonly found in desktop publishing applications. With CSS you can specify font point sizes, font attributes (italics, underline, etc), page margins, colors, spacing, positioning, visibility, and much more.
Digg
del.icio.us
Slashdot
DZone
Reddit
StumbleUpon
Facebook
FriendFeed
Furl
Newsvine
Google
LinkedIn
MySpace
Technorati
Twitter
Windows Live
YahooBuzzNote: To see all of the examples in this article you need to use a browser version that supports CSS, such as Navigator 4.x or Internet Explorer 4.x.
Instant Style: CSS in under a minute
Using CSS you can apply different attributes to every tag you use in your pages. These attributes are expressed in "rules"; a rule is made up of a selector (the tag to which it applies) and a declaration (the attributes to be applied). For example, if we wanted to set your <p> tags to display 12-point Ms Sans Serif with a yellow background, we would create the following rule:
| P { font-family: "ms sans serif"; font-size: 12pt; background-color: yellow; } |
In the above rule, P is the selector -- the HTML tag to which the style attributes will be applied. Curly braces mark the start and end of the style declaration that apply to the selector. It's important to remember to separate each declaration with a semicolon.
Let's start with a basic HTML file.
|
Now let's add some style! We'll change the attributes of the <H1> tag for our header and <P> for our page content by inserting the following code into the <HEAD> of our HTML document.
Using Class as a selector
Being able to attach attributes to specific tags can be useful, but if you're like most people you probably don't think of your pages in terms of where the <H1> and <P> tags are. You probably break the page down into content areas such as "header," "content," "nav bar," etc. CSS makes it easy to assign a style to a specific area by using classes. 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:
|
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.
Different ways of adding CSS to your pages
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 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.
|
Finally, if you want to apply a style declaration to just a single HTML element, you can do that too. Here's an example.
Inline Style Declaration |
Additional resources
Dave Edis is the president of Edis Digital in Vancouver, Canada.
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 