.

Introduction to CSS with Mondrian

tutorial /

Introduction

Two of the basic web technologies are HTML, which defines the structure and CSS, which describes the appearance of structural elements.

We can use a Mondrian colour palette to explain what CSS does and what it looks like with HTML elements. Piet Mondrian was a Dutch painter famous for his palette of primary colours and drawing lines around boxes.

Mondrian palette

HTML Elements

The HTML elements are either block or in-line elements.
  • Block elements ( for example the section div) fill up the available space.
  • In-line elements ( for example the italic i ) just use up what is needed.

Box Model

The spacing of every HTML block element has three CSS properties : So using this palette, let's draw some lines with colours to understand these properties.


This is an element with no border, no padding, no margin


This is an element with border, no padding, no margin


This is an element with border, with padding but no margin


This is an element with border, with padding, with margin


With the standard box model, the height and width properties of the element control the size of the inner content box. There is another alternative CSS box model where the width and height are calculated up to the borders.

Show me the Box Model Code

View the code here:

See the Pen Simple Border Padding Margin with Mondrian by Kim Fitter (@kimnewzealand) on CodePen.


CSS Selectors

CSS is a language with rules.

Here is a snippet of the code from the CodePen CSS stylesheet above, this is called a statement block: 
    h1 {
        font-family: Helvetica;
        font-size: 1.5em;
        margin-top: 1em;
    }

What is a statement block?

A statement block opens with a selector, followed by a declaration in {}.
Inside the {} there are CSS properties and values with the format property:value.
This selects the HTML element that we are going to style.

Our example uses type selector h1.

We can also use class selector such as .one which refers to class='one' in the HTML.

    .one {
        font-family: Helvetica;
        text-align: center;
        background: #fff001;
      }
Another less commonly used selector is called id selector, which is prefixed with a #, and more advanced selector groups worth noting.

CSS Layout

Now the positioning of the boxes on the page can be changed with layout techniques and CSS properties.

Normal flow

This is how our example would look without any CSS Layout.
This is an element with no border, no padding, no margin
This is an element with border, no padding, no margin
This is an element with border, with padding but no margin
Element with border, with padding, with margin
Each line is a block element (using div) but the bolded words are in line elements (using strong).

The display property

The display CSS property sets how an element is displayed .

Some examples of display are : 

  .one {
      display: block;
  }
This is an element with background
This is an another element with border



  .one {
      display: inline;
  }
This is an element with background
This is an another element with border



Other display options are flexbox and grid. We can use the grid to layout the boxes to create a Mondrian painting.

Floats

We could float all the blocks to the right for example, with the float attribute. 
  .one {
      float: right;
  }
This is an element with background
This is another element with border

Positioning

Position property can position blocks inside of blocks. 
.one {
  position: sticky;
  top: 2em;
  left: 2em;

}
This is an element with background that sticks as you scroll
This is another element with border


Show me the Mondrian Painting Code

View the code here:

See the Pen Simple CSS Grid Relative Units by Kim Fitter (@kimnewzealand) on CodePen.

References

There are many other properties and styling techniques in CSS! See this reference guide for more.