D e c l a r a t i o

n s

The best advice for declarative amateurs

If at any point you are not sure of what to do with certain CSS properties, you can always

Inspect existing webpages and look they've done it. Those pages are meant to be looked at with your inspector open.

Look for documentation on Mozilla Developper Network, they have great interactive examples for each properties.

What you are learning is a language, it's ok if you don't feel you properly understand something, Use it in a sentence/context, just like any words from a new language you don't learn from the definitions but by hearing and saying it, and progressively you'll develop an instinct on how and when.

Ask people ideally in the same room than the one you are coding, chances are they might be able to help you, show you cool tricks with it, tell you specifics stories about that property, or open other websites that used it in a new tab.

An example of declarations

Let's look at one declarations block of CSS.

p{
    background: greenyellow;
    color: navy;
    border-radius: 2em;
    padding: 1em;
    font-size: 16px;
    max-width: 60%;
    margin: 3em auto;
    box-shadow: 0 0 1em 0 aqua;
}

This paragraph has a greenyellow background, is colored in navy. Its border are rounded, with a radius of 2 time the size of the font. There is space in between the edges of the paragraph and the start of the text equal to the size of the font. The font size itself is fixed at 16 pixels. The paragraph will take a sixth of the width of its parent, leaving space on the side. The vertical margin is 3 time the size of the font, and the left and right margin are going to be distributed equally. Finally a shadow is applied on the box that is the paragraph, the shadow has no top or left offset, and spread on a zone that takes the size of the font, diffusing a aqua color.

Our declarations block is composed of a few sections

p is the selector, it describes which elements we are targetting (applying the style), in this case p means all the paragraph of the page.

{ ... } marks the start and end of the block, inside of that block we'll define the styling that is going to be applied to the element selected by the selector.

background: blue; is a declarations, it is one sentence of CSS.

• background is a CSS property, there exist a finite set of CSS property, it's like the dictionnary of word we can use. To know which ones exist and what they do, you need to look at documentation.
• blue is a CSS value, it is the value we attach to that specific property. CSS value can be numerical, like 16px or 2em, or keywords, like lightblue or auto.

Boxes nested inside boxes

In HTML, elements are boxes inside of each others. CSS then, shapes the boxes and their form/behavior/space inside of each others.

From the outside to the inside of each box, we meet

• margin, creates space in between the boxes (outer grey zone).
• border, draw a border at the edge of a box (black dashed zone).
• padding, creates space inside the box (inner grey zone).

Elements (or boxes) have default sizing behavior depending on their nature. However we can control their size using

• width and height define the size of the box.
• max-width and max-height limit the size, while keeping some flexibility of interpretation.

Some boxy behaviors can be changed

• box-sizing: border-box; makes that the defined size includes the padding, instead of stopping at the content area (default is box-sizing: border-box;).
• overflow can be use to control how the content area should behave when the content take more space than there is, like if it should clip or scroll.

Selectors

Selectors are powerful simple magic formulation. In order to shape anything on a webpage, we first need to write a selector, it will look at the page and grab certain elements only, on which we want to apply a style.

Units