Cascading Style Sheets (mor ecommonly known as CSS) is used to style HTML pages. Through CSS we are telling the browser how to render certain elements, such as font styles and sizes, page layout, colours and simple animations. This cheat sheet is full of tips and hints to help you beautify your site!

Basic CSS

CSS Rules are properties that we can set on elements. This includes things like background, colours, fonts, spacing and alignment. Along with the rules we need to specify the element to apply this rule to, we call this a selector.

For instance, setting the font colour of an element is pretty straight forward:

body {
  color: red;
}

Here our selector is body, which targets the <body> HTML tag. The rules for this selector then appear as a list of properties in-between the {}.

Common CSS properties

  • background-color: Sets the background colour of an element
  • text-align: Sets the text alignment of the content, such as center, left, right.
  • font-size: Sets the size of the font
  • display: Sets how the element will be laid out on our page.
    • block: A block level element takes up a full line and forces other elements to move below it. <div>s are a common example of a block level element
    • inline: An inline element doesn't break other content, and appears inline with other content. <span>s are a common example of an inline element
  • list-style: Sets how the bullets will look in an <ol> (ordered list) or <ul> (unordered list)
  • opacity: Sets how opaque an element is, or how see through an element is. A value of 1 is fully opaque while a value of 0 is invisible.

There are many properties that can be assigned, you can find a full list here.

Selectors

We use selectors to target our rules to specific elements. This includes tags, classes and ids.

  • div: Selects all <div> tag
  • .button: Selects any element with a class of button
  • #content: Selects the element with the id of content

N.B. Classes can appear many times in an HTML document where an ID should only appear once.

We can also combine selectors to specify only certain elements on our page. This allows us to specify rules for specific parts of our page.

/* Selects only `<div>` elements that exist inside of an element with the `id` of `content` */
#content div {}
/* Selects only `<div>` elements that exist inside of an element with the `id` of `content` AND have a class of button */
#content div.button {}

The Box Model

The box model is the way that the browser decides to render elements to the screen.

Each element is given a box defined by several edges, these regions are: - Content edge - Where the content gets displayed - Padding edge - Spacing between the content and the border - Border edge - The border itself - Margin edge - Spacing between this element and other elements

            Margin Edge
+-----------------------------------+
|           Border Edge             |
|  +-----------------------------+  |
|  |        Padding Edge         |  |
|  |  +-----------------------+  |  |
|  |  |     Content Edge      |  |  |
|  |  | +-------------------+ |  |  |
|  |  | | Content goes Here | |  |  |
|  |  | +-------------------+ |  |  |
|  |  +-----------------------+  |  |
|  +-----------------------------+  |
+-----------------------------------+

Each of these have relevant rules for setting the size of each area: margin, border, padding

Content sizes are changed using the width and height rules.

Each of these rules have appropriate rules for setting only one side of the box, top, right, bottom and left

body {
  margin-top: 10px; /* Sets a margin of 10px only on the top edge */
  padding-right: 10px; /* Sets a padding of 10px only on the right edge */
  border-bottom: 1px solid black; /* Sets a black solid border of 1px wide on the bottom edge */
}

We can also use a short hand notation when writing out rules for these properties. The rules for the shorthand notations are as follows:

  1. If there is only one value:
    • The value is applied to all sides
  2. If there are two values:
    • The first value is applied to the top and bottom
    • The second value is applied, to the left and right
  3. If there are three values:
    • The first value is applied to only the top
    • The second value is applied to the left and right
    • The third value is applied to the bottom
  4. If there are four values:
    • The first value is applied to the top
    • The second value is applied to the right
    • The third value is applied to the bottom
    • The fourth value is applied to the left
body {
  /* Sets a solid border of 1px on all sides */
  border: 1px solid black;
  /* Sets a margin of 10px on the top and bottom, and 5px on the left and right */
  margin: 10px 5px;
  /* Sets a padding of 10px on the top, and 5px on the left and right, and 2px on the bottom */
  padding: 10px 5px 2px;
}

We can also set the width and height of an element.

div {
  width: 100px;
  height: 100px;
}

This will set the size of our Content Box for all <div> elements to 100x100.