WDD 130: Web Fundamentals

CSS: Box Model

Overview

The CSS Box Model is a box that wraps around every element. From the inside out, the model defines how the content, padding, border, and margin are rendered.

"When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes." - MDN

Prepare

The CSS Box Model

The box model can be applied to HTML elements that are block-level, table, or inline-block.

CSS Box Model Diagram

CSS Shorthand Notation

CSS shorthand notation is generally considered best practice for conciseness, readability, and performance. However, longhand notation has its uses and can be more appropriate in certain situations where specificity is needed.

Summary: CSS Shorthand Declarations using the margin property
Longhand Shorthand 
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
 
margin: 10px 20px 30px 40px;
 
margin-top: 10px;
margin-right: 20px;
margin-bottom 30px;
margin-left: 20px;
 
margin: 10px 20px 30px;
The right and left margins are the same at 20 pixels. 
margin-top: 10px;
  margin-right: 20px;
  margin-bottom 10px;
  margin-left: 20px;
 
margin: 10px 20px;
The top and bottom are the same (10 pixels) and right and left margins are the same (20 pixels). 
margin-top: 10px;
  margin-right: 10px;
  margin-bottom 10px;
  margin-left: 10px;
 
margin: 10px;
All sides of the margin are the same 10 pixels.
Common Border Shorthand 
border: 1px solid rgb(0 0 0 / .1);

This applies a 1 pixel border around the element with a solid line and a color that match the background of the containing/parent element. The color is set to 10% opacity.

Activity Instructions

File Setup

  1. In the week02 folder, create a file named "box-model.html".
  2. Add a folder named styles and put a CSS file named "box-model.css" in that folder.

    At this point in the course, setting up the folders and files to complete activities and assignments should be a common task where you need little direction.

HTML

  1. Link to the CSS in your HTML document using the <link> tag.
    Make sure this link element is located within the <head> section.
    Check Your Understanding 
    <link rel="stylesheet" href="styles/box-model.css">
  2. Copy the HTML from the HTML section of the following CodePen into your box-model.html file.
    You will have to add the minimum HTML outer structure to make this work. CodePen - Box Model Start

CSS

  1. Now copy the CSS selectors from the CSS section of the given CodePen into box-model.css file.
  2. Use the CSS selectors to style the HTML elements to match the image below using box model concepts for the .callout class, img, blockquote, and cite elements. The following summary of declarations is your guide:
    Element Required CSS Declarations
    callout class maximum width, margin, border, padding, background color, and text color
    image position (float), margin, border, padding, background color, width, height
    blockquote margin
    cite display, top border, top padding, text alignment, size of font
    Screenshot of example solution for box model activity.
    Screenshot of Example Solution
Check Your Understanding

CodePen - Box Model Activity - Example Solution

Did you notice the semantic HTML used to encase the actual scripture and scripture reference?
<blockquote> was used versus a <div> or <p> and the reference was encased with a <cite> element. There is nothing special about these elements except their semantic names and maybe, default styling by the browser. Otherwise they behave and look like any other element.

Do not worry if you did not use these in your design. Refactoring work as you discover new elements and methods is part of the overall development process.

Optional Solution Discussion

Testing

  1. Test your page in your local browser using Live Server.
  2. You can commit and sync up your work to your wdd130 GitHub Pages enabled repository so that others may review your work, especially if you have questions. Post your link on Microsoft Teams.

Optional Resources