Defining and Using Styles

Learning objectives

Knows how to define styles and knows where the term cascading in CSS comes from.
Knows how selectors work and how they are used to specify where particular styles apply.
Knows how to select an individual element with a selector.
Knows how to select a family (or a class) of elements with a selector.

Defining styles

A style is defined with a selector, style name, and style value. The selector is used to define the element or elements to which the styles apply. Style names and style values are placed within a block, which follows the selector and is defined with curly brackets. Each style is defined using the name of the style and a value so that the name is followed by a colon and the value. Styles are separated from each others using a semicolon.

The following example defines two styles to text paragraphs (p). The text color will be dark blue (color: darkblue;) and the background color will be light blue (background-color: lightblue).

p {
  color: darkblue;
  background-color: lightblue;
}

A page that uses the above style would look as follows.

Styles can be generic so that the styles are applied to all elements, or specific so that the styles are applied to specific elements, or even to elements with specific identifiers.

Cascading styles

The term cascading in CSS means that styles cascade downwards in a HTML document. The example below sets the (font) color of the body element as blue.

body {
  color: blue;
}

As styles cascade, the above style is applied to the body element and every element within the body element. As an example, if the following HTML document would use the above style, all texts within the document would be blue, as shown in the example below.

<body>
  <h1>Welcome!</h1>
  <p>We will now learn a bit about defining styles.</p>
  <h2>Subtitle</h2>
  <p>A style defined to the body of a document will cascade to all the elements in the page.</p>
</body>

When you think about cascading downwards, think of the HTML document as a tree. The HTML document represented above can be seen as the following tree. As we have defined a style for the element body, all of the elements below it will be affected by the style. Thus, all text shown on the page will use the blue font.

Multiple style definitions

Multiple styles are defined by defining multiple selectors and defining styles for each of them. In the example below, the text in the main heading (h1) will be red, and the text in the text paragraph (p) will be blue.

h1 {
  color: red;
}

p {
  color: blue;
}

Below, we can see what the above style looks like in a HTML document.

<body>
    <h1>Welcome!</h1>
    <p>We will now learn a bit about defining styles.</p>
    <h2>Subtitle</h2>
    <p>But! We did not set a style to the h2 element!</p>
</body>

As we notice, we did not set a style to the subtitle h2. This leads to a situation, where the element style will follow the default style from the browser. If we would have set a style to the document body, the style from the body would have cascaded to the h2-element. In the example below, we set the text color in the body to green.

body {
  color: green;
}

h1 {
  color: red;
}

p {
  color: blue;
}

We did not explicitly set a style to the h2 element above but the element is styled. The style for h2 comes from the style from body cascading to the h2 element. Note however, that the style from body does not cascade into h1 or p.

In practice, more specific style definitions always replace more generic style definitions. In other words, the styles cascade in the HTML document only until an element where the same style has been defined.

When creating style definitions, it is possible to create a list of selectors for a specific style. This is created so that the selectors are separated from each others using a comma. The example below sets the same style to the heading elements h1, h2, and h3.

body {
  color: green;
}

h1,h2,h3 {
  color: red;
}

p {
  color: blue;
}

Question not found or loading of the question is still in progress.

CSS and style names

CSS is a standard that is being updated by multiple working groups. You can follow the progress on the standard at https://www.w3.org/Style/CSS/. In this material and course, we focus on a very narrow set of CSS styles. You can, however, visit a broader documentation using the previous link.

Styling an individual element

Styling an individual element is done by adding an id attribute to the element that needs to be styled and referring it using a selector. Referring the value of an id attribute -- or, in other words, selecting it -- is done using a hashtag #value, where value is the value set to the id attribute of the referred element. The HTML document below shows three text elements. One of them has an id-attribute with the value awesome.

<body>
  <p>Selecting elements can be done primarily using three ways. ...</p>
  <p id='awesome'>If we set an id attribute to an element, we ...</p>
  <p>We can also set a class attribute to one or more elements, which ...</p>
</body>

An element that has the id attribute value awesome is selected using a selector #awesome. In the example below, the text color of an element with the id awesome is set to blue.

#awesome {
  color: blue;
}

Styling a family (or a class) of elements

A group of elements can be styled together by adding a class attribute with the same value to each element that should be grouped together. Selecting elements based on the class attribute is done using a dot selector .value, where value is the value given to the class attribute.

While the value of an id attribute should be unique (that is, two elements should not share the same id attribute value), the same class attribute value can be used in multiple elements. The HTML document below has defined a class header to both h1 and h2 elements.

<body>
    <h1 class='header'>Welcome!</h1>
    <p>We will now learn a bit about defining styles.</p>
    <h2 class='header'>Subtitle</h2>
    <p>The above h1 and h2 elements have header as their class attribute value.</p>
</body>

Elements with the class attribute value header are selected using a selector .header. In the example below, the font color of every element with the class attribute value header is set to green.

.header {
  color: green;
}