CSS I: Structure, Box Model, and Positioning

Overview & Docs

The front-end of the web is based on three major technologies:

  • HTML aka “STRUCTURE”: HyperText Markup Language (HTML) defines the structure and semantics of web pages on the web.
  • CSS aka “PRESENTATION”: Cascading Style Sheets (CSS) sets the look and style of a web page. CSS provides style to the structure provided by HTML.
  • JavaScript aka “BEHAVIOR”: JavaScript allows us to define interaction in our pages. What happens when a user clicks on a certain area? The front-end of the web is based on three major technologies:

This lesson is all about the presentation layer, CSS. We’ll take this opportunity to accomplish the following:

  • Learn the basics of CSS, and experiment with some of the major properties for both aesthetic and layout
  • Build a small static site and style our markup using a separate style sheet of basic CSS

But first, the road to enlightenment: CSS Zen Garden


  • CSS Cascading Style Sheets
  • CSS property The name of a display property of an HTML element (e.g., color, border)
  • HTML element A building block that makes up the structure of a web page
  • tag Usually used interchangeably with ‘HTML element’
  • id / class Ways to identify HTML elements

What is CSS?

It’s a “style sheet language” that lets you style the HTML elements on your page. CSS works with HTML, but isn’t HTML. CSS controls the positioning, sizing, colors, and specific fonts on your page. There is a class and id attribute available to use on every html element. In addition to the plain old element names themselves, these attributes allow you to create “targets” for both your css and javascript. They are hooks so that you can manipulate the look and behavior of your HTML elements.

Anatomy of a Basic CSS Rule

CSS Rule

  • Can target via element name
  • Can target via class name
  • Can target via id name
  • Can target via a combination of above

See the Pen CSS Rules by Turing School of Software and Design (@turing) on CodePen.

Your turn

With your partner, answer the questions below:

  • Can you add two classes to an element?
  • Which class takes precedent?
  • Can you add both an id and a class to an element?
  • which takes precedent?

Dev Tools and CSS

Developer Tools, or Dev Tools, are available to use in every browser. They help us debug, experiment, and test assumptions in our HTML, CSS, and Javascript quickly and at low-risk in the browser. They’re your friend when it comes to understanding how CSS works (or untangling why it isn’t working) – get in the habit of using them early and often!

Editing CSS

To the right of the HTML pane, there’s a small sidebar that gives us styling information for the currently selected element. Similar to the HTML pane, we can add or remove styles and adjust CSS property values from this pane. You can click on any style property associated with the selected element and change its value. You can also use the blue checkbox to toggle the style on or off.

Editing CSS

Your Dev Tools Challenge

Directly from the css pane, we can edit the css and see the changes reflected immediately.

Let’s work with the following edits on girldevelopit.com:

  • Change the background color of the header to chartreuse
  • Change the headline text color to magenta.
  • Change the “flourish” logo in the headline to have a height of 20px
  • Hide the element that contains the map using css

All the Elements are Boxes

Each element is a rectangular box. CSS leverages “the box model” to control layout and design. An HTML element is comprised of its content and the margins, borders, padding surrounding it. Boxes are “stacked” in the order they appear in your HTML. You can stack them horizontally, vertically, and in the z-plane.

Box Model

The Docs

CSS Practice Time!

Let’s setup a small static page to experiment with our HTML and CSS.

First, let’s flex those command-line muscles you’ve been building:

  • Create a directory called static-site-playground
  • Create a file index.html with the html provided below
  • Create a file main.css
  • Link the index and main files you just made
  • Test things are working as expected by adding in the following HTML:
<!doctype html>
    <title>CSS Playground</title>
    <article class="article-1">article 1</article>
    <article class="article-2">article 2</article>

Next, we’ll use this HTML to do some experimenting with Box Model behavior.

Let’s draw some boxes and play with some basic CSS properties

Use .article-1 and .article-2 as the selectors you’re targeting in your main.css file.

Try adding some properties that impact the Box Model and some properties that impact the aesthetics of your page:

  • Box Model things: width, height, border, padding, margin
  • Aesthetic things: color, font, background

What do you notice when you add or adjust the Box Model properties? What happens to the size of the element?

Box-Sizing and the CSS Box Model

In HTML, you can visualize each element as its own rectangular box. There are a number of CSS properties that can affect the final width and height of each of these boxes. The CSS Box Model describes how the final height and width of an element is determined.

We have an article element that we gave a width of 400 and a height of 200. However, we’ve also applied several additional properties that are affecting its size and positioning. The padding and border properties are both adding 20px to the element’s height and width. Now the actual visible dimensions of our element are 480x280. The Dev Tools panel provides a handy graphic of how our article is being rendered.

This is the default behavior for the rendering of block elements in CSS and is due to the box sizing property having a default value of content-box. The box-sizing property allows us to override this behavior and alter how the dimensions of an element are calculated:

*:before {
  box-sizing: border-box;

Setting the box-sizing property to border-box will alter the model so that the width and height properties include the content, padding and border. If we were to set box-sizing: border-box on our previous example, our element would be rendered at exactly the 400x200 dimensions we specified. Its padding and border properties would be included within those dimensions, making our content area slightly smaller.

CSS Practice Time, the remix!

Revisit the static page you just made and add the CSS rule shown above that applies the box-sizing property to your CSS. How does it change what’s rendered in the browser? How is the size of the elements impacted?

Document Flow is Important

The document flow is the model by which elements are rendered by default in the CSS specifications. In this model, elements are rendered according to their default display rule. In other words, block-level elements are displayed on a new line and inline elements on the same line. Everything is stacked in an ordered way from top to bottom. The document flow can be modified by CSS through its positioning properties.

  • CSS divides HTML elements into two types: inline and block
  • After block elements, browsers render a new line
  • Inline elements: img, a, br, em, strong
  • Block elements: p, h1, ul, li, almost everything else

Display Property

  • The display property allows us to manipulate the layout of elements on a page without taking them out of the normal page flow.
  • The default value for all elements is inline. Most “User Agent stylesheets” (the default styles the browser applies to all sites) reset many elements to “block”.
  • Inline: <span>, <em> Text wraps around me! I accept margin and padding, and push things horizontally, not vertically. I am ignore height and width instructions.
  • Inline-Block: An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a width and height which will be respected. They also apply 2px of margin that does not register in dev tools.
  • Block: A number of elements are set to block by UA stylesheets, usually container elements. <div>, <ul>, <section>, and a bunch more. Also, text blocks like: <p>, <h1>. I do not sit inline! I will take up as much horizontal space as possible!
div {
  display: 'inline';        /* Default of all elements, unless UA stylesheet overrides */
  display: 'inline-block';  /* Characteristics of block, but sits in a line */
  display: 'block';         /* UA stylesheet makes things like <div> and <section> block */
  display: 'none';          /* Hide */

Quick tip: If you want to center an element, you can give the margin property a value of auto to center a block like element.

Your turn:

  • With a partner:
    • How can you right align a block like element using the margin property?

Position Property

  • We can manipulate this code pen to play around with the following values for our position property.
  • The position property in CSS will take elements out of the normal page flow, and should therefore be used sparingly.
  • relative: A relatively positioned element preserves its space. The adjacent elements aren’t repositioned to occupy the reserved space for this element. However, the offsets of this element don’t occupy space. They’re completely ignored from the other elements, and hence that may causes elements to overlap each other.
  • absolute: An absolutely positioned element is completely removed from the normal flow. The adjacent sibling elements occupy its space.
  • fixed: A fixed positioned element (subcategory of the absolute positioning) is positioned relative to the viewport. It will stick in place despite any scrolling or resizing of the viewport
  • You specify the position of your element via offset properties: auto (default), top, bottom, right, left
  • An element whose position property is set to absolute or fixed is called an absolutely positioned element.
  • A positioned element can take advantage of the z-index property to specify its stack order. The stack order is the order in which elements in the same space lay on top of one another. For example, an element with a z-index of 2 will appear above an element with a z-index of 1 if they happen to overlap. Without any z-index value, elements stack in the order they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning. Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

Your turn:

  • With a partner:
    • What might be a useful scenario for using position absolute?
    • What about relative?
    • Fixed?
    • z-index?


“Floating” an element takes it out of the normal flow, and places it as far to the left or right of its containing element as possible. Any other elements, such as paragraphs or lists, will wrap around the floated element as seen here.

  • Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.
  • You can specify a) whether an element is floated or not, and b) which side it floats on.
  • none: the element does not float. This is the initial value.
  • left: floats the element to the left of its container.
  • right: floats the element to the right of its container.
  • inherit: the element inherits the float direction of its parent.
  • clear: Float’s sister property. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.
  • We can play around with this code pen to see how float and clear work with one another.
.clearfix:after {
    content: ' ';
    display: table;
    clear: both;

CSS Specificity

Specificity is how the browser decides which CSS values are the most relevant to an element and whether or not they should be used. Specificity is a weight that is applied to a given CSS declaration and is determined by the number of each selector type in the matching selector. Basically, it’s a mechanism within the CSS cascade, which helps browsers in conflicts resolution. Suppose, you have two (or more) conflicting CSS rules that are being applied to the same element, then there are going to be some basic rules which a browser will follow to determine which one is most specific and that particular CSS declaration will win.

What does specificity look like?

// This makes all the <li> tags magenta
li {
  color: magenta;

// This indicates that all <p> tags within an <li> tag should have text color of green
li p {
  color: green;

How do you calculate specificity?

To find the actual specificity of a group of nested selectors takes some calculation. Basically, every inline style has a specificity of 1000, every ID selector has a value of 100, every class selector has a value of 10 and every elements and pseudo elements has a value of 1. Finally, we add them up to get the specificity weight.


  • a has a specificity of 1 (1 element selector)
  • div p has a specificity of 2 (2 element selectors, 1+1)
  • .active has a specificity of 10 (1 class selector)
  • #nav has a specificity of 100 (1 id selector)
  • #nav li.active a has a specificity of 111 (1 id selector + 1 class selector + 1 elements selector)

Specificity Calculator The highest number wins for most specific and will correspondingly take precedent in application of style.

Key Points:

  • In case of conflicting styles declaration, the declaration with higher specificity will win regardless of order.
  • The universal selector (*) has no specificity value.
  • Pseudo-classes have specificity of 10 while pseudo-elements (e.g. :first-line) has a specificity of 1. Pseudo-class vs. Pseudo-element
  • The pseudo-class :not() adds no specificity by itself, only elements inside its parenthesis will add to specificity weight.
  • When an !important rule is used on a style declaration, it will override any other declarations.
  • The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value .

Additional Resources

Lesson Search Results

Showing top 10 results