Web Development

Lecture Objectives

• learn that, from a CSS point-of-view, a web page is a tree of boxes
• learn about CSS properties for styling the parts of those boxes
• learn more about widths and heights

Warning

Fog of details ahead!

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

Boxes

Every HTML element and run of text generates
zero, one or more CSS boxes

Visually, the tree of elements becomes a tree of boxes.

In CSS, we can style the boxes.

Outer Display Type

Every box has an outer display type,
either block or inline.

This determines how the box is laid out in flow layout.

Flow Layout

• Assume horizontal-top-to-bottom writing mode (like normal English).
• If an element has block outer display type:
  • its box starts on a new line;
  • it takes up the full width available (i.e. the width of its container);
  — hence they stack vertically.
• If an element has inline outer display type:
  • its box continues on the current line, if it can;
  • it takes up only as much width as necessary for its content;
  — hence they are are laid out horizontally.

Inner Display Type

• Every box also has an inner display type.
• This determines how its contents (its child boxes) are laid out.
  • Most commonly, this will also be flow layout.
  • But recent additions to CSS3 include flexbox layout and grid layout.

The display Property

You can choose the outer and inner display types by setting a value for the display property.
There are about 20 possible values, e.g.:

Default Display Type

• The initial value for all boxes is display: inline
• But your browser's default stylesheet applies a more sensible value, e.g.:

  
  header, nav, main, section, article, aside, footer,
  figure, figcaption, div, p, h1, h2, h3, h4, h5, h6, 
  ul, ol, form, fieldset {
      display: block;
  }

  leaving, e.g., em, i, strong, b, span, a, img,… as inline.

Changing the Display Type

You can change an element's display type in your own stylesheet, e.g.

img {
    display: block;
}
    

(In a previous lecture, we wrapped an image inside a figure to make it appear on a new line.)

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.

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

Padding

Top and bottom padding will not always perform as you would expect.

Background Colours

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

p {
    background-color: 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.

Margins

Top and bottom margins will not always 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.

Total Width of a Box

The total width of a box on the screen is:

left margin + left border + left padding +
width of content
+ right padding + right border + right margin

Setting the Width

You can set the width of an element, e.g.

p {
    width: 50em;
}
        

But what does this affect?
just the content? the whole box? something else?

It depends on the box-sizing property.

box-sizing

• box-sizing: content-box (default):
  • when you set the width of an element, you are setting the width of the content.
• box-sizing: border-box:
  • when you set the width of an element, you are setting the width for the left- and right-borders, left- and right-padding and the width of the content.

Example of Setting Width

Ignoring margins, how wide will the content of this paragraph be? And what will the total width of the box be?

p {
    box-sizing: content-box;
    border: 5px solid black;
    padding: 10px;
    width: 500px;
}
    

Example of Setting Width

Ignoring margins, how wide will the content of this paragraph be? And what will the total width of the box be?

p {
    box-sizing: border-box;
    border: 5px solid black;
    padding: 10px;
    width: 500px;
}
    

Setting the Width

Many web developers believe that
box-sizing: border-box
is more intuitive than the default, especially for web page layout.

Hence, to make a global change, they include this in their CSS:

*, *:before, *:after {
    box-sizing: border-box;
}
    

Setting the Width

When setting the width, what values can you use?

• A length, e.g. em (relative to this element's font size), px, …
• Percentage, relative to the parent's width;
• auto: the browser decides;
• max-content: as wide as it needs to be;
• min-content: as narrow as it can be;
• fit-content(n): min(max-content, max(min-content, n%))

You can also set max-width and min-width.

Setting the Width

Setting the width will not always perform as you would expect.

Setting the Height

You can also set the height of an element, similarly.

Advice:
Avoid setting heights, if you can.

If you set a height, the browser may need to display horizontal scrollbars — which users dislike.

G'luck!