Cascading Style Sheets (CSS) Reference

Kip Landergren

(Updated: )

My cheat sheet for CSS covering language features, personal best practices, and helpful resources.

Contents

The Language

CSS Statements

        h1       {
/* \_SELECTOR_/                                                 */
         color           :           green             ;
/* \_PROPERTY NAME_/ \_COLON_/ \_PROPERY VALUE_/ \_SEMI COLON_/ */
/* \_______________________DECLARATION________________________/ */
                 }
/*              \___DECLARATION BLOCK (within matching {})____/ */
/* \_____________________RULE SET (RULE)______________________/ */

Selectors

Selectors describe the conditions under which to match elements or display objects of a structured document.

Simple Selectors

Simple selectors may match elements using type, attributes, and attribute values:

h1 {
  color: green;    
}

id Selectors

#id-name {
  background-color: red;
}

Contextual Selectors

Contextual selectors may match elements based on their position in the structured document, using a composition of multiple simple selectors and operators:

/* match an `h2`,
   contained within a `section`,
   contained within an `article` */
article section h2 {
  border-top: 3px solid black;
}

Pseudo-Element Selectors

Pseudo-element selectors may match display objects—like the first line of a rendered paragraph or the first letter of a line—rather than structural elements:

/* match the _display object_ containing the first letter of every `p`
   element's content */
p::first-letter {
  text-transform: uppercase;
}

Note: the use of :: to prefix pseudo-elements was introduced in CSS3 as a convention to distinguish between pseudo-elements and pseudo-class selectors.

Pseudo-Class Selectors

Pseudo-class selectors may match elements based on external state, like whether a user has already visited a link:

/* match any `a` element that has already been visited by the user */
a:visited {
  border: dashed purple;
}

Authoring

Comments

/* and */ are the only valid delimiters:

/* this is a single line comment */

/* and this is a multi line comment
   using the same block comment syntax */

Flexbox

display: flex; is a means of controlling the layout of items along a single dimension of a container.

(Note: A second dimension is partially configurable via flex-wrap: wrap;, in which case a row or column or elements “wraps” into the next zone. Check if CSS Grid may be more suitable.)

two examples of flex-direction, row and column

Flex child item position and behavior are primarily controlled by two groups of properties:

and:

I have found the MDN article Typical Use Cases of Flexbox to be helpful understanding Flexbox’s application and its distinct usage from Grid.

Important: there are two CSS Modules to be aware of:

It is my understanding that “CSS Box Alignment Module Level 3” will eventually supercede “CSS Flexible Box Layout Module Level 1”. You may see properties from Box Alignment show up in browser support for flexbox / flex items, like gap, but be aware of the two distinct specifications.

Example: justify-content

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

Best Practices

Reset Default Styles

Browsers may each render HTML slightly differently. “Resetting” these default styles, and then building up your own custom styles, gives you a consistent base to work from.

Prefer “border-box”

Using box-sizing: border-box; ensures that setting padding or border values do not mess with width or height.

Handle Margin Collapsing

CSS will will sometimes combine margin-bottom and margin-top of stacked elements. Avoid extra confusion by adopting:

margin-top: 0;

Design for Mobile, First

Build your site with mobile styling (small screen) that is then scaled up.

Pseudo-Elements

Styling

Text

rem values are relative to the root html element, not the parent element.

Tables

FAQ

What are the .bs file extensions used in the csswg repo?

“...lightly-decorated markdown...” for use with the Bikeshed spec-generating tool.

What does “em” actually mean? What is “em” short for?

“em” is a typographic unit referring to the width of an uppercase letter “M” in a given font.

What is a “CSS pixel”?

A device-independent way of defining a pixel to be approximately 96px to 1 physical inch. CSS pixel definition from MDN.

Resources