First time visitor? The tutorials start here.

CSS Primer

Now that you are more comfortable with basic xHTML commands, let’s style that practice page a bit. If you found this page through a search engine or a direct link from another website, or if you’re just not following these tutorials in order as you should be, you can download the practice files here, then close the link I left open as a test.

In the practice files you downloaded, open “practice1.htm” in your web browser, then go into the /styles/ folder and open the file named “style.css” with Crimson Editor.

Copy the following, then paste it into style.css. Make sure you don’t miss the squiggly bracket ( } ) at the end.

body {
     font-size: 12px;
     font-family: verdana, arial, helvetica, sans-serif;
     color: #339933;
     background-color: #fffaf0;

Save style.css, then refresh practice1.htm in your browser. The page will now have a muted background color, the text will be 12px verdana, and its color will be a shade of green. If your computer doesn’t have the verdana font installed, it will attempt to show arial. If that’s not on there either, it will go to helvetica. When all else fails, it will show whatever default sans-serif (without decorative pointy things) font your computer does have installed.

Now add this line to style.css:

img { border: 0; }

Save it, then refresh practice1.htm in your browser again. Assuming you left that image link in there, the square around the smiley will now be gone. If you removed that image link, open practice1.htm in Crimson Editor and add this xHTML into one of the paragraphs:

<a href=""><img src="images/smile.gif" alt="" /></a>

Save that file, then refresh it in your browser. You can see that the image is a link when you hover on it, but it no longer has the square around it like it used to.

Now add these three lines, save style.css, and refresh practice1.htm.

a:link    { color: #ff0000; }
a:visited { color: #ff9999; }
a:hover   { color: #000000; }

If there is a link you have not visited, it will be bright red (#ff0000).
If there is a link you have visited, it will be pink (#ff9999).
If you hover on any link on the page, it will turn black (#000000) as it’s being hovered on.

Now add these three lines, save style.css, and refresh practice1.htm:

h1 { color: #996600; }
h2 { color: #006699; }
h3 { color: #990099; }

Your biggest heading is now brown, your level-2 headings are blue, and your level-3 headings are purple.

Now add this, save style.css and refresh practice1.htm:

p {
     margin-left:  2em;
     margin-right: 2em;

The left and right margins of each paragraph are now 2 widths of the capital letter “M.”

Now delete the last part you added and change it to this:

p {
     margin:  5em;
     text-indent: 5em;     

Wow, that’s a mess, but I did that on purpose to show you the power of CSS. You still haven’t seen the best of it, but you will when we delve into CSS for layout.

For now, I should keep it basic and explain how this stuff works.

Continue onward to CSS Basics.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.