@ 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:
