or

Subscribe now! (3842 subscribers)

Beginner’s guide to CSS

CSS is all about separation

One of the least followed parts of CSS is the very idea behind it, the idea of separation of content and design. The idea here is that all sites contain two major parts, the content: all your articles, text and photos and the design: rounded corners, colors and effects. Usually those two are made in different parts of a webpage’s lifetime. The design is determined at the beginning and then you start filling it with content and keep the design fixed. So if you just want to add content to your site you don’t want to be forced to mess around with the design, do you? The same thing is true the other way around, if you decide on a redesign, why should you have to mess around with the content, making sure it fits in the new layout?

In CSS you just add the nifty <link>-tag I’ve told you about to the head of your HTML document and you have created a link to your design. In the HTML document you put content only, and that link of yours makes sure it looks right. You can also use the exact same link on many of your pages, giving them all of them the same design. You want to add content? Just write a plain HTML document and think about marking things up like “header” instead of “big blue header” and use CSS to make all headers look the way you want!

This is a different way of thinking about webpages, and it’s something that took a while for me to understand. To help you I have written some examples of good and bad coding. What’s wrong with this?

<font size="3">Welcome to my page</font>

Comment: The font-tag is design and design shouldn’t be in the HTML document. All design should be in the CSS-file! Instead do this:

In the HTML:
<h1>Welcome to my page</h1>

In the CSS:
h1 { font-size: 2em; }

One more example:

<b>An error occurred</b>

Comment: This looks right doesn’t it? But if you look up what <b> stands for you quickly find bold. But bold is certainly design, so it still doesn’t belong in the HTML document. A better choice is <em> that stands for emphasis or simply “this piece of text is important”. So instead of saying “this text looks like this” you are saying “this text is important” and you let the looks be decided by the CSS. Seems like a minor change, but it illustrates how to select your tags. Use this instead:

In the HTML:
<em>An error occured</em>

In the CSS:
em {
   font-weight: bold;
   color: Red;
}

One last example:

<table>
<tr><td><a href="">first link</a></td></tr>
<tr><td><a href="">second link</a></td></tr>
   ...
</table>

Comment: Lots of people format their navigation menu like the above example. But is a navigation menu really a table? If you look up the definition of a table you see that it’s made for tabular data, the same kind of data you would put in an Excel sheet. The example has only one column of data, and no headers… Some people state that they use tables because that means that they can get borders and a background color on their navigation, but that’s exactly what your CSS file is for (not the HTML document). So what should we do? Look deep in the list of HTML elements at w3schools and you’ll find something called an unordered list, <ul>. Have a look at this:

In the HTML:
<ul>
   <li><a href="">first link</a></li>
   <li><a href="">second link</a></li>
   ...
</ul>

In the CSS:
li {
   border: 1px solid;
}

This is probably a different way of thinking about HTML than you’re used to but trust me, when you’ve worked with it for a while you’ll see the power of it. Not only does this way of coding give you a more logical structure, there is also proof that this improves your ranking in search engines and makes it easier for accessibility devices to read your site. This way of designing is great.

Next we will build a simple HTML template to use as a start when building a new page. Like to see it?

January 5th, 2006 by Emil Stenström
Posted in CSS, HTML, Tutor
222 comments

Similar articles

Friendly Bit is a blog by Emil Stenström, an Swedish interface developer and web strategist that blogs about the modern web and how to make best use of it.