CSS is pretty much my favorite thing about the web.

What is CSS? It styles the HTML that contains the structure and content. With CSS you can move, position, color, and change almost every aspect of almost every HTML tag that there is.

What are the benefits of CSS?

The benefits of CSS are phenomenal and I could never possibly list them all here. The main reason that CSS is so great is because of the power it gives you to control the entire site with one document (to be elaborated on).

Three ways to implement CSS

There are three ways to make the CSS communicate with the HTML: inline, embedded, and external. The best, most powerful way is external, for several reasons- you only have one fileto edit CSS. If you have all your CSS inline and embedded, you are almost defeating the purpose. You want your site to 1) load quickly so 2) you have less code on each page, therefore 3) instead of extra CSS on every page, each page simply links to your CSS document. And voila! Your problem is solved!

I would try to explain the difference between the three but it would probably be easier to just show you.

Example of inline CSS (placed within tags on the page):

<p style="font: 10px Verdana, Arial, sans-serif; color: #333333;">

Example of embedded CSS (placed within the header of the document):

<style type="text/css">
body {
    background: #CCCCCC;
    font: 10px Verdana, Arial, sans-serif;
    color: #333333;
}
</style>

Example of a link to an external file sheet (placed in the header of the document):

<link rel="stylesheet" type="text/css" href="format.css" />

How is CSS written?

CSS is written using what we call selectors. There are a number of selectors, but the most basic are:

  • Tag- ex: body { background: #FFFFFF }
  • ID- ex: #header { font: 24px Verdana, Arial, sans-serif }
  • Class- ex: .footertext { font: bold 10px Verdana, Arial, sans-serif }
  • Pseudo- ex: a:hover { text-decoration: none }

Using these basic selectors can do almost anything you need. There are more advanced selectors but those usually aren’t used except for those rare occasions that you just can’t select what you need with these.

Down and dirty: writing CSS

We’re going to work on the premises that you are writing an external CSS file. (When you save, the extension is .css)

Supposing you were creating a simple web page using the following structure:

<body>
<div id="wrapper">
    <div id="header">
        <h1>Your main page headline with keywords</h1>
    </div>
    <ul id="navigation">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <div id="content" >
        <h2>Page Title</h2>
        <p>Some paragraph content</p>
    </div>
    <div id="footer">
        Anne © 2007
    </div>
</div>
</body>

You want the site to be centered in the browser, with a width of 760px, and a background color of light gray. What does that look like in your CSS document?

body {
    background: #CCCCCC;
}
#wrapper {
    width: 760px;
    margin: 0px auto 0px auto;
}

This is the CSS formula: SELECTOR :: OPEN CURLY BRACKET :: CSS COMMANDS :: CLOSE CURLY BRACKET

So what I did was use a tag selector for the body to make the whole HTML document background gray. Then I used an ID selector to choose the wrapper of the site and set it’s width and centered it by using the margin-auto feature. I used shorthand- which you have to make sure you’re using the right kind before expecting it to work. In this case, margin works from the top and moves counter clockwise. The first number determines how many pixels away it will be from the top, the next number determines the distance on the right, the third number determines the bottom, and the last number represents the left side.

It may seem a little overwhelming at first but if you chew over it long enough it will make sense.

In conclusion

There are a number of CSS commands you can use, like margin and background. There are a lot of ways to figure these different commands out. Searching the web and research other sites CSS files is one of the best ways to teach yourself. See how others are doing it! Learn from them. There are also books available as well as classes you can take to learn. I encourage you to do some research on it. I hope that this will aid you in your understanding of reading and writing CSS.

Thanks for reading! Please leave a comment if you found this article helpful or ask questions if you didn’t understand something. Be sure to pass on the article to your friends if you think they could benefit and learn from reading.