D e c l a r a t i o

n s

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. 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. This page is 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, try to use it in a sentence/context and progressively you'll develop an instinct on how and when.
• Ask someone in the same room than the one you are coding, chances are they might be able to help you.

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

Cool CSS words

Backgrounds

it can be used with a single color, or gradient, or even images.

You can find cool texture on our friend Daniel's (aka melonking) website

Border

there is plenty of border style, like solid, inset, dashed and dotted. border multiple materialities can be used as a drawing tool.

Shadow

The cool thing about shadow is that you can overlay many of them. parameters are in order: top, left, thickness, bluryness, color.

text shadow works basically the same but with one less value (we can't control the shadow thickness, only the bluryness).

Transparence

Transform

transform contains infinite possibility, notably scale, rotate and skew. it reshapes the object with lots of authority, like if it was made out of clay.

Typography

By using font-family, font-size, font-style and font-weight, (or text-transform), you tweak the individual glyph's themselve.

By using text-align, line-height, letter-spacing and word-spacing, you tweak the flow and spacing between the glyphs.

By using text-decoration, you can add decoration to the text.

Or using the un-official -webkit-text-stroke, to paint a whole new stroke around the glyphs.

You'll find a lot more CSS typography example on felix wasler website

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

Flow paradigms

for now everything has been about shaping one element, but what about the flow of the page, the movement, the display, the positions and layout paradigm.

Display

By default most element have a display: block;, like <p> or <div> or <ul> or <h2>. They go below each others, think of them like big stacking boxes that have the height of what's inside of them, and that construct from top to bottom.

Some element like <span> or <a> have another default display: inline;, think of them like little label that flow inside of a line of text. Often inline elements are found inside block elements.

But not everything is either a block or a line.

On the early web, website crafter made strong use of the <table> element, which comes with its default display: table; behavior. Because they're wasn't a lot of way to create intricate layout, tables where used not to display data like it would have been expected, but to create complex nested design structure and navigation.

Even more simple than a table, a list like <ul> (unordered) or <ol> (ordered), in themselve they are have a block display, but their items <li> have the special display: list-item;. List can be customized with the list-style property.

We also have more ambiguous ones, like inline-block an intuitive but complex mix where the element itself has the materiality of a block but can be flow like if it was inline, it's the default for <img> or UI elements like <input>.

There also is the unique float, that take inspiration from print design. It is less and less used on the web, but a website where you might have seen it is none other than wikipedia (for the image thumbnail flowing in the article).

Around 2010 we see arrive two other, more modern, type of display: flex and grid. They both have become synonim of "professionnal" web-design, what you would use now to develop an app, with responsivity and accessibility.

While the previous list, table, and float are still largely in use, but their induced presentation have become synonim of "defaultism", "brutalism", sometime even "nostalgia". This is only a cultural-aesthetical expectation, nothing is bad about those element.

Mastering flex and grid can be a bit complex, since they each come with their own subset of properties. Nevertheless, when used correctly, they can be used to build strong & resilient modular design system.

The whole idea behind flex is like an enhanced version of inline-block, where you can control the spacing distribution in between elements both horizontaly and verticaly, but also the growing or skrinking of each element according to the available remaining space.

For grid, well it's speaks for itself. There is this slightly unexpected presentation of display: grid; by Jen Simmons, who introduced this feature in the W3C CSS working group.

Positions

(document flow)

relative / absolute

sticky / fixed

Before & After

Ressources & tutorials

Some external ressources and tutorials we like are the following. If you're interested in learning web-language, free an afternoon, make yourself some tea, and pick one of those.

• Basics of HTML and Basics of CSS - two videos by Laurel Schwultz
• Web-zine - How to make a your first web zine with Zach Mandeville
• HTML for the people - "HTML isn’t only for people working in the tech field. It’s for anybody, the way documents are for anybody." by Blake Watson
• HTML basics and CSS basics - two text tutorial by Mozilla
• Learning HTML/CSS in Historical Context - by Olia Lialina