CSS recap & Box model 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
%,emandremto 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
As usual, let’s start with a recorded session presented by Halim Boussada
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.
(Image by Margarita Roi on Medium)
- 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.
- Use the amazing CSS Selectors Explained tool to dissect and understand any kind of CSS selector!
(If you like the tool, don’t forget to star its GitHub repo)
Introduction to the Box Model
In order to do CSS correctly we need to have a model in our head of how the elements on the page fit together. The Box Model is that model. In other words, the box model defines how every element on the page gets placed and how they relate to each other.
Since this is one of the most important concepts in CSS, you can’t be shaky on how it works if you want to be efficient with your work flow. So take the time to really nail down your mental model for how elements interact with each other on the page.
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-blockandinlineelements. - 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
- 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
- Continue by watching this extended tutorial on the Box Model by Colt Steele:
Duration: 42 minutes
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.
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, andmargindetermine 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
CNN
The White House
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.
CSS Box Model from Shaye Howe (gets into floats and positioning a bit too)
Watch this next live session recorded on 14.01.2021 at SHA, that walks you through the basics of block and inline elements, the Box Model and its 4 layers (content/padding/border/margin) as well as the hybrid inline-block elements and its special properties.