Step 8) CSS stands for Cascading Style sheet. Sounds neat, huh? It is basically one file that controls all the styles of your fonts, links, etc for your entire site. That's my definition, but really CSS is much more complicated. Should you want to become a CSS expert, you can try self-learn on the internet or take a class somewhere.

If go into your code, you'll notice a bunch of pink text under the <style="text/css"> tag. The pink text should say stuff like .style1, .style2, a:link, a:hover, etc. Copy all of that pink text and go to File > New > CSS. Now Paste and save the file as blah.css (replace blah with desired name.) Go back to your website that you were working on and add this code to the top: <link href="blah.css" rel="stylesheet" type="text/css"> right under the <title></title> tags. Now go back to the pink stuff and delete it all. 8D;;

"Well, that was unnecessary. Why the heck did you do that Shadilyn?" All of your website pages will now contain that link to the main css page instead of each having their own seperate css. So if, say, one day I spontaneously decided that I wanted to make all the text on my website pink, I would simply go to blah.css and change that color there. I'd only have to do it once for it to effect the whole site, because the rest of the site is linked to that css file.

Spend a little more time now and make the CSS, save a lot of time later when you decide you want to make changes.

Multiple CSS can make different link colors on the same page. If you go to my menu, you'll notice the links are white. But here, in this main body area, the links are green. To do that, you first need to insert a <div> tag around whatever area you want of a certain color and another <div> tag.

Example: I have, around this area of the website a <div id="main"> at the beginning of this table (right after the <td> tag) and a </div> right before the end of this table cell tag </td>. Around the menu I have a <div id="menu"></div> tag.

Now, in my .css file, I add a #main in front of all the codes that I only want applied to the main area. So example would be I only want links to be green in this area, because you can't distinguish a green link on a green menu. So in front of the a:link {color: #669900 (which is green btw); I add a #main to make it -> #main a:link { color: #669900; I do the same for the menu and insert #menu in front of everything I only want applied to the menu.

Ta-da~ Now anything marked inside the <div id="main"> tag will ignore all the #menu styles, etc.

 

>> Next: Images and image properties

<< Previous: Page properties, styles & background image