Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

learn about CSS colours (colors!)
learn about CSS custom properties (variables!)
learn about CSS sizes (for fonts and for boxes)

Colours in CSS

We can set the color of an element:
affects the colour of the text.

We can set the background-color of an element too.

Named Colours

There are 140 named colours that browsers will understand.
W3School's list of colour names

RGB Values

RGB specifes colours by giving values for three channels.

The amount of red, green and blue light, from 0 to 255, giving nearly 17 million colours, e.g.
```
p {
    color: rgb(255 0 0);
}
            
```

Computer Scientists prefer RGB values in hexadecimal; non-Computer Scientists prefer to use percentages, e.g.:


p {
    color: #FF0000;
}


p {
    color: rgb(100% 0% 0%);
}

Example Colours

rgb(0 255 0)
rgb(255 255 255)
rgb(0 0 0)
rgb(255 255 0)
rgb(255 250 0)
rgb(169 169 169)
rgb(211 211 211)

RGBa Values

A fourth channel, the alpha channel, can specify transparency.

It should be a number in [0,1] or a percentage:
- 0 or 0% is fully transparent.
- 1 or 100% is fully opaque.

E.g. all of these are the same:

`rgb(137 33 242 / 0.8)`	`rgba(137 33 242 / 0.8)`
`rgb(137 33 242 / 80%)`	`rgba(137 33 242 / 80%)`

Transparency Examples

This box contains three smaller boxes. They differ in the alpha channels of their background colours. One has an alpha channel of 0, one has an alpha channel of 0.8, and one has an alpha channel of 1.

HSL, HSLa

HSL specifies colours in a different way:

hue: a number between 0 and 360;
saturation: a percentage;
lightness: a percentage;
and again optionally an alpha channel.

New Colours

Newer devices have wide-gamut displays, which means they can display a wider range of colours (e.g. brighter colours) than sRGB (standard RGB).

CSS will soon allow these too, e.g.:

`color(display-p3 1 0 0.331)`	vibrant pink color
`lab(40% 83 -104)`	a shade of purple
`lch(69% 56 244)`	a shade of blue

Colour Schemes

You'll probably pick a colour scheme: a small number of colours that you use throughout your web site.

To change the colour scheme, you may have to make changes to many CSS rules.

This is a case where CSS custom properties can help.

Repetition!


header, nav, aside, footer {
    color: black;
    background-color: lightgray;
}
        
main {
    color: white;
    background-color: green;
}
        
table {
    border: 1px solid green;
}

CSS Custom Properties

You are familiar with variables in Python.
CSS has something similar to variables, called custom properties:
- They help us to avoid repetition in the stylesheet;
- They can give meaningful names to complex properties to improve readability;
- They can be set by JavaScript, e.g. for theme switching.

Defining a Custom Property

They must be defined within a CSS rule, e.g.:


html {
    --base-color: black;
    --base-bgcolor: lightgray;
    --main-color: white;
    --main-bgcolor: green;
}

Their name must begin with -- and, unlike the rest of CSS, their name is case-sensitive.

Using a Custom Property

The var function retrieves the value of the custom property, e.g.:


header, nav, aside, footer {
    color: var(--base-color);
    background-color: var(--base-bgcolor);
}
        
main {
    color: var(--main-color);
    background-color: var(--main-bgcolor);
}
        
table {
    border: 1px solid var(--main-bgcolor);
}

Font Sizes

In CSS, we can specify the font-size property, e.g.:
```
header {
    font-size: 2em;
}
```
There are two types of values used for font sizes:
- absolute font sizes; and
- relative font sizes.

Absolute Font Sizes

These values do not depend on any others.

Pixels	e.g. `16px`
Points = (1/72th inch)	e.g. `12pt`

On the web, we might use px occasionally;
otherwise, avoid absolute font sizes.

Relative Font Sizes

These values depend on other values,
e.g. in some cases, the parent's value.

em	e.g. `2em`	relative to parent's font size
rem (root em)	e.g. `2rem`	relative to root's font size

You can also use percentages, e.g. 80%, which are relative to the parent's font size, but this isn't common with font sizes.

Relative Sizes Example


…
<section>
    <h2>Did you know?</h2>
    <p>
        Badgers are nocturnal.
    <p>
    …
</section>
…


:root {
    font-size: 16px;
}
    
section {  
    font-size: 2em; 
}
    
h2 {
    font-size: 1.5em; 
}
    
p {
    font-size: 1.5rem;
}

The text in the h2 is 48px and the text in the p is 24px.

Advice for Font Size

For your root font, use pixels;
Then use em or rem for all other rules.


:root {
    font-size: 16px;
}

h1 {
    font-size: 2em;
}
    
section h2 {
    font-size: 1.5em;
}
    
section section h3 {
    font-size: 1.17em;
}
    
section section section h4 {
    font-size: 1em;
}

Widths of CSS Boxes

Later, we will learn about the CSS box model.
We may wish to set the width of a box, e.g.
```
p {
    width: 50em;
}
```
We can use absolute values (e.g. 200px) or relative values (e.g. 50em, 50%), percentages being very common.
However, relative values for widths behave differently from relative values for fonts.

Relative Values for Widths

	`font-size`	`width`
em	relative to the parent's font size	relative to this element's font size
%	relative to the parent's font size	relative to the parent's width

Advice for Sizes

Consider using custom properties again.


:root {
    --base-font-size: 16px;
    --base-bottom-margin: 2em;
}

main {
    font-size: var(--base-font-size);
}

header {
    font-size: calc(2.5 * var(--base-font-size));
    margin-bottom: calc(1.5 * var(--base-bottom-margin))
}

p {
    margin-bottom: var(--base-bottom-margin);
}