CTEC2712 Web application development

Introducing CSS

This is an introduction to the basics of CSS

Dr Graeme Stuart

CSS is for presentation

CSS allows developers to control the style and layout of a document in the browser.

A wireframe page layout design CSS zen garden screenshot showing multiple designs for the same HTML document

Spend some time in the CSS Zen Garden for inspiration.

1

Plumbing

Ideally, we don’t want to include style information within the HTML document itself. So we put all our style information in separate CSS files and use <link> elements to link these files into our documents.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My page</title>
        <!-- All styling information is in the linked file -->
        <!-- So swapping out a stylesheet is easy -->
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <!-- content goes here -->
        <!-- keep style information out of the content -->
    </body>
</html>

This is very flexible. A common stylesheet can be used across multiple documents. We can also have multiple stylesheets attached to a single document if we want.

2

Syntax and nomenclature

A CSS ruleset consists of a [group of] selector[s] and a declaration block (between curly brackets) containing one or more declarations. Where Each declaration consists of a property name, a colon and a value, followed by a semi-colon.

1
2
3
4

selector {
    property: value1;
    another-property: value2;
}

Typically, each declaration is given it’s own line. One-line formatting is also common but should only be used when there is only one declaration.

1
2
3


selector { property: value1; another-property: value2; }

Spaces and newline characters are ignored. However, consistent formatting is expected.

3

Some examples

CSS declarations are a way to set CSS properties of elements to given values. The selector determines which elements are targetted by the ruleset.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

body {
    margin: 0;
}

p {
    color: green;
}

a {
    text-decoration: underline;
    color: blue;
}

li {
    padding-block: 1em;
    background-color: yellow;
}

In the above examples the selectors are body, p and a respectively.

4

Some more examples

CSS declarations can have multiple values, typically separated by spaces or commas.

1
2
3

body {
    font-family: Tahoma, Helvetica, sans-serif;
}

Some properties are shorthand properties provided for convenience.

1
2
3
4
5
6
7
8
9

p {
    border: 3px solid blue;
}

p {
    border-width: 3px;
    border-style: solid;
    border-color: blue;
}

The border property is shorthand for setting border-width, border-style and border-color simultaneously.

5

Class (and id) selectors

In HTML, class attributes (class="student") can be used to identify similar elements. Class selectors (the dot, e.g. .student) can be used for selecting elements with a specific class attribute. Similarly, id attributes (id="students") can be selected with a hash (e.g. #students).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<section id="students">
    <figure class="student">
        <img src="images/P12345678.png">
        <figcaption>P12345678</figcaption>
    </figure>

    <figure class="student">
        <img src="images/P12345679.png">
        <figcaption>P12345679</figcaption>
    </figure>
</section>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

#students {
    background-color: #222;
    display: flex;
    justify-content: center;
}

.student {
    margin: 0.5em 0.25em;
    border: 2px solid #fff;
    background-color: #333;
    color: #eee;
}
6

Combinators

Selectors allow us to specify which elements will be affected by a ruleset. There are several patterns (known as combinators) we can use for selectors which allow us to target specific elements.

Separating elements with spaces (e.g. p a) is the descendent combinator.

1
2
3

p a {
    color: darkgrey;
}

Using a greater than symbol (e.g. p > a) is the child combinator

1
2
3

nav > a {
    text-decoration: none;
}

Using a plus symbol (e.g. h1 + p) is the next sibling combinator

1
2
3

h1 + p {
    color: darkgrey;
}

Read more about selectors and combinators.

7

Specificity

The order of styles is important, but styles are not simply applied in order. Styles with higher specificity take precedence over those with lower specificity.

1

<p class="a-note" id="this-note">This is a note</p>

The paragraph has a class and an id. The style declarations below all try to set the color property. So, there are three potential values, but only one can be applied. Which one is chosen?

1
2
3

#this-note { color: red; }  /* selecting an id   - (1, 0, 0) */
.a-note { color: green; }   /* selecting a class - (0, 1, 0) */
p { color: blue; }          /* selecting a type  - (0, 0, 1) */

The specificity algorithm counts selector components in each weight category (ID, CLASS, TYPE). If competing declarations have the same value, the order in the file will decide.

Note that styles added as inline style attributes will always be applied.

8

The cascade

Essentially there are three types of stylesheets.

  • Browser stylesheets (user-agent stylesheets) provide a base set of default styles.
  • User stylesheets (no longer common) are custom styles set by the browser user.
  • Author stylesheets (the ones we write as developers) are embedded or linked in the HTML document.

Conflicting styles are applied by an algorithm known as the cascade (as in Cascading Style Sheets). The algorithm is fairly complex but for our purposes we can simplify it.

9

documentation

Documentation is usually excellent via MDN. Be sure to seek out the MDN page when searching the web (add “MDN” to your search).

MDN logo

e.g. see the documentation for the CSS border property

10

CSS lab exercises

There are two main exercises which will introduce some CSS concepts in a practical way.

  • Choosing fonts and playing with typesetting can transform the way your site looks. CSS fonts provides a basic introduction to how text works in CSS.
  • The CSS box model is a core concept in CSS, controlling and element size as well as the empty space around and within an element.
11

Introducing CSS

If you have any questions, now is a good time to ask.

Thanks for listening
Dr Graeme Stuart