Main?The W3C's Gift To Designers
CSS, or Cascading Style Sheets, is about the most useful thing you will come across when it comes to controlling your web pages. The concept is this, you create a single document that controls the general look and feel of your links, fonts, backgrounds, and even the spacing between your letters. You could then change the entire color scheme and feel of your website by editing one simple document.
CSS can be included into your actual HTML document, or it can be a separate document all together. When it's a separate document, it can be used to control multiple web pages, if not an entire website, and as mentioned earlier, can make redesigning the general look and feel of your website a breeze.
There's a lot more to CSS then color scheme control, but we won't get into that just yet.
A very basic CSS document could look like this:
body,td {
font-size : 9pt;
color : #000000;
font-family : "trebuchet ms", tahoma, verdana;
scrollbar-base-color : #990000;
scrollbar-track-color : #CCCCCC;
}
body {
background-color : #CCCCCC;
}
.red {
color : #990000;
}
a {
color : #990000;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
And here is the same exact CSS placed into an HTML page, instead of being a separate document:
<html>
<head>
<title> [title] </title>
<style type="text/css">
<!--
body,td {
font-size : 9pt;
color : #000000;
font-family : "trebuchet ms", tahoma, verdana;
scrollbar-base-color : #990000;
scrollbar-track-color : #CCCCCC;
}
body {
background-color : #CCCCCC;
}
h2 {
color : #990000;
}
a {
color : #990000;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
-->
</style>
</head>
<body>
[ web page content ]
</body>
</html>
There are a lot of great things you can do with CSS that would be a bit of a pain to do using HTML alone, but there are a lot of things you can do with CSS that you can't even attempt with HTML.
With CSS you can remove the underlines from your links...
a {
text-decoration : none;
}
...or even put them on top of the link instead!
a {
text-decoration : overline;
}
You can adjust the spacing between each letter in your HTML document...
body {
letter-spacing : 5px;
}
...or just the spacing between each word.
body {
word-spacing : 5px;
}
CSS is almost required if you want to get into the design aspects of web development (and these days it's almost an unwritten rule that your web site has to have an attractive design).
Comment tags
You can place comment tags and notes in your CSS documents. You start the comment with // if the comment is only one line long, or you place the comment between /* these tags if it is more then one line long */. Here is an example:
body,td {
font-size : 9pt;
}
// in the next section the text-decoration has been set to remove all underlines
a {
color : #990000;
text-decoration : none;
}
/*
in the last section the text-decoration was set to remove all underlines,
but when the mouse hovers over a link then it will show up again, as the next section indicates
*/
a:hover {
text-decoration : underline;
}
A Breakdown Of Style Sheet Elements
When you create the styles for your web page, first you type what you want to stylize, called the selector, and then you put the specification that you want that element to meet inside { curly braces }. This "element" that you want to stylize can be a very specific tag, or it can be a general element that you want to apply to any tag.
CSS consist of "selectors", "properties", and "values".
For example:
a {
color: #990000;
}
In that example "a" is the "selector", "color" is the "property", and "#990000" is the value of the property.
If you want to define the style of a specific tag, like say the <font> tag you would type that tag, and then the specifications you want the tag to have inside { brackets }.
Example:
font {
font-size : 9pt;
color : #000000;
font-family : verdana;
}
That above CSS will tell whatever web page it is linked to, or contained in, that all text enclosed in the <font> ... </font> tags will be 9pt, colored #000000 (black), and verdana.
But, let's say I didn't want to format every single tag called font. Let's say I only wanted to format certain <font> tags. Then, I could type my CSS like this:
font.specialname {
font-size : 9pt;
color : #000000;
font-family : verdana;
}
The "specialname" part can be any crazy word in the world. Now, when I enclose text in a set of <font> ... </font> tags nothing will happen. But, if I enclose some text in this: <font class="specialname"> ... </font> then my text will show up with my CSS specifications.
But, in that above example I can't just type class="specialname" in any tag I want, only <font> tags. Let's say I wanted to create this special set of CSS rules that I could apply to any tag I want. Instead of typing font.specialname I would just type .specialname, Like this:
.specialname {
font-size : 9pt;
color : #000000;
font-family : verdana;
}
Now, I can set the class of any tag to "specialname" and it will have a font that is 9pt's, black, and verdana. For example, If I typed class="specialname" into my <body> tag (like this: <body class="specialname">), I could format the text of my entire page to those specifacations.
Now, let's say I wanted a whole set of tags that could be a black, 9pt, verdana font. Let's say every time I enclosed text inside of the <font> tag, the <td> tag, and the <b> tag I wanted it to have those specifications, there's no need to type up seperate specifcations for each individual tag. Instead, you can put all the tags in one section, seperated by commas, and then enclose you styling in the { brackets }, Like this:
font,td,b {
font-size : 9pt;
color : #000000;
font-family : verdana;
}
Another thing you can do with CSS is create IDs. It's unlikely you will use this if you are still new to web development, as they are used to allow JavaScript functions to identify a unique object on the screen. Unlike a class, an ID is usually only used once to identify a single element as an object, which can then be manipulated with JavaScript.
IDs start with a # symbol, and then a special name of your choice, followed by the usual specifications surrounded by { brackets }.
Example:
#section1 {
font-size : 9pt;
color : #000000;
font-family : verdana;
}
Then, you can apply that ID to an HTML tag with the id attribute: <font id="section1">
Pseudo-Classes and Pseudo-Elements
With pseudo-classes and elements you can control more then just a specific tag, you can control certain aspects of that tag.
The most common example of this is the usage of pseudo-classes and elements with the <a> tag (link).
You can type just a { font-family: verdana; } to make all the links verdana, but what if you wanted the link to be different when you hovered the mouse over it, or visited the link? Then you would use the :link, :active, :visited, and :hover elements, that control the link as normal, activated, visited, and hovered, respectively. Example, let's say I wanted my links to be 7px, except when I hovered over them, in which I wanted them to change to 9px. I would then type this as the style sheet:
a {
font-size: 7px;
}
a:hover {
font-size: 9px;
}
Additional pseudo-classes/elements include :first-line, and :first-letter.
Making an External Style Sheet
When you want to make your style sheet a completely separate document, you simply type up your style sheet, and save it as "somefile.css". You save it as a .css document, just like you would save a .html document. Then, you link to it on every HTML document that you want to have that style sheet applied to.
For example, let's say I opened up my simple text editor Notepad, and typed the following:
body,td {
font-size : 9pt;
color : #000000;
font-family : "trebuchet ms", tahoma, verdana;
scrollbar-base-color : #990000;
scrollbar-track-color : #CCCCCC;
}
body {
background-color : #CCCCCC;
}
.red {
color : #990000;
}
a {
color : #990000;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
I then saved that document as "style.css", and wanted it to be applied to this HTML document I had. I would then type my HTML document like this:
<html>
<head><title> [title] </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
[content]
</body>
</html>
You always put the link to your style sheet after the </title> tag, but before your </head> tag.
href="style.css" should be the URL of your style sheet.
Placing CSS Directly On Your Web Page
Sometimes you don't want a separate .css document that you have to link to. Sometimes you want to just put the style sheet right on your web page. You can do this easily.
To put the above style sheet directly on the above web page, so that you only have 1 document instead of 2, you would place the style sheet where the <link rel="stylesheet" href="style.css"> is. You need to place it between a new tag, the <style> tag. Here is how you would do all this:
<html>
<head><title> [title] </title>
<style type="text/css">
<!--
body,td {
font-size : 9pt;
color : #000000;
font-family : "trebuchet ms", tahoma, verdana;
scrollbar-base-color : #990000;
scrollbar-track-color : #CCCCCC;
}
body {
background-color : #CCCCCC;
}
.red {
color : #990000;
}
a {
color : #990000;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
-->
</style>
</head>
<body>
</body>
</html>
What I did was type <style type="text/css"> after my </title> tag, then I placed my css document after the <style> tag, and then closed it all with a </style> tag.
Also, you will noticed that I enclosed the CSS section within standard HTML <!--comment--> tags. The reason being is that older browsers cannot read CSS, and will treat the CSS as if it is regular text, thus displaying it on your web page unless it's enclosed within comment tags. It's not something you have to do, it's just a good idea.
Placing CSS Directly In An HTML Tag
If for any reason you want to apply a style to an HTML tag on the spot, you type the tag, and then the style attribute. For example, let's say I wanted some text in between my font tag to have a extra spacing between the letters, I could do it like this:
<font style="letter-spacing : 5px; ">This text will have extra space in between each letter</font>
With CSS you can avoid setting the appearance of each tag individually, but as you see in the above example, you still can.
And Now The Bad News
CSS is not fully supported by older browsers. Only Netscape Navigator 4+, and Internet Explorer 3+. The good news, however, so few people use browsers that old. It's so easy to upgrade your browsers that most of your visitors will keep themselves up to date on the latest and greatest web browsers. I would estimate that no less then 90% of your visitors will be using Internet Explorer 5.0+, or the Netscape 4+.
And now more bad news. When you only generate 400, 500, or even a 1000 hits a day having a few visitors see your web site without it's style sheet isn't so bad, but when you are a big corporate website, or just plain popular, suddenly that 10% of visitors becomes a pretty big deal. 10% of 10,000 is 1000. That's quite a few people there.
So, moral of the story, always test your website without it's style sheet. You can do this by viewing your website in an older browser, or temporarily removing your style sheet.