Declarations

This page purpose is to introduce anyone to the CSS language. It isn't a tutorial, but rather a quite organic and subjective presentation of the language functionnality, directed to open the door to playfullness and wonder.

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.
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.

outside

inside

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
- 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.
max-width and max-height limit the size, while keeping some flexibility of interpretation.

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.

`a`, `p`, `body`, `img`	semantic selector, grab elements based on their HTML tag.
`.flower`	class selector, grab elements based on their class attribute
`#my-flower`	id selector, grab elements based on their id attribute
`blockquote a`	space is used to grab only the elements inside of specific other element (here: the link inside a quote)
`blockquote > a`	grab only the elements directly inside (called the children) of specific other element (here: the link that are children of a quote)
`p:nth-of-type(odd)`, `p:nth-of-type(even)` and `p:nth-of-type(7)`	grab elements that are in a certain place in the HTML code

Units

`px`	pixels
`%`	relative to parent box
`em`	relative to `font-size` of current element
`vw` and `vh`	relative to browser window width and height

Before & After

[to be writen]

Declaring shapes with words on the web