CSS Reference

Cascading Style Sheets is a technology to assign styles to structured content like HTML. This allows you to seperate the appeareance from the actual content.

Syntax

selector {
    /* comment */
    property: value;
}

Same as with HTML, all indentation, line breaks and whitespaces are ignored by the browser. It’s solely for you to keep everything tidy.

Selectors

The most important selectors are:

And then there are combinators:

Using tag name selectors you can define a base style, while later applying more specific styles using class selectors or combinators. Play with it on CodePen

Learn more:

Style rules and properties

There are various rules that you can apply to an element to control its appeareance.

Play with it on CodePen

Full list of CSS properties

Cascading and inheritance

One of CSS’ key characteristics is the power of inheritance, which means:

  1. A selector always selects all matching elements
  2. All rules applied to an element will populate down to all it’s children ("cascading"), as long as they’re not overwritten
  3. With the inherit value, child elements can explicitly inherit a rule from its ancestors

This allows you to make even complex designs with a minimum amount of CSS rules, which makes your code more reusable, readable and your website faster.

Units

Most common CSS units are:

Units can also be calculated by the browser, eg: width: calc( 50vw + 1px );

Learn more:

Colors

You can define colors in a few different ways, eg:

black #000000
blue #0000ff
lightgrey #D3D3D3
springgreen #00ff7f
white #000000
yellow #ffff00

Read more:

🧮 Layout

There are many ways in CSS to create interesting layouts, while the most important techniques are lited below.

Leran more:

The Box Model

When working with properties like width, height, border, margin (outside spacing) and padding(inside spacing) it is really helpful to understand the box model concept:

Illustration of the box model onion. The last 2 boxes illustrate the difference between content-box and border-box, they are both 100x100px in size. Also note the collapsing margins. Play with it on CodePen

Position

With position, you can position an element relative to the viewport fixed, relative to the document absolute or relative to some parent that is positioned relative. This is extremly helpful when you want to position elements on top of each other.

Scroll down to see the different behaviours. Play with it on CodePen

Flex

Using display: flex;, you can spread out elements accross one axis.

Center a child element using flex, justify-content for x-axis and align-items for y-axis.

Elements with flexible width, centered horizontally. Play with it on CodePen

Grid

With display: grid; you can lay out elements accross two axes.

A 3x2 grid with cells of different sizes. Play with it on CodePen

Tables

HTML <table> can also be used to create a 2D layout, which was the layout paradigm before CSS flex and grid were introduced. But today it’s still relevant to do an actual table of text or data.

🎆 Effects

These are some straight formward effects:

Transform

Transform is a way to change the appeareance of an element without affecting other elements. You can move in 3 directions, scale, rotate, skew and apply some 3D perspective while doing so.

Transition

Transitions lets you morph between 2 states, e.g. to animate a text-color on hover.

Animation

📝 Webfonts and typography

There is a list of websafe fonts that are installed on most computers and thus can always be used whithout providing an explicit font file. However the design options are very limited with that.
A simple solution for that is Google Fonts. Just choose a font, click on "+ select this style" and choose either the <link> method for including this in your HTML or @import for placing this at the top of your CSS.

Resolving problems

Find out more:

🔗 Further surfing

Basics of CSS by Laurel Schwulst (17:30min)