CTEC2712 Web application development

Reviewing CSS

CSS is for presentation

Contents

  1. Plumbing
  2. Syntax and nomenclature
  3. Some examples
  4. Some more examples
  5. Class (and id) selectors
  6. Combinators
  7. Default flow
  8. flex properties
  9. grid properties
  10. Outer display
  11. Inner display

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.

1

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.

2

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.

3

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.

4

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;
}
5

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.

6

Default flow

By default, content is arranged in a page according to the flow layout.

1
2
3
4
5
6
7
8

body {
    font-size: 1.4em;
}
body * {
    outline: 2px solid hsla(0, 50%, 50%, 0.2);
    background: hsla(0, 50%, 50%, 0.1);
    padding-inline: 0.25rem;
}

Block elements take up the full width of their container. Inline elements flow like text. Everything flows, wraps and adjusts according to the size of the viewport.

7

flex properties

flex-direction controls which dimension becomes the main axis.

justify-content controls how elements are distributed on the main axis.

align-items controls how elements are placed on the cross-axis.

gap sets the minimum space between elements.

For more control also see:

flex-grow, flex-shrink, flex-basis and flex-wrap .

8

grid properties

grid-template-columns determines the number and type of columns.

1
2
3

body {
    grid-template-columns: 1fr;
};    

1
2
3

body {
    grid-template-columns: 1fr 1fr;
};    

1
2
3

body {
    grid-template-columns: 1fr 4fr 1fr;
};    

1
2
3

body {
    grid-template-columns: 1fr 10% 2fr 2em;
};
9

Outer display

Setting the display property of an element will change the way the element behaves.

We have seen the difference between block and inline. These can be controlled by setting the display property.

These are controlling the outer display type which controls how the element participates in the flow layout.

10

Inner display

We can provide other values for the display property to control the formatting context for child elements.

These change the default flow layout to either flex or grid layout.

These are controlling the outer display type which controls how the element participates in the flow layout.

11

Reviewing CSS

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

Thanks for listening