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.

Selectors

Selector Example	Description
`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">`.
`a:link`, `a:visited`, `a:active`	Select the states of a link: unvisited, visited, currently-clicked.
`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).

Properties

Property	Description
`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 Example	Description
`@media (max-width: 480px) { … }`	CSS rules for screens 480 “pixels” wide, or less.
`@media print { … }`	CSS rules for printing pages.