★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2
Descendant
✽
Shorthand property
T
Notes
Designed by Antonio Lupetti • http://woorkup.com • http://www.twitter.com/woork
* Matches any element.
E Matches any E element (div, span, p,…).
Matches any F element that is a descendant of an E element.
Matches any F element that is a child of an element E.
★ HOW TO / 1. SYNTAX Include an external style sheet
E:link / E:visited
Use the following syntax to include an external style sheet on your pages:
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
The CSS syntax is made up of three parts: a selector, a property and a value: selector {property:value}
T How to use: body {color:black}
E:active / E:hover / E:focus Matches E during certain user actions.
D (s)
C (s)
You can group selectors separating each selector with a comma.
T How to use: p, h1,h2,h3,h4,h5,h6, form {margin:0;}
Add styles to elements with particular attributes You can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that have a type attribute with a value of "text".
T How to use: input[type="text"] {background-color:blue}
Matches any E element with the "foo" attribute set (whatever the value).
(pc)
:after
:before
Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
DIV.warning
A comment will be ignored by browsers.
Language specific. (In HTML, the same as DIV [class~="warning"]).
Adds a style to an element that is the first child of another element.
Sets the background image for an element.
Adds a style to the first character of a text.
dynamic (pc)
:first-line
background-position
Adds a style to the first line of a text.
Sets the starting position of a background image.
:focus
url('image_url') | none | inherit
top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right | x% y% | x-pos ypos | inherit
Adds a style to an element that has keyboard input focus. :lang() (pc)
Ad (s)
Att (s)
Att (s)
background-repeat
:hover
Sets how a background image will be repeated.
Adds a style to an element when you mouse over it.
a:hover must come after a:link and a:visited in the CSS definition in order to be effective.
★ FONT
:lang
f
✽ font
Adds a style to an element with a specific lang attribute.
Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element.
text-indent Specifies the indentation of the first line in a text-block.
★ TABLE
border-collapse Specifies whether or not table borders should be collapsed.
border-spacing Specifies the distance between the borders of adjacent cells.
collapse | separate | inherit
length length | inherit
length | % | inherit
★ GENERATED CONTENT
text-shadow
content
Specifies the shadow effect added to text.
text-transform Controls the capitalization of text.
Used with the :before and :after pseudo-elements, to insert generated content. none | capitalize | uppercase | lowercase | inherit
counter-increment Increments one or more counters.
vertical-align caption-side Specifies the placement of a table caption.
top | bottom | inherit
Sets the vertical alignment of an element.
length | % | baseline | sub | super | top | text-top middle | bottom | text-bottom | inherit
counter-reset Creates or resets one or more counters.
empty-cells Specifies whether or not to display borders and background on empty cells in a table.
white-space hide | show | inherit
Specifies how white-space inside an element is handled.
quotes
Sets the layout algorithm to be used for a table.
auto | fixed | inherit
Increases or decreases the space between words in a text.
none | id number | inherit
none | id number | inherit
normal | nowrap | pre | pre-line | pre-wrap| inherit
word-spacing table-layout
none | normal | content specifications | inherit
normal | length | inherit
Sets the type of quotation marks for embedded quotations.
none | string string string string | inherit
k THE WORKING BRAIN
CSS 2 Visual Cheat Sheet - V4 - GitHub
Add styles to elements with particular attributes. You can also apply styles to HTML elements with particular attributes. The style rule below will match all input ...
