Quintic
CSS Cheat Sheet

@ Instructions

Instruction Description
@charset Defines the charset to use (Usually utf-8). This instruction must be the first in the file
@font-face Allows the loading of user defined fonts. Detail discussion not for a cheat-sheet
@keyframes Controls the steps in CSS animation. Too large topic to detail in a cheat-sheet
@input Inserts an external CSS file. This isntruction must be a the head of the file. Only the @charset instruction can preceed it.
@media Used to define different styles depending on the presentation ‘media’ (eg Landscape v Portrait)

Basic Syntax

[element identifer] {
attribute:value;
attribute2:value;
}
The element identifier can be anything from a simple element type/class/element id to a complex specification detailing element structures within the DOM to which the xstyle should be applied. See below for details.

Simple Element Identifiers

<element> Element such a p or h1
.<class> All elements with the given class-name
#<id name> Applies only to the element with the given Id. Note: Element Ids should be unique

Complex Element Identifiers

<element> .<class> Only those elements with the given class. This is probably the most common form of identifier
<element >.<class>, <element> .<class> Applies to both sets of identifiers
<element> [Attribute] Applies only <element> with the given attribute. The ‘[‘ are required
div > p All p elements one level deep in div
div + p p elements immeidately after div tag
div * All elements within a div

Selectors

The following selectors can be used in combination with any of the above identifiers to further narrow down the set of target elements

:root All elements at document root level.
:first-child Refers to the first child element of <element>
:last-child Refers to the first child element of <element>
:nth-child(2) Refers to the second (n=2) child element of <element>
:hover When element is ‘hovered’ over (Usually a link)
:visited When link has been visited
:active Link in clicked state
:checked Only appropriate with Radio buttons and Check-boxes.
:out-of-range Applies to input element types. If the value given is outside of a defined range
p::first-letter Refers to the first letter of the paragraph;
p::first-line Refers to the first letter of the paragraph;

Useful links: