Monday-Tuesday: CSS recap, Box model & Positioning Copy

Introduction

Once more the material that will be covered in this topic should be a review from what we have covered in the ‘HTML & CSS basics’ lesson.

So take a closer look on the “Learning Objectives” section below and check whether you understand completely the material listed. In case you struggle with this material then you could probably benefit from the review of the basic stuff.

Learning Objectives

  • Selectors
  • How specific we should be when targeting elements using selectors
  • The difference between using %, em and rem to specify sizes
  • How to select an element inside another element
  • How to shorten up a long batch of CSS that’s doing the same thing to many different elements by putting them all in one line
  • How to target the immediate child of an element
  • How to target a class inside a class
  • How to target a class inside an ID
  • The three ways to include CSS in our project
  • How to import an external stylesheet
  • What the browser’s default stylesheet is
  • What “CSS Reset” file is and why it is helpful.
  • Which stylesheet has preference if you import multiple ones and there are overlapping styles
  • The order of priority of selectors

Study

  1. As usual, let’s start with a recorded session presented by Halim Boussada
  2. Read Shay Howe on the Basics of HTML/CSS.
  3. Read CSS Tricks on Attribute Selectors.
  4. Study and bookmark the CSS selectors cheatsheet & details page as it is one of the most comprehensive CSS selector references out there. You will be coming back to this page again and again to refresh your memory but also to find the appropriate selectors for various cases.

Why do we need CSS Resets? To avoid visual discrepancies between different browsers like the ones below.

Why to use CSS Resets

(Image by Margarita Roi on Medium)

  1. Read the A tale of CSS Resets and Everything You Need to Know About Them post by Margarita Roi to learm more about CSS Resets and why we use them.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

(If you like the tool, don’t forget to star its GitHub repo)


Introduction to the Box Model

Good CSS requires a model in mind of how the elements on the page fit together. This is the box model. In other words, the box model defines how elements are laid out on the page and how they relate to each other.

This is one of the most important concepts in CSS, so if you want your workflow to be efficient, you should understand how it works. Take the time to clarify your mental model of how the elements on your page will interact.

Watch this 2 minute introduction to the Box Model by the nice folks at Webflow:

Learning Objectives

  • The difference between margin and padding
  • How borders affect the size of the box
  • How to use margins to center an element horizontally on the page
  • What it means that “margins are collapsed”
  • The difference between block, inline-block and inline elements.
  • When we are required to specify the width of an element vs letting the browser figure it out for us.
  • How box shadows affect element box sizing
  • How to check an element’s box model in our developer tools (it’s a helpful graphic)

Study

  1. Start by watching this short but very informative and concise video on the CSS Box Model, then move on to reading the next material that goes into more detail. Try to pause the video or reading and practice the concepts presented in your code editor.

Duration: 8 minutes

  1. Continue by watching this extended tutorial on the Box Model by Colt Steele:

Duration: 42 minutes

  1. Read The CSS Box Model from CSS-Tricks
  2. Take a short break, grab a cup of coffee and study the How whitespace is handled by HTML, CSS, and in the DOM post by MDN which describes in detail how whitespace is handled by the browser. The concepts mentioned in this post are some of outmost importance so pay close attention to them and make sure you keep notes and test them on your code.
  3. Read this article about Understanding the CSS box model for inline elements and make sure to use the Developer Tools to inspect your own inline elements and understand their properties and behavior on the page.

Here’s a nice and short description to keep in mind about how HTML elements are displayed on a web page:

In a web page, every element is rendered as a rectangular box. The box model describes how the element’s content, padding, border, and margin determine the space occupied by the element and its relation to other elements in the page. Depending on the element’s display property, its box may be one of two types: a block box or an inline box. By Patrick Brosset

Coding Interview

Here’s a question that might be asked during an interview for a Frontend job:

What is the difference between an element with a display value of inline vs inline-block?

Can you answer this question? If you don’t feel confident enough about your answer, then dive into this article and make sure that you create experiment with these two display property values to get a good understanding of their differences.

Real Life Examples

Here are some real-life examples of websites that use the auto value of the margin-left and margin-right CSS properties on block elements to center their main content.

Al Jazeera

Description

Description

CNN

Description

Description

The White House

Description

Description

Student Submitted Examples

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.


Introduction to Positioning

One major issue that you might have already encountered is how to position exactly an element on the page. The solution to this issue used to lie in using floats and/or position attributes in combination with margins. You might still see this in use and sometimes it is useful.

For this reason we will start learning about float based layouts. You will need to learn what’s happening on the web page when we float elements and when we use different positioning types. It is really important to pay attention which element is the parent element of the element you are trying to position.

Learning Objectives

  • What the DOM is
  • How elements get placed in the DOM by default
  • How to override element positioning using the position attribute.
  • When we are able to use the top left right and bottom attributes
  • The difference between float and position
  • Which element acts as the parent for a floated element
  • The difference between floating right and floating left
  • What happens if we have a bunch of elements floated next to each other and we make the browser narrower.
  • The practical difference between relative and absolute positioning
  • Which element acts as the parent for an absolutely or relatively positioned element
  • How to set up a grid of 20×20 boxes on the page using floats and using lists
  • What negative margins are useful for

Study

1.1 Watch the next short video to get a first look at how ‘float’ works in CSS, and make sure to practice using the code below (uncomment each line to see the effect shown in the video)

A visual demonstration of how CSS float and clear actually works. If you’ve ever been confused about the float and clear property to arrange block elements – this is the video for you.

Duration: 3 minutes

Here’s the code that reflects the structure presented in the video. Play around with the lines with the float and clear commands.

<head>
  <style>
    #red {
      width: 100px;
      height: 100px;
      background-color: red;
      /* float: left; */
    }
    #green {
      width: 100px;
      height: 100px;
      background-color: green;
      /* float: left; */
    } 
    #blue {
      width: 100px;
      height: 100px;
      background-color: blue;
      /* float: left; */
      /* clear: left; */
    }
    #yellow {
      width: 100px;
      height: 100px;
      background-color: yellow;
      /* float: left; */
      /* clear: left; */
    }
  </style>
</head>

<body>
  <div id="red"></div>
  <div id="green"></div>
  <div id="blue"></div>
  <div id="yellow"></div>
</body>

1.2 Read CSS Floats 101 from A List Apart

  1. Read CSS Positioning 101 from A List Apart

  2. Play around with the Positioning Tutorial / Widget from BarelyFitz Designs to see the differences between different positioning schemes.

  3. Carefully go through the following articles on Centering Elements in HTML, and learn some of the fundamental CSS concepts and properties along with mastering the art of centering elements. It might not sound much, but you will be challenged to do this under various conditions as a Frontend developer.

4.1 Centering in CSS: A Complete Guide

4.2 Centering Things by W3C

4.3 How to Center Both Vertically and Horizontally

Real-world examples

  • FreshDesk Cookie Box (position: fixed, stays on bottom while scrolling the page)

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Leave a Reply