MAD9013

# Week 3: Box Model & Fonts

Agenda

# CSS Box Model

The box-model is how the browser views EVERY element on a webpage. It is made up of a series of 4 nested boxes. In the center is the content box that holds all the text or images in your element.

Around that is the padding box. The padding is used to create space between the content and the border. The padding area will display the same background as the content area. The only values you need to provide for the padding are the widths.

Around the padding box is the border box. For the border you need to provide three things - a width, a style, and a colour.

The last layer, around the border, is the margin box. The margin box is used to create space between elements. Its background is always transparent.

p {
  padding: 1rem 2rem;
  border: 1px dashed #333;
  margin: 2rem;
  width: 200px;
  height: 100px;
  line-height: 20px;
  min-width: 200px;
  min-height: 100px;
  max-width: 200px;
  max-height: 100px;
  overflow: hidden;
  box-sizing: content-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Above is the list of elements that can also interact with or affect the sizes or calculation of the size of the various layers of the box model.

# Centering vs Text-Align

# CSS Display Property

The four basic values used in CSS that you will write are: display: block, inline, inline-block, and none.

  • block means that the element fills as much width as it can. Any elements which come before or after it must be on their own line. We are allowed to change the width or height of the element through CSS.
  • inline means that the element will collapse to the size of its content. It will not force other elements to move to a new line. We cannot alter the width of the element through CSS.
  • inline-block is used as a default value by all images. It is like inline except that you can change the width of the element.
  • none tells the browser to hide the element and pretend that it does not exist while creating the layout for the rest of the page.

# Other less used values

There are over 30 other values that are used as default assigned values for specific elements. These values are rarely used outside of their default setting.

div {
  display: table;
  display: table-row;
  display: table-cell;
  display: list-item;
  display: ruby-text;
  /* and many more */
}
1
2
3
4
5
6
7
8

MDN reference for the display property (opens new window)

# The New display superstar properties

In the last few years a couple new values for the display property have been added. They have completely changed how people build webpage layouts.

div {
  display: flex;
}
main {
  display: grid;
}
1
2
3
4
5
6

We will be covering these values in much greater detail in a few weeks.

# CSS Selectors

There are many types of selectors in CSS. A selector can be a single tag name or it can be a long string of tags, classes, ids, attributes, and other special conditions.

It is most important to remember that a selector is meant to represent a path through your HTML to one or more elements.

The browser will read the selector from right to left. Take this selector as an example body main p. A browser will first find ALL paragraph elements. Then it checks to see which of those paragraphs exist inside a main element. Then it will check if the main element is inside a body element.

So, while that example may work, there are probably more efficient ways to write that selector. The main element will clearly always be inside the body element so we could eliminate that. If all the paragraphs are inside the main element then we could eliminate the main part. That would leave us with a selector p. Easier for us to write and faster for the browser to process too.

Here is a list of the most common types of selectors:

  • Tag Selectors - html tag names like p, li, h1
  • Class Selectors - start with a .. Match the value of the class attribute.
  • ID Selectors - start with a #. Match the value of the id attribute.
  • Universal Selector - *. Will match ALL tags
  • Attribute Selector - [title] will match against attribute or attribute and a value
  • Sibling Selectors - + and ~ match elements that have the same parent under different conditions
  • Child Selector - p > span means that the span must be a child of the paragraph.
  • Descendant Selector - p span means that the span can be any depth inside the paragraph.
  • Pseudo Classes and Elements - Long list of states and special conditions.
  • nth Selectors - When you want to match against the position number for an element.

# CSS Cascade

The C in CSS stands for Cascade. It means that the property values, in most cases, get transferred from the parent element to the child element.

Sometimes there are properties that the child element does not need or the child can have a different default value that overrides the cascade. However, most values will cascade.

Exceptions are things like color for anchor tags. the anchor will not care what the color value was for its parent. It will use the default blue or maroon colours shared by all links.

No elements have borders by default except for image tags if they are inside an anchor tag.

# CSS Specificity

  • Specificity is the term that explains how the browser determines which styles to apply first, second, third, and so on.
  • The basic idea is that default styles are applied first, then tag styles, then class styles, and followed by the id styles last.
  • However, the location of the style also applies. Styles in an external sheet, inside a style tag, or inline inside a style attribute have an effect on the order.
  • Pseudo-elements, pseudo-classes, and the number of each type of selector also has an impact.

# Fonts in CSS

# font-size and font-weight

The font-size property controls the height of every character inside an HTML element. There are many different units that you can use to describe the size. We will be using the rem (Root EM) unit most commonly.

The font-weight property controls how light or bold the text inside an element is. You can use the keywords light, normal, bold, lighter, or bolder. Alternately, you can use the numbers 100, 300, 500, 700, or 900.

p {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
}
a {
  text-decoration: underline;
}
1
2
3
4
5
6
7
8

# text-align and text-decoration

The text-align property controls how text will move around inside the content box part of the box model.

The text-decoration property allows you to show or hide an underline, overline, or line through your text.

# letter-spacing

In Graphic Design, the space between letters is usually called kerning. With kerning you can control the spacing between words, letters or specific combinations of letters.

In CSS we have the letter-spacing property which lets us set a specific amount of space to use between EVERY letter inside an element. The following example will put 3 pixels of space between every letter in all paragraphs.

p {
  letter-spacing: 3px;
}
1
2
3

You can use any spacing unit you want when setting the letter spacing.

# CSS Units

# To Do Before Week 4

Self-Directed To Do

  • Watch the following videos before week 4.
Last Updated: 8/26/2021, 10:59:08 PM

← Week 4: Design Foundations →