CSS Cheat Sheet

@ Instructions

@charset Defines the charset to use (Usually utf-8). This instruction must be the first in the file
@font-faceAllows 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
@inputInserts an external CSS file. This isntruction must be a the head of the file. Only the @charset can preceed it.Used to define
@mediaUsed to define different styles depending on the presentation ‘media’ (eg Landscape v Portrait)

Basic Syntax

[element identifer] {
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 > pAll p elements one level deep in div
div + pp elements immeidately after div tag
div * All elements within a div


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

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

Useful links:

Recent Posts