Cascading Style Sheets (CSS)

This tutorial is intended to introduce the concept and basic usage of CSS. In its pages, I'll try to cover the basic aspects of style sheets, which will allow you to continue learning with more specialized resources.

Concept

CSS is a standard designed primarily to separate presentational attributes (like background color, font size or indentation) from content. Although it can work with many types of documents, it's mainly used as a way to convey presentational information in web pages.

The separation between content and presentation improves flexibility, by allowing authors to define one set of styles that thousands of documents will use, thus reducing the amount of time and work needed in each update. Additionally, the implementation of CSS permits a document to be purely semantic, by setting it free from the need of using presentational markup.

Declarations, properties and values

A declaration is the basic unit of CSS, which means that you can't use anything smaller than this in your documents. A delcaration consists, basically, in the assignation of a value to a property.

In other words, a declaration is the answer to a question. How wide should this table be? How thick this border? What color should this background be? How big the font in this paragraph? And that's exactly how you define the look of your document: by setting up declarations, one for each property you need to define.

But CSS has a specific format that every declaration must follow. It cosnsists in the name of the property followed by a colon (":") and the value that it will have assigned. When providing more than one declaration in the same block, each declaration must be separated from its next by a semicolon (";"). This is why authors often use a semicolon at the end of every declaration, regardles of the presence of a following declaration. The next scheme describes the parts of a CSS declaration.

colorproperty: redvalue;

In the following example, a set of declarations are presented using this format. Here an additional line break is added at the end of each declaration, in order to improve readability.

background-color: green;
font-size: 16px;
margin-top: 40px;
font-weight: bold;

Selectors

With that seen so far we can build declarations, but how do we indicate what elements in the document should be affected by them? This is where CSS selectors come in. A selector is a means to make a reference to a group of one or more HTML elements, in order to apply a set of CSS declarations to it.

There's a structure you must comply with to use a selector and it's conformed by the selector followed by the set of declarations enclosed by curly braces ("{}"). The following example, where spaces and line breaks have been added to improve readability, reflects this structure.

[selector] {
  background-color: green;
  font-size: 16px;
  margin-top: 40px;
  font-weight: bold;
}

There's a wide range of selectors available, which translates into an exceptional flexibility for manipulating properties. In the following sections, we'll see some of the most basic selectors, as these will present the ideas that other selectors will be built upon.

The universal selector

The universal selector matches all elements in the document. This is some kind of wildcard that has more meaning when used in combinations. The following code sets a couple of properties to all elements in the document.

* {
  font-size: 1.5em;
  color: #444;
}

Type selectors

The type selector matches all elements in the document that have the specified type. With this selector you can apply declarations to, for example, all paragraphs (p elements), all list items (li elements) or all links (a elements) in the document. The next example is providing style declarations to all ordered lists (ol elements) in the document.

ol {
  margin-left: 0;
  padding-left: 2em;
}

ID selectors

The ID selector matches the element that has the specified value in its id attribute. As, by definition, id values must be unique, this selector can only affect one element in the document. In its declaration, the specified ID must be preceded by a hash sign ("#").

The following example shows a set of declarations being applied to an element which has the value "maintitle" in the id attribute.

#maintitle {
  font-size: 4em;
  color: blue;
  text-decoration: underline;
}

To make it absolutely clear, the previous declarations would affect an element like the following.

<h1 id="maintitle">Embracing odds</h1>

Class selectors

A class is a concept introduced by CSS with the purpose of grouping declarations and applying them to a custom set of elements, regardless of what their type or nature is. From another point of view, a class is one or more CSS declarations, grouped under a name that elements can use to access their definitions and be affected by them.

Having said this, a class selector applies a set of declarations to all elements that have the specified class name in their class attribute. In its construction, a dot (".") must precede the name of the class. The following example shows a set of declarations for the class called "important".

.important {
  font-size: 1.2em;
  font-weight: bold;
  color: red;
}

And these declarations would affect elements like the following.

<h3 class="important">Warning</h3>
<p class="important">Don't open the airlock during interstellar travel!</p>

Advanced selectors

CSS allows combinations to be made with the four basic selectors described above, by referring to relationships between parents, children, siblings, descendants and more. With some of these tools you could, for example, apply declarations to all paragraphs that are direct children of the body. Furthermore, it provides other selectors based on the composition of the attributes or states an element presents, allowing authors to target declarations to, for example, all input elements that are of type "radio".

Despite some of the newest are poorly supported, these advanced selectors are extremely powerful and can aid in the development of complex websites. Nevertheles, they won't be treated in this tutorial because of its scope. This section is merely informative.

123Next