Master foundational CSS techniques through our structured HTML and CSS tutorial, covering multiple topics including normalize.css, the CSS Box Model, creating fluid layouts, and working with high-resolution images.
This exercise is excerpted from Noble Desktop’s past front-end web development training materials and is compatible with updates through 2022. To learn current skills in web development, check out our coding bootcamps in NYC and live online.
Topics covered in this HTML & CSS tutorial:
Using normalize.css, Grouping CSS selectors using a comma separator, Fluid, hi-res images, Constraining the width of content, Visualizing the box model (margin, padding, and border) in Chrome’s DevTools, Fixing spacing issues around images, CSS shorthand for the background property
Exercise Preview
Exercise Overview
This is the first in a series of exercises in which you’ll style a page using foundational CSS techniques. In this exercise you’ll learn about normalize.css, the CSS Box Model (width, height, padding, margin, and borders), creating a fluid layout that works well across different screen sizes, and more.
Getting Started
- Launch your code editor (Visual Studio Code, Sublime Text, etc.). If you are in a Noble Desktop class, launch Visual Studio Code.
- We’ll be working with the Tahoe Starter folder located in Desktop > Class Files > Advanced HTML CSS Class > Tahoe Starter. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
- Open index.html from the Tahoe Starter folder.
- Preview index.html in Chrome. (We’re using Chrome because we’ll be using its DevTools later.)
-
Notice the following:
- There’s no styling yet, so it looks pretty rough.
- You may have a horizontal scrollbar at the bottom of the page. When the window is smaller than the images, they do not scale down to fit in the confines of the browser window. We’ll need to fix that.
Leave index.html open in the browser as you work, so you can reload the page to see the code changes you’ll make.
Using Normalize.css
We typically have CSS that we add to every site. We may want to zero out margins on the body tag or fix differences across browsers. Many coders have developed reset style sheets to deal with this. Some can be aggressive and override browser defaults, such as removing bolds from headings and bullets from bulleted lists.
Instead of a reset CSS, we prefer to use normalize.css because it’s less aggressive and doesn’t try to override browser defaults. The developer says it “makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.” We’ve provided a copy in the class files, but you can learn more or download it from necolas.github.io/normalize.css
- Switch back to your code editor.
- Open normalize.css from the css folder (in the Tahoe Starter folder).
-
The comments throughout the code explain why each rule is there. Look over some of the rules, such as:
- html rule: The text-size-adjust prevents mobile browsers from enlarging text. The line-height ensures consistency across browsers. You may notice the line-height does not specify a unit (such as px). You’ll learn about unitless line-height in the next exercise.
- body rule: Removes the page’s margins.
While most of the rules standardize defaults across browsers without deviating from them too much, removing the body margins is opinionated. We typically want to do it, but technically that isn’t keeping browser defaults (which have a default margin). It is one of the few places where it oversteps the normalize concept and acts more like a reset CSS.
- Let’s link our page to normalize.css. Switch back to index.html in your code editor.
-
Link to normalize.css as shown in bold below. TIP: If your code editor has Emmet installed (like Visual Studio Code does), you should be able to type link and hit Tab to get the base link tag and you’ll just have to fill in the href.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tahoe Adventure Club</title> <link rel="stylesheet" href="css/normalize.css"> </head> - Save index.html.
-
Switch back to Chrome and reload index.html. You won’t see much change, except the images and text now touch the edge of the browser window because the body’s margins have been removed.
While there currently aren’t many visible changes for this page, normalize contains many best practices and fixes so it’s good to use.
-
Return to index.html in your code editor.
In the css folder, we’ve created an empty CSS file called main.css to which we’ll add all of our custom CSS. Let’s link our page to that as well. It’s important that this link comes after normalize.css so our CSS can override normalize, if necessary.
-
In index.html, add the following bold code:
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>NOTE: When linking to multiple style sheets, the order is crucial. Browsers read from top to bottom, so the later styles can override rules in the style sheet(s) above. If two CSS rules have the same specificity, such as a class vs. a class, or an ID vs. an ID, the latter rule will win over the first. We always put normalize.css first so we can override it in main.css.
Save the file.
Fluid, Hi-Res Images
Why are the images so huge? We’re using hi-res images suitable for display on hi-res screens, which have a higher pixel density (smaller, more tightly packed pixels) than low-res screens. Hi-res screens are called HiDPI (high dots per inch) or Retina (as Apple calls them) and typically have twice the number of pixels occupying the same amount of space on the screen. This technology was first uses on mobile phones and tablets, but are becoming more common on laptops and desktops.
Low-res images look a bit pixelated or blurry on hi-res screens. To make a hi-res image, the pixel width of the image file should be twice the width we code in HTML or CSS. Hi-res (2x) images occupy the same space as low-res (1x) images, so 2x images pack more pixels into the same space. More (smaller) pixels in a given space = hi-res!
- Open the empty main.css file from the css folder.
-
To get rid of the horizontal scrollbar, we need to scale the images down to fit inside their parent container. In main.css, add the following rule for all images:
img { max-width: 100%; }This max-width prevents the image from extending beyond the bounds of its parent element, ensures that the image does not scale larger than its native size, yet allows it to scale down to fit smaller screens.
- Save main.css.
-
Switch back to Chrome and:
- Reload index.html.
- Resize the browser smaller to see that the images shrink to fit inside the window.
- Resize the browser wider to see the long lines of text are hard to read.
Styling the Sections (Borders, Margins, & Padding)
index.html contains 3 primary elements: header, main, and footer. The main element contains 3 section elements. Here’s a visualization of the structure:
We want the header and 3 sections to all look the same (border, spacing, etc.) so let’s create a style to target both types of elements.
- Return to main.css in your code editor.
-
Below the img rule, add the following new rule to target the header and all section elements:
header, section { border: 4px solid #2fb3fe; margin: 30px; }NOTE: Commas in CSS selectors are used to separate different elements that will all get the same styling. They do not increase the specificity of the selector, so we have two tag rules (they’re just combined into a single rule to avoid redundancy).
- Save main.css.
-
Switch back to Chrome, and reload index.html.
You should now see four areas outlined in blue with space between them.
- Return to main.css in your code editor.
-
Let’s give the page a dark gray background color so the sections stand out more. Above the img rule, add the following new rule:
body { background: #555; }NOTE: Instead of background-color, we used the shorthand version background.
-
Let’s give each section a white background so they stand out on the dark background. Add the code shown below in bold:
header, section { border: 4px solid #2fb3fe; margin: 30px; background: #fff; } -
Save main.css, switch back to Chrome, and reload index.html.
The page should now be dark gray with 4 white areas that have blue borders. We don’t like how the content within each of the bordered areas touches the blue border, so let’s add padding (space inside the border) in addition to our existing margins (space outside the border).
- Return to main.css in your code editor.
-
Add padding as shown below in bold:
header, section { border: 4px solid #2fb3fe; margin: 30px; background: #fff; padding: 20px; } -
Save main.css, switch back to Chrome, and reload index.html.
That looks a bit better, but when the page is too wide the text is hard to read. Let’s limit how wide it can get on large screens (but keep the width flexible to work on smaller screens).
Constraining the Width of Content
By default, block-level elements (such as header and section) have a width that’s 100% of their parent element. This is why the text fills the available space. Let’s set a fixed-pixel max-width as an upper limit on how much the text content can stretch.
- Return to main.css in your code editor.
-
To ensure the content never stretches past a width of 800 pixels. Add the max-width shown below in bold:
header, section {Code Omitted To Save Space
padding: 20px; max-width: 800px; } - Save main.css, switch back to Chrome, and reload index.html.
Resize the browser window in and out to see that the layout expands until it reaches the max-width but doesn’t budge after it reaches 800 pixels.
Centering the Content & Page Margins
The content would look nicer centered on the page. To center block elements (such as header and section) we use auto margins. Margin is space outside an element,. We don’t know how much space needs to be to the left or right, but the browser can auto matically figure that out for us. The browser takes whatever available extra space there is in the parent container, divides it in two, and applies it equally on the left and right side of the element.
- Switch back to main.css.
-
In the header, section rule we want to keep the top and bottom margin that we already have, but we want to set left and right margins to auto. Do that by adding auto as shown below in bold:
header, section { border: 4px solid #2fb3fe; margin: 30px auto;NOTE: When margin (or padding) has a single value, it’s used for all sides (top, right, bottom, and left). When there are two values (as we did above), the first value is for both top and bottom, and the second value is for right and left.
-
Save main.css, switch back to Chrome, and reload index.html. Notice the following:
- Make sure the browser window is wide enough so you can see the column of content is now centered.
- The spacing is fine when the browser is wide, but if you make the browser narrow, you see that the borders bump right up against the left and right of the body. Let’s give it some breathing room.
- Return to main.css in your code editor.
-
To add space around the page, on the body rule add margin as shown below in bold:
body { background: #555; margin: 30px; } Save main.css, switch back to Chrome, and reload index.html. Now there’s some gray space around the content when the window is smaller.
Visualizing the Box Model in Chrome’s DevTools
- Let’s make the h2s look like they’re attached to the images above them. Switch back to main.css in your code editor.
-
After the rule for img, add the following rule:
h2 { background: #2fb3fe; color: #fff; } - Save main.css.
- Switch back to Chrome and reload index.html. The blue background color shows that headings stretch to fill the entire available width because they are block-level elements.
- The text inside these headings is way too cramped. Switch back to main.css.
-
Add padding on all four sides of the h2s, by adding the following code shown in bold:
h2 { background: #2fb3fe; color: #fff; padding: 15px; } -
Save main.css and reload index.html in Chrome.
The spacing inside the blue heading backgrounds (padding) looks a lot better, but we have a lot of space above them. The heading is not flush with the image, as we want. This is most likely caused by margin.
Let’s use developer tools to see what’s causing the issue. All major browsers have these tools, but our instructions are written for Chrome’s DevTools.
- Ctrl–click (Mac) or Right–click (Windows) on the Take a Hike h2 and choose Inspect.
-
We want the DevTools docked to the bottom. If the DevTools are docked to the right side of the browser window, at the top right of the DevTools panel click the
button and choose Dock to bottom as shown below:
On the right side of the DevTools, choose the Computed tab to see the box model.
-
As shown below, hover over margin. Then in the page notice the margin above and below the h2 in the page will appear as orange.
NOTE: The 19.920 pixels of margin is a default amount applied by the browser (which is proportionate to the font size).
- Let’s remove the default margin on the top. Switch back to main.css.
-
Zero out the margin-top by adding the following code shown below in bold:
h2 { background: #2fb3fe; color: #fff; padding: 15px; margin-top: 0; } - Save main.css, switch back to Chrome, and reload index.html. There’s still a gap, even though the heading has no top margin. Perhaps the image has some margin?
Ctrl–click (Mac) or Right–click (Windows) on the image, choose Inspect, and look in the Computed tab to see that the image has no margin. What is causing the space below the image?
Fixing Spacing Issues Around Images
Images are rendered on a line of text as though they’re part of a paragraph, even though they’re not in a paragraph tag. By default, text (and images) are vertically aligned to the text baseline (where the bottom of each letter is positioned as you would when writing on lined paper).
Baseline makes sense for text, including lowercase characters like j and g. However, for images, which don’t have descenders, the default vertical-align: baseline creates extra, unfilled space below them. A simple fix is to vertically align images to the bottom, rather than the baseline. The following diagram illustrates this:
- Switch back to main.css in your code editor.
-
In the img rule, add the following bold code:
img { max-width: 100%; vertical-align: bottom; } - Save main.css.
- Switch back to Chrome and reload index.html to see that the extra space below the image is now gone, making the image and the h2 look attached.
Keep the page open, but close Chrome’s DevTools.
Paragraph Spacing
Let’s align the paragraphs with the h2 text. We inset the headings with 15 pixels of padding, so we’ll need the same amount on the paragraphs in each section.
- Switch back to main.css in your code editor.
-
Below the h2 rule, add the following new rule:
section p { margin: 15px; }NOTE: We’re not using padding because paragraphs have default margins (but no default padding), and we want to override the default margins.
Save main.css and reload index.html in Chrome. The heading and paragraph text should now align.
Adding a Background Image to the Header
- Switch back to main.css in your code editor.
-
The white header is boring, so we’ll add a dark background image and make the text white. Below all the other rules, add the following new rule:
header { background-image: url(../img/masthead-darkened.jpg); background-position: center; color: #fff; text-align: center; }NOTE: background-position accepts one or two values. If you only specify one value, the other will automatically be center. So our value is interpreted as center center, which horizontally and vertically centers the photo.
-
Save main.css and reload index.html in Chrome. The image is larger than the header, so you only see some of the center part of the photo. Here’s what the entire photo looks like (the photo below wasn’t darkened, so it’s easier for you to see):
- Switch back to main.css in your code editor.
- The page width is limited to 800px. We made the photo 1600px wide, so it can end up being displayed as a hi-res image. Let’s scale it down to fit the container. Switch back to main.css in your code editor.
-
Add the following bold code for background-size:
header { background-image: url(../img/masthead-darkened.jpg); background-position: center; background-size: cover; color: #fff; Save main.css and reload index.html in Chrome. The background image should now be scaled down to show you as much as possible in the given space.
Using Shorthand for the Background Property
All the different property declarations for background-image (size, position, etc.) can be combined into a single line of code using shorthand.
- Switch back to main.css in your code editor.
- In the header rule, delete the background-position and background-size declarations and any remaining whitespace.
-
We will add those values back in a moment, but to use the shorthand syntax you must first change background-image to background:
header { background: url(../img/masthead-darkened.jpg); -
At the end of the background value, add the position and size back in by adding the code shown below in bold:
header { background: url(../img/masthead-darkened.jpg) center / cover;NOTE: The order of values within the background property do not matter, except when using background-position and background-size together. For more info on this shorthand syntax visit sixrevisions.com/css/background-css-shorthand
Save main.css and reload index.html in Chrome. The header background photo should look the same, but with less code!
Optional Bonus: Styling the Footer
- Scroll to the bottom of the page and notice that the single line of copyright text in the footer is too dark to read and should be centered below the other sections.
- Switch back to main.css in your code editor.
-
Below the other rules, add the following new rule:
footer { color: #ccc; text-align: center; } Save main.css and reload index.html in Chrome. It’s looking better, but the typography could use improvement, which you’ll do in the next exercise.
