CSS Quick Reference

This is not intended to be a definitive list of CSS properties, just a quick reminder of the specific things we have seen in the course.

For more details, see the CSS Reference.


Selector ExampleDescription
h1 Select all <h1> elements (even if they have a class or id).
.important Select any element with class="important".
p.important Select all elements <p class="important">.
#first Select an element with id="first".
p#first Select an elements <p id="first">.
ul>li Select <li> that are immediate children of a <ul> (not deeper nested).
ul li Select <li> that are anywhere inside of a <ul> (may be deeply nested).


text-align How should text (or other inline content) be placed on the line: left, right, centred, or full-justified?
font-style Should text be italic or not (or oblique)?
font-weight Should the text be bold or not (or how bold, if the font supports it)?
font-size How large should the text be?
color Sets the colour of the element (the typically the text).
background-color Sets the background colour for the element.
line-height The height of a line of text, used to control the kerning.
font-family What font should be used for the text? List of fonts to try which must end with one of the five generic families.
border-style What kind of line should be used for the border. Default is none, so must be set if you want a border.
border-width How wide should the border be?
border-color What colour should the border be?
border A shorthand for the border properties: can give any of a style, width, or colour, separated by spaces. Can also set the left, right, top, bottom separately.
padding Space around the element inside the border, and covered by the background. Can also set the left, right, top, bottom separately.
margin Space around the element outside the border, and not covered by the background. Can also set the left, right, top, bottom separately.
list-style-type What kind of bullet/numbering should be used for list items?
float Move the element to the left/right of the page and let other content flow around it.
clear Move content down past any content floating to the right/left/either.
position Change the positioning method for the element so you can move it precisely. Can easily cause overlapping content, or break things on different-sized browsers.
top, bottom, left, right Used to control the position of an element with absolute/relative positioning.
opacity How opaque/transparent should the element be?
width, height Used to control the size of the content.

Media Queries

Query ExampleDescription
@media (max-width: 480px) { … } CSS rules for screens 480 “pixels” wide, or less.
@media print { … } CSS rules for printing pages.