This blog post is the sequel to Part 1.
In this chapter we are going to dive into CSS so we can learn the principles of how to layout things on a web page and understand how to build layouts!
Starter Code
It's going to be much easier for most of us to learn about the box model if we can visualize things as we go. To do that, we're going to need some HTML and CSS. Open up your text editor and make two files index.html and style.css. Here are contents for both which you can copy and paste:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1 class="greeting">hello world</h1> </div> </body> </html>
style.css
#container { background-color: peachpuff; } .greeting { color: firebrick; }
It should look like this if you've done that correctly:
Good old CSS colors… peachpuff background with a firebrick flare. What's your favorite named CSS color?
Classes and IDs
In the above example, we are making use of classes and IDs. You can see the div element has an ID of container. In the corresponding CSS, we reference it with a hashtag, i.e. #container. Likewise, for the h1 element, we have given it a class of greeting; this is reference with a dot in the CSS, i.e. .greeting.
IDs and classes are designated in the HTML and always referenced in the CSS by a hashtag # for IDs and a dot . for classes. The purpose of both classes and IDs is to allow us to reference the same types of elements in CSS but style them differently. For instance, we can add more h1s to our document that do not have the greeting class, and the styles will be different (try it out):
<body> <div id="container"> <h1 class="greeting">hello world</h1> <h1>hello, otherworld</h1> </div> </body>
Pretty intuitive once you get used to it! But what's the difference between a class and an ID? (That might be an entry-level interview question actually!). Well, an ID is designed to be unique in a webpage, i.e. it should reference a single HTML element only. Classes, however, can be applied to many HTML elements.
The Box Model
Now that we're clearer on classes and IDs, and we have some boilerplate code, we can start diving deeper into CSS. The box model is the backbone for CSS on most websites, and it is essential to understand before moving on to more advanced CSS topics you may have heard of like flexbox and grid.
Image Source: Mozilla Developer Network
Box Model Description
Every HTML element that is rendered on a webpage lives inside a retangular box. The content box, which has height and width properties, is where the actual stuff appears. The rest of the box model consists of layers surrounding the content box, which are, in order from inside out:
- Padding – the space surrounding the content before the border.
- Border – an edge around the content, like a picture frame. Set to 0 by default, so you have to add a border-width to make it visible.
- Margin – the area surrounding the border. Very similar to padding, but on the other side of the border. Also, margin will push up against other boxes and move them away.
Let's apply all of these to our CSS.
style.css
#container { background-color: peachpuff; padding: 10px; margin: 20px 50px; border: 5px solid mediumvioletred; }
It should now look like this:
A couple of things to note about the CSS above:
- The
paddinguses shorthand. It applies 10 pixels to top, bottom, left, and right. You can separate these out (padding-top,padding-left,padding-right,padding-bottom) if you need to get more specific. More Info. - The
marginalso uses shorthand. Here it is 20 pixels for the top/bottom, and 50 pixels for the left/right. Like padding, there aremargin-top,margin-right,margin-left, andmargin-bottomproperties. More info. - The
borderis also shorthand: 5 pixels wide, solid border (as opposed todashedordotted), and the color ismediumvioletredobviously. These can all be separated out into their own properties. More info.
Chrome DevTools – A Web Dev's Best Friend
A tool that is going to be indispensible for web development is going to be the Google Chrome DevTools HTML/CSS inspector. On our page, if you right-click and select "inspect element" (shortcut, command + shift + i on Mac), you will get information about the HTML and styles, including a nice visualization of the actual box model in the bottom right! Best of all, things here are dynamic – try changing some of the CSS and watch it update on the page automatically.
Check out Google Chrome's DevTools CSS tutorial here for more info.
Box Model Practice Example
As always, the true path to becoming a great developer is by getting your hands dirty and practicing yourself. Here is some starter code (in a CodePen) with a picture of a kitten. We totes want to frame this, so use your CSS box model knowledge to make it look like the picture! Note that this picture is horizontally-centered, because why wouldn't you want this in the middle of your wall?
Starter Code: https://codepen.io/hueter/pen/MVLpaP
Block Elements
The last topic for today is to understand what we mean by block-level and inline elements. Basically, many common HTML elements, by default, start on their own line and take up the entire width of the parent element
Consider the following code, for example:
<div id="container"> <h1 style="background-color: chartreuse">one</h1> <h1 style="background-color: coral">per</h1> <h1 style="background-color: peru">line</h1> </div>
Warning: the above code contains styling in the HTML known as inline styling, and you shouldn't do this most of the time. More on this later!
Each header element gets its own line, and if you change the background color for each, you can see they stretch to fill the entire width by default:
We have already observed that div and h1 (or any header) tags are block-level elements by default;. Other common block elements are p (paragraph), ol and ul (ordered and unordered lists), and li for list items.
Inline Elements
Other elements are considered inline, which means by default they will place the content box on the same line adjacent to the previous element. The most common inline-block tags are a (anchor tags for links), img, button, and span.
You can see what happens if we rewrite the previous example, but use span instead of h1 tags:
<div id="container"> <span style="background-color: chartreuse">one</h1> <span style="background-color: coral">per</h1> <span style="background-color: peru">line</h1> </div>
Lastly, as a handy CSS trick, you can override the default behavior of block or inline elements by setting the display property to block or inline, if you want to set it explicity. Click here for more info.
Summary
That's it for this time, hopefully you're beginning to feel more comfortable with CSS and you can start inspecting elements to see the box model in practice!
Here are some self-review questions you can answer to see if you've learned something from this article (fingers crossed):
- What is the box model?
- What is the difference between a class and an ID?
- What are the Chrome DevTools good for?
- What's the difference between a block and an inline element?
- What is your favorite named CSS color?
To continue learning how to code, our free curriculum goes into more examples here.
Stay tuned for the next edition of this blog post which will cover the basics of JavaScript so we can get started with web scripting!
Final Exercise
For some more practice, let's make a cheesy motivational poster in pure HTML and CSS!
Starter Code: https://codepen.io/hueter/pen/YagzEM
