Once we have mastered putting up a basic web page, including links, the next step is change the way that the page looks. Consider a magazine. It might use
Do you remember how to open two windows side by side? See point 6 under Preliminaries. This will be very helpful with CSS. When I am doing my coding, I have the style sheet in a Notepad window on the left, and the HTML page in a Notepad window on the right. It might look like this:
.yellowHighlight{
background: yellow;
}
.code{
font-family: Courier;
background: #33ffff;
}
Copy the page style sheet code and save it under htdocs/styles as style1.css. Next, copy the HTML code and save it under htdocs as firstcss.html. Now open up first.css.html in a browser. You should see something like:
For our first style sheet trick, we show how important it is to remember the . (dot) in creating the style.
If you go back to style1.css and take away the dots, then you have
If you save style1.css without the dots and then refresh the page firstcss.html in your browser, you will see that the styles have disappeared.
Next, put the dots back in, and save style1. Refresh firstcss.html, and confirm that the styles come back.
Finally, in firstcss.html, type the class names incorrectly, or try leaving out the quotation marks. Save firstcss.html and refresh it in your browser. Moral: CSS is very unforgiving about typing errors!
Netscape 4.x has very buggy support for CSS. If you are designing for Netscape, never try to override the body tag with a style. Also, Netscape does not seem to handle the "float" property correctly, which tends to spoil column layouts. Finally, Netscape will not let you name a style rule with an underscore character (_). Sometimes, when I want to use the "float" property, I name a style rule with an underscore character (header_Right) because I want Netscape to ignore that style rule.