wwworkshop

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:

  • * select all elements
  • tag select elements by tag name <tag>
  • .classname select elements by class name <tag class="classname">
  • #idname select elements by id name <tag id="idname">

And then there are combinators:

  • parent descendant select elements inside some other elements
  • parent > child select elements that are direct children of that parent
  • element1 + element2 select elements that directly follow the first
  • element1, element2 apply the same rules to both elements

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:

  • px pixels
  • % relative to the width of the parent element
  • vw % of screen width
  • vh % of screen height
  • em relative to current font size (2em means 200% of the current or inherited font-size)
  • rem relative to root font size (when html{font-size:10px;}, then 1rem = 10px)

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:

  • blue there are 140 default colors
  • currentColor current or inherited text color
  • #0000ff 8-bit hex (00 = 0, 99 = 127, ff = 255)
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:

  • It works like an onion: content < padding < border < margin
  • An elements dimensions are measured from the outside of its content and inside of its padding, which can be quite counter-intuitive. You can change that behaviour with box-sizing: border-box;, so that the dimensions are now measured outside its border and inside its margin
  • The margin of sibling elements will collapse (or overlayed) instead of added

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

  • Unclosed curly brackets or incorrect syntax. Remember: selector { property: value; }
  • No selector match. Include border: 5px solid red !important into your style rule to check if your selector matches the right element
  • Non-existing property or invalid value. Check reference
  • Use your browser beveloper tools: right click on element > inspect

Find out more:

🔗 Further surfing

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