Codingdomain.com

A CSS Crash Course

Introduction

This article is exactly what is says - a crash course. There are many web sites explaining CSS in detail already; that's why I've desided to keep this page short.

A simple CSS page

But first, see what CSS actualy does. Take a look at the following code:

The HTML code

This is a normal HTML page without any markup: titles are defined with <h1>, paragraphs are placed in <p> tags, etc.. The actual markup of the elements in separated from the HTML code.

A simple HTML page: example.html
<html>
  <head>
    <title>A simple example</title>
    <link rel="StyleSheet" type="text/css" href="example.css">
  </head>

  <body>
    <h1>A CSS Demo</h1>
    <p>
      This page shows some <em>simple examples</em> of CSS.
      The text in this paragraph nearly has any markup.
      Yet, it looks attractive without any special HTML code.
    </p>

    <h2>A subtitle</h2>
    <p>
      This is another paragraph.
      It can even be <strong>strongly emphasized</strong>.
    </p>
    <ul>
      <li><a href="../crash-course/">Return to the article</a></li>
    </ul>
  </body>
</html>

The CSS code

All markup of the page is defined in an external stylesheet. The stylesheet looks like this:

A simple CSS page: example.css
body
{
  padding:      0;
  margin:       12px;
  font-family:  "Trebuchet MS", "Verdana", "Arial", sans-serif;
  font-size:    12pt;
  line-height:  150%;
  width:        30em;
}

h1, h2
{
  color:           #0066cc;
  font-style:      italic;
}

h1
{
  border-bottom:   1px solid #cccccc;
  padding-bottom:  5px;
  display:         list-item;
  list-style-type: square;
}

The result

The final result can be viewed here.

As you can see, the result is amazing considering how little HTML code is used.

Ingredients of CSS

All CSS code consists of a few basic ingredients. The markup is defined with attributes, like font-size: 12pt; and font-style: italic;. Each piece of markup can be set with a different attribute; there are attributes for the font settings, colors, margins, background, etc..

A list of the available attributes can be found at the web site of W3 Schools, so I won't repeat those here.

In the example stylesheet, the body, h1 and h2 were used as selector. Each selector defines the HTML tag where the markup applies to. CSS also supports many - more complex - selectors, to add markup to more specific elements of a web site

In the next sections, I show how you can specify markup for specific elements of the web site.

New HTML tags

With the introduction of CSS, two new HTML tags were introduced: the <div> and <span> tag.

These HTML tags don't have any markup, but they are still quite useful. They can be used in combination with CSS.

All HTML tags - including <div> and <span> - also support two new attributes: the class and id attributes. These attributes can be used to "tag" elements, and apply markup to those HTML tags using CSS.

An example

Let's take this example:

Using the div and span tags:
<div id="mainContent">
  <h1>The title</h1>
  <p>
    <span class="important">This is important.</span>
  </p>
</div>

In this case, the <div> and <span> tags don't add any markup, they only "tag" certain parts of the page. The following CSS code is used to add markup:

Applying markup to classes and ids:
span.important  { color: red; }
div#mainContent { border: 1px solid black; }

See how the <span class="important"> is selected with .important in the CSS code? This makes it possible to give certain elements a different markup. The <div id="mainContent"> is selected with the #mainContent code.

Notes on the example

The name of an id attribute must be unique, since it's the identifier of an HTML tag. The class name however, doesn't have to be unique. One HTML tag may even have multiple classes, for example: class="note todo".

The markup is not limited to <div> and <span> elements. In fact, any element can be used, like <ul> or <cite>. The advantage of the <div> and <span> elements is their default appearance: they have no standard markup.

Sometimes, the <span> tag needs to be used, in other situations, <div> must be used. It depends on the context. The <span> tag can only be used to span text within existing elements, like paragraphs. The <div> tag can be used in any other situation. It may act as "container" for larger elements like tables, lists and paragraphs.

An HTML tag with an ID can also be used in JavaScript with the document.getElementById(..) function. This function replaces the old document.all and document.layers code.

More complex selectors

In the previous examples, I've only shown some simple selectors. There are other kind of selections which can also be used. This table shows the most important ones:

SelectorMeaning
*selects all elements
aa *selects all elements within the aa tag.
aa bbselects all bb elements within the aa tag.
aa, bbselects all aa and bb classes, it's just a list.
aa.classnameselects all aa tags with the class classname.
aa#idnameselects the aa tag with the id idname.
a:linkselects the a tag if it's a normal hyperlink.
a:visitedselects the a tag if it's a visited hyperlink.
a:hoverselects the a tag if the mouse hovers over it.
a:activeselects the a tag if user is clicking on it.

There are more - less supported - selectors. The full list can be found in the CSS2 Specification. The most important ones are:

SelectorMeaning
aa > bbselects the bb tag if it's a direct child of aa.
aa + bbselects the bb tag if it's immediately preceded by aa.
aa[attr="value"] selects the aa tag with a attr="value" attribute.
aa:beforeinserts a new element before the selected element, to create some special effects.
aa:afterinserts a new element directly after the selected element.

Cascading rules

It's possible that multiple CSS rules apply style to an element. To solve this problem, each CSS selector has a different priority. As rule of the thumb: when a selector is more specific, it get's a higher priority.

Simple HTML tags have the lowest priority, combined tags have a higher priority. An ID selector has the highest priority in CSS files, it can only be superseded by inline HTML style. Inline style can be defined with the style=".." attribute in HTML tags.

Next part

blog comments powered by Disqus