Inline elements

<p style="font-size: 100px;"/>

In a standalone file

Elements

Defining it this way will apply it to all elements of that type.

h1 {
    font-size: 16px;
}

Classes

Inline: <img class="avatar" src="...">

Use the . before the name of the class

.avatar {
    border-radius: 100%;
}

Classes can be combine. Separate them with spaces.

Inline: <img class="avatar small" src="...">

.avatar {
    border-radius: 100%;
}
.small {
    width: 20px;
    height: 20px;
}

Rules can be defined so that only those that have all of the classes are selected.

img.profile {...}
.profile.large {...}

IDs

Every id must be unique. They are denoted with the # sign. Some will argue that id's should not be used for styling.

Inline: <img id="profile-image" src="profile.png" />

#profile-image {
    border-radius: 100%;
}

Box Model

  • Margins are for the space outside
  • Padding is for the space inside
  • Borders are decorative (goes around the element)

There is a shorthand syntax for margin. The directions are top, right, bottom, left. Think of a clock. Like so:

margin: 5px 2px 4px 1px

The same can be done for borders, with width, style, colour

border: 5px, bold, blue


Table of Contents