CSS basics

HTML defines the content of a web page but not its aesthetics. Styling a document is achieved using CSS, which stands for Cascading Style Sheet and is another language that web browsers can interpret.

Inline CSS

The simplest way to style elements of an HTML document is to add the "style" property in the HTML tag. For example:

<p style='color:blue;'>This is a paragraph and it is blue</p>

property:value is the CSS semantics used to style elements and every statement should be terminated by a semicolon (;). As such, multiple properties can be styled:

<p style='color:blue;background-color:lightgreen;'>This is a paragraph and it is blue with a light green background</p>

CSS in head

The approach presented previously can quickly become tedious for great amounts of elements to style. To apply a style to multiple elements at once, the styling rule can be written in the head of the document within the <style> tag. For example, all links can be turned green using the following code nested in the document head:

a {
    color: red;
}

In this example, the links of the document are targeted by the selector a and the corresponding styling rules are put in brackets. Multiple styling rules and targets can be set in similar fashion:

a {
    color: red;
    font-size: 25px;
}
p {
    background-color: pink;
}

External CSS

Having the CSS in the document head allows to style multiple elements of a document at once. However, websites are often composed of multiple documents. Copying the styles into every one of those would create unnecessary redundancy and make maintenance troublesome. If CSS code is to be shared by multiple documents, it can be put in an external .css file and linked in all relevant documents using:

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

where styles.css is the document containing the styling rules. It is important to note that styles.css has to contain only CSS, i.e. no <style> tags.

Selectors

Classes

Selecting elements to style using their tag can be fairly limiting: What if there were two classes of links and one class should be red while the other should be green? HTML tags can hold a class property. For example, here is a link of class red:

<a class="red">

A class can be selected in CSS by adding a dot in front of it. For example, setting a red color to all elements of class "red" is done as so:

.red {
  color: red;
}

Note that elements with a different tag type can be part of the same class.

IDs

Sometimes a single specific element must be styled. One option to do so would be to create a class just for it. However, one could use the "id" property of HTML tags:

<a id="specialElement">

IDs can be targetted in CSS using a # placed in front of the ID:

#specialElement {
  font-weight: bold;
}

Relation to other elements

Another way to target some elements in CSS is to use their relation to other known elements. For example, adding a selector after a selector, separated by a space implies targeting elements matching the second selector if they are nested (at any level) within the first selector. Here, all links that are inside a table will be turned red:

table a {
  color: red;
}

There exist many ways to select elements using CSS and this tutorial only covers the most basic of them. For a more detailed list of selection methods, please check this page, provided by W3Schools.

Key takeaways

CSS describes the aesthetics of an HTML content. It targets HTML elements usually by tag, class, id or relation to other elements.

More on the subject

The content of this page constitutes a very rudimentary introduction to CSS for a more thorough study of the subject, W3Schools offers detailed tutorials on web development.