Intermediate HTML
Lesson 1: Cascading Style Sheets
Cascading Style Sheets (CSS for short) are a relatively new feature of web page creation, introduced into the current version of HTML, HTML 4.0, a.k.a. XHTML 1.0.
Style sheets allow you to govern, in one place, design elements such as font sizes and styles, borders, positioning of page elements and page backgrounds. The bigger your website is, the more essential it is for you to use a style sheet in order to provide a consistent look and feel for all your HTML pages.
Types of Style Sheets
- External style sheet
- In the HEAD section of the page
- Inline (Within the BODY of the page)
The most powerful and valuable kind of style sheet is the one you create as a separate file and then link to from all the pages on your website (or one section of your website).
For example, you've probably noticed that the hyperlinks on most professionally crafted sites no longer have that spidery blue underlined appearance. The links on all the pages of this site are, consistently, a nice dark red. On many sites, links aren't underlined at all until you mouse over them.
You can achieve this effect on your site with just a few lines of HTML. Here's how:
1] Create a Cascading Style Sheet. This one is about as simple as they get:
BODY {
}
A:link {
color: rgb(102,0,0);
text-decoration: none;
}
A:visited {
color: rgb(151,0,0);
text-decoration: none;
}
A:hover {
text-decoration: underline;
}
2] Save it as somename.css. I always call my files main.css -- just easier for me to remember.
3] Link to it in the HEAD section of each page like so:
<head> <link href="main.css" type="text/css" rel="stylesheet" />
...
</head>
And that's it! You now know how to create a CSS that will make all your links red and only underlined when you mouse over them! I'll bet you thought it was going to be hard!
If you have only one page that needs styling, or if you want to override the external style sheet, you can put coding anywhere between the <HEAD> and </HEAD> tags, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t..."> <head><head> <title> Mypage.com </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style> A:link { color: rgb(153,0,0); } A:visited { color: rgb(153,102,0); } A:active { color: rgb(66,158, 33); } ... </ head>
Just as CSS specifications in the HEAD section of a page override those in an external style sheet, so inline specifications override those in the HEAD or anywhere else. If you just have to have a unique style for a portion of one page, do it inline, like so:
<p style="color: #336699; margin-left: 20px"> This is a paragraph </p>
So, any questions on what we've discussed so far? Post your concerns, comments and dumb questions (and remember, there's no such thing as a dumb question) -- I'd love to hear from you. Post in the Discussion area - I'll start one going.
Print this page
Latest Articles