Web Development

Lecture Objectives

• learn how to style the parts of the box model
• learn about colours, background images, shadows and other goodies
• learn more about widths and heights

Warning

Fog of details ahead!

Do not 'learn off'.
Look-up when needed.

The Box Model

Example of a Box

<p>
    To a child, a cardboard box is a place to 
    hide, a place to sleep. A racing car, a
    ship on the high but dry seas. Upturned,
    it is a table, a drum. A platform for the
    imagination. But, made of card, it is
    soon discarded.
<p>
        

p {
    margin: 1em;
    border: 1px solid black;
    padding: 2em;
    width: 30em;
}       

The Box Model

Content

This is the content of the element, e.g. the text, images, etc.

You can set the width — but see previous lecture!

        p {
            width: 50%;
        }

You can set the color — this is the colour of the text

        p {
            color: red;
        }

The Box Model

Padding

Four properties whose values can be in ems, pixels or other units.

p {
    padding-top: 0.5em; 
    padding-right: 1em; 
    padding-bottom: 0.5em; 
    padding-left: 1em;
}

If you use percentages, they are based on the width of the element's parent.

Padding

Various shorthand versions, including:

p {
    padding: 0.5em 1em 0.5em 1em;
}
    

p {
    padding: 0.5em 1em;
}
    

p {
    padding: 0.5em;
}
    

Background Colours

The color property affects the text

The background-color property affects the content + padding only, e.g.

p {
    color: white;
    background-color: blue;
}
    

What colours are allowed?

Named Colours

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

RGB Values

RGB specifies 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

1. rgb(0 255 0)
2. rgb(255 255 255)
3. rgb(0 0 0)
4. rgb(255 255 0)
5. rgb(255 250 0)
6. rgb(169 169 169)
7. 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

HSL and New Colours

• 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.
• Newer devices have wide-gamut displays, which means they can display a wider range of colours (e.g. brighter colours) than sRGB (standard RGB), 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

Background Images

The background-image also affects the content + padding only, e.g.:

p {
    background-image: url("background.png");
}

Background colours display behind background images, which display behind content.

Background Images

• By default, background images tile so that they cover the content + padding.
• But you can control the tiling and other properties:
  • background-repeat
  • background-attachment
  • background-position
  • background-size

The Box Model

Borders

You must specify colour, width and style
(e.g. solid, dashed, double,…):

p {
    border-width: 1px; 
    border-style: solid; 
    border-color: black;
}
    

p {
    border: 1px solid black;
}
    

If you don't set the border style, you will see nothing!

Rounded Corners on Borders

For rounded corners, specify the border-radius:

p {
    border: 1px solid blue;
    border-radius: 16px;
}
    

Box Shadows

To obtain a simple shadow:

p {
    box-shadow: 2em 3em gray;
}
    

The values are the horizontal offset of the shadow, its vertical offset and its colour.

The Box Model

Margins

Margins are done similarly to padding, with the same shorthand.

p {
    margin-top: 1em;
    margin-right: 2em; 
    margin-bottom: 1em; 
    margin-left: 2em;
}
    

p {
    margin: 1em 2em 1em 2em;
}

Again, if you use percentages, they are based on the width of the element's parent.

Margin Collapsing

Adjacent bottom and top margins will not perform as you would expect: margin collapsing

• Suppose the bottom margin of a box is 5px.
• Suppose the top margin of the box below is 10px.
• The amount of space will not be 15px.
• It will be 10px: the smaller margin is eliminated.

Awkward Exceptions!

Consider these three:

In the case of the last of these three:

• Setting the width/height has no effect (previous lecture)
• Setting the top/bottom padding/margin will not push other boxes away
• Use display: inline-block to change this

G'luck!