Webbo3 Frontend Development · Month 1 · Lesson 10

Colour, Typography and the Box Model

Learn to apply colour typography and box model concepts to create visually appealing web pages with ease and precision always

When you look at a website, you might notice that some parts of the page have a certain colour or font style that makes them stand out. You might also notice that there is some space between elements on the page, like between paragraphs of text or between a heading and the rest of the content. As a beginner frontend developer, you might wonder how to achieve these effects in your own web pages. You might try using different methods to add colour or change the font, but end up with inconsistent results. You might also struggle to control the spacing between elements, leading to a cluttered or uneven layout. By the end of this lesson, you will be able to style text properly and reason about spacing without guessing. You will learn how to use CSS properties to change the colour and font of your text, and how to control the spacing between elements using the box model. You will be able to create web pages with a consistent and visually appealing design, without having to rely on trial and error. You will understand how to use CSS to add colour, change font styles, and control the layout of your web pages, giving you a solid foundation in frontend development. You will learn how to use specific CSS properties, such as colour, font-family, and font-size, to style your text. You will also learn about the box model, which is a fundamental concept in CSS that helps you understand how elements are laid out on the page. With this knowledge, you will be able to create web pages that are not only functional, but also visually appealing and easy to use. You will be able to control the layout of your web pages, add colour and style to your text, and create a consistent design that enhances the user experience.

What you need before starting

Everything from the previous lesson, and the project folder you have been building in. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.

Colour

Colour Models

There are several ways to represent colour in CSS, including hex, rgb, rgba and hsl. Hex colours are written as a hash followed by six hexadecimal digits, representing red, green and blue. For example, #ff0000 is red. Rgb colours are written as rgb followed by three values for red, green and blue, each ranging from 0 to 255. For example, rgb(255, 0, 0) is also red.

Rgba colours are similar to rgb colours, but they also include an alpha value, which represents transparency. For example, rgba(255, 0, 0, 0.5) is red with 50% transparency. Hsl colours are written as hsl followed by three values: hue, saturation and lightness. Hue ranges from 0 to 360, saturation ranges from 0 to 100%, and lightness ranges from 0 to 100%. For example, hsl(0, 100%, 50%) is also red.

Why HSL is Easier to Reason About

Hsl is often easier to reason about than rgb or hex because it separates the colour into its three distinct components. This makes it easier to create colour schemes and to adjust the colour without affecting its hue. For example, to create a darker version of a colour, you can simply decrease its lightness value.

A common mistake beginners make is using rgb or hex values without considering the colour's hue, saturation and lightness. This can lead to colour schemes that are inconsistent or difficult to read. To avoid this, try to use hsl values whenever possible, and use online colour pickers or tools to help you choose colours that work well together.

Typography

Font Properties

There are several font properties that can be adjusted in CSS, including font-size, font-weight, line-height and letter-spacing. Font-size determines the size of the text, and can be set using units such as pixels or ems. Font-weight determines the boldness of the text, and can be set using values such as normal, bold or 700.

Line-height determines the height of each line of text, and can be set using units such as pixels or a multiplier of the font-size. Letter-spacing determines the space between each letter, and can be set using units such as pixels. For example:

p {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

This code sets the font-size to 18px, the font-weight to bold, the line-height to 1.5 times the font-size, and the letter-spacing to 0.1em. A common mistake beginners make is setting the line-height too low, which can make the text difficult to read. To avoid this, try to set the line-height to at least 1.2 times the font-size.

The Box Model

Margin Collapse

The box model is the way that CSS lays out elements on a web page. One important aspect of the box model is margin collapse, which occurs when two elements have adjacent margins. In this case, the margins are combined into a single margin, which is the size of the largest margin.

For example, if two elements each have a margin of 20px, you might expect the total margin between them to be 40px. However, due to margin collapse, the total margin is actually 20px. This can be confusing, but it's an important aspect of the box model to understand.

A common mistake beginners make is not accounting for margin collapse when laying out elements. To avoid this, try to use the display: flex property to lay out elements, which can help to avoid margin collapse. For example:

div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

This code sets the display property to flex, the flex-direction to column, and the gap between elements to 20px. This can help to create a consistent layout that avoids margin collapse.

Spotting Margin Collapse

To spot margin collapse, look for elements that have adjacent margins. If the total margin between the elements is less than the sum of their individual margins, then margin collapse is occurring. To fix this, you can try using the display: flex property, or adding a border or padding to one of the elements to prevent the margins from collapsing.

Colour

Choosing Readable Colour Combinations

When choosing colours for your website, it's essential to select combinations that are readable and accessible. A common mistake beginners make is choosing colours that are too similar in hue and saturation, making the text difficult to read. For example, using a dark blue background with black text or a light yellow background with white text. To avoid this, you can use online tools such as color picker tools or contrast checkers to ensure your colour combinations have sufficient contrast.

A good rule of thumb is to aim for a contrast ratio of at least 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold). You can use tools like WebAIM's Color Contrast Checker to test your colour combinations.

Checking Contrast

Another important aspect of colour is checking the contrast between the background and text colours. A common mistake beginners make is not checking the contrast of their colour combinations, especially when using images or gradients as backgrounds. To check the contrast, you can use the Web Content Accessibility Guidelines (WCAG) contrast ratio formula or online tools like Snook's Color Contrast Checker.

For example, let's say you want to use a background colour of #f2f2f2 and text colour of #333333. You can use a contrast checker tool to determine the contrast ratio, which in this case is approximately 11:1, making it a readable combination.

Typography

Text-Align and Justified Text

When it comes to typography, the text-align property is used to align text horizontally. A common mistake beginners make is using justified text (text-align: justify) for body text, as it can hurt readability. Justified text can create uneven spacing between words, making it difficult to read, especially for large blocks of text.

Instead, it's recommended to use left-aligned text (text-align: left) for body text, as it creates a more natural reading flow. You can use justified text for headlines or titles, but make sure to test the readability first.

/* example of left-aligned text */
p {
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}

In this example, we're setting the text-align property to left for all paragraph elements (p), and also setting the font-size and line-height properties to create a readable typography.

Box Model

Box-Sizing: Content-Box vs Border-Box

The box model is a fundamental concept in CSS that defines the structure of an HTML element. A common mistake beginners make is not understanding the difference between content-box and border-box. The content-box model includes only the content area, while the border-box model includes the content area, padding, and border.

Professionals often set the box-sizing property to border-box globally, as it makes it easier to calculate the width and height of elements. This is because the border-box model includes the padding and border in the width and height calculations, making it more intuitive to work with.

/* set box-sizing to border-box globally */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

In this example, we're setting the box-sizing property to border-box for all elements using the universal selector (*). This ensures that all elements use the border-box model, making it easier to work with widths and heights.

A specific mistake beginners make is not taking into account the padding and border when calculating the width and height of an element. For example, if you set the width of an element to 100px and add 10px of padding on each side, the total width of the element will be 120px if you're using the content-box model. By using the border-box model, the width of the element will remain 100px, making it easier to manage layouts.

Colour, Typography and the Box Model: Colour is not covered in this lesson, we start with typography

Font Family and the Font Stack

When choosing a font for your website, you should always specify a font stack, which is a list of fonts that the browser will try to use, in order. The reason for this is that not all fonts are available on all devices. If the first font in the list is not available, the browser will try the next one, and so on.

A typical font stack might include a specific font that you want to use, followed by a more general font family, and finally a generic font family. For example: "Helvetica, Arial, sans-serif". This means that the browser will first try to use Helvetica, then Arial if Helvetica is not available, and finally any sans-serif font if neither of those are available.

Beginners often make the mistake of only specifying a single font, without a font stack. This can cause problems if the font is not available on the user's device. To spot this mistake, look for font-family properties that only specify a single font, without a list of fallbacks.

Typography: Font Family in CSS

Specifying Font Family in CSS

In CSS, you can specify the font family using the font-family property. This property takes a list of fonts, separated by commas, as its value. Here is an example of how to use it:

body {
  font-family: ";Helvetica", "Arial", sans-serif;
}

This code sets the font family for the entire body of the HTML document to "Helvetica", "Arial", and finally any sans-serif font. The browser will try to use "Helvetica" first, and if that is not available, it will try "Arial", and if that is not available, it will use any sans-serif font.

The Box Model

Introduction to the Box Model

The box model is a fundamental concept in CSS that describes the structure of an HTML element as a box. This box is made up of four layers: content, padding, border, and margin. Understanding the box model is crucial for building and styling web pages.

The content layer is the innermost layer, and it contains the actual content of the element, such as text or images. The padding layer surrounds the content layer, and it is used to add space between the content and the border. The border layer surrounds the padding layer, and it is used to draw a border around the element. The margin layer is the outermost layer, and it is used to add space between the element and other elements on the page.

Visualizing the Box Model

To visualize the box model, imagine a box with the following properties:

• Content: 100x100 pixels
• Padding: 20 pixels on all sides
• Border: 5 pixels solid black
• Margin: 30 pixels on all sides

The total width and height of the box would be the sum of the content width and height, plus twice the padding, plus twice the border width, plus twice the margin. In this case, the total width would be 100 + 2*20 + 2*5 + 2*30 = 100 + 40 + 10 + 60 = 210 pixels.

Here is an example of how to style an element using the box model:

div {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
  background-color: #f2f2f2;
}

This code sets the width and height of the content layer to 100x100 pixels, adds 20 pixels of padding, draws a 5-pixel solid black border, and adds 30 pixels of margin. The background color is set to a light gray color to make the box visible.

Beginners often make the mistake of not taking into account the padding and border when setting the width and height of an element. This can cause the element to be larger than expected, and can lead to layout problems. To spot this mistake, look for width and height properties that do not take into account the padding and border.

Do this now

Take your About Me page and add some visual styling. This exercise should take you around 30-40 minutes to complete, depending on how quickly you can decide on a colour palette and typography.

1. Choose a colour palette of three colours that you like and think are suitable for an About Me page. You can use online tools to help you choose colours that work well together.
2. Pick a readable type scale, which is a set of font sizes that work well together. A common type scale is to use a large font size for headings, a medium font size for paragraphs, and a small font size for captions.
3. Write the CSS to apply your chosen colours and type scale to your About Me page. Use the color property to set the text colour, the background-color property to set the background colour, and the font-size property to set the font size.
4. Add the line box-sizing: border-box; to the * { ... } block in your CSS file to set box-sizing globally. This will change how the browser calculates the size of elements.
5. Save your changes and refresh your About Me page in the browser to see how it looks.

Remember to check your work in different browsers and on different devices to make sure it looks as expected.

How to know you got it right

Here's a short checklist to verify that you've completed the exercise correctly:

• Your About Me page has a consistent colour scheme with three colours.
• Your headings, paragraphs, and captions have a clear type scale with distinct font sizes.
• Setting box-sizing: border-box; globally has changed the layout of your page, with elements now including their padding and border in their width and height.

Common mistakes

Beginners often make the following errors when working with Colour, Typography and the Box Model:

• Forgetting to specify the unit of measurement for sizes, e.g. writing width: 100 instead of width: 100px. This happens because beginners may not fully understand the importance of units in CSS. The fix is to always specify the unit, such as px, em, or %.
• Confusing the padding and margin properties, leading to unexpected spacing between elements. This occurs when beginners don't fully grasp the box model. The fix is to remember that padding is the space between the content and the border, while margin is the space between the border and other elements.
• Overriding default browser styles without understanding the implications, e.g. setting font-size: 12px without considering the user's default font size. This happens when beginners don't appreciate the importance of accessibility. The fix is to use relative units, such as em or rem, to respect the user's default font size.
• Not testing their design on multiple devices and screen sizes, resulting in a layout that breaks on smaller screens. This occurs when beginners don't prioritize responsiveness. The fix is to use the browser's dev tools to test the design on different screen sizes and devices, and to use media queries to adapt the layout accordingly.

Questions students ask

Here are some common questions students ask about Colour, Typography and the Box Model:

• What is the difference between rgb and hex colour codes?

  RGB and hex codes are two ways to represent colours in CSS. RGB uses red, green, and blue values, while hex codes use a hexadecimal string.

• How do I choose the right font for my website?

  Choose a font that is legible, consistent with your brand, and suitable for your content. Consider factors like font size, line height, and font family.

• What is the purpose of the box-sizing property?

  The box-sizing property defines how the browser calculates the size of an element, including its padding and border. Setting it to border-box can simplify layout calculations.

Next lesson: Positioning and Display.