CSS 2 Visual Cheat Sheet

CSS 2 VISUAL CHEAT SHEET ★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2
LEGEND C ★ HOW TO / 2. SELECTORS ★ PSEUDO CLASSES ★ BACKGROUND
E Element C Child * :active ✽ background

U (s)
Ad Adjacent Matches any element. Adds a style to an element that is activated.
(pc) Pseudo Class Sets all the background properties in
Att Attribute one declaration.
(s) Selector E
Shorthand T (s) T How to use:
U Universal ✽ Matches any E element (div, span, p,…).
property a:active must come after a:hover in the CSS background-attachment
T Type definition in order to be effective.
T Notes Sets whether a background image is scroll | fixed | inherit
D Descendant EF fixed or scrolls with the rest of the
Matches any F element that is a descendant of D (s) page.
an E element.
:after
Adds content after an element.
color_name |
Designed by Antonio Lupetti E>F background-color
hex_number |
• http://woorkup.com • http://www.twitter.com/woork Matches any F element that is a child of an C (s) :before Sets the background color of an rgb_number |
element E. Adds content before an element. element. transparent | inherit
E:first-child :first-child
:first-child Adds a style to an element that is the first child background-image
Matches element E when E is the first child of url('image_url') |
★ HOW TO / 1. SYNTAX (pc) of another element. Sets the background image for an
its parent. none | inherit
element.
:first-letter
Include an external style sheet E:link / E:visited
Adds a style to the first character of a text.
Matches element E if E is the source anchor of top left | top center |
Use the following syntax to include an external style sheet on link (pc)
a hyperlink of which the target is not yet top right | center left |
your pages:
visited (:link) or already visited (:visited). :first-line background-position center center | center
Sets the starting position of a right | bottom left |
Adds a style to the first line of a text.
<head> background image. bottom center | bottom
<link rel="stylesheet" type="text/css" href="mystyle.css" /> E:active / E:hover / E:focus right | x% y% | x-pos y-
dynamic (pc) :focus pos | inherit
</head> Matches E during certain user actions.
Adds a style to an element that has keyboard
input focus.
Basic syntax E:lang(c) background-repeat repeat | repeat-x |
:hover
Matches element of type E if it is in (human) Sets how a background image will be repeat-y | no-repeat |
The CSS syntax is made up of three parts: a selector, a property :lang() (pc) Adds a style to an element when you mouse
language c (the document language specifies repeated. inherit
and a value: over it.
how language is determined).
selector {property:value} E+F

T How to use:
T How to use: Matches any F element immediately preceded Ad (s)
by a sibling element E. a:hover must come after a:link and a:visited
body {color:black}
E[foo]
in the CSS definition in order to be effective. ★ FONT f
:lang
Grouping Matches any E element with the "foo" attribute Att (s)
set (whatever the value).
Adds a style to an element with a specific lang ✽ font
You can group selectors separating each selector with a attribute. Sets all the font properties in one
comma.
declaration.
E[foo="warning"] :link
Matches any E element whose "foo" attribute Att (s)
T How to use: Adds a style to an unvisited link. font-family family-name |
value is exactly equal to "warning".
Specifies the font family for text. generic-family
p, h1,h2,h3,h4,h5,h6, form {margin:0;}
E[foo~="warning"] :visited
xx-small | x-small | small |
Matches any E element whose "foo" attribute Adds a style to a visited link. medium | large |
Add styles to elements with particular Att (s) font-size
value is a list of space-separated values, one of x-large | xx-large | smaller
attributes which is exactly equal to "warning". Specifies the font size of text. | larger | length | % |
You can also apply styles to HTML elements with particular inherit
attributes. The style rule below will match all input elements
that have a type attribute with a value of "text". E[lang|="en"] font-style normal | italic | oblique |
Matches any E element whose "lang" attribute Att (s) ★ SIZE AND COLORS Specifies the font style for text. inherit
T How to use: has a hyphen-separated list of values
input[type="text"] {background-color:blue} beginning (from the left) with "en". font-variant
Relative Size em | ex | %
Specifies whether or not a text normal | small-caps |
Comments DIV.warning Absolute Size cm | in | mm | pc | pt | px should be displayed in a small-caps inherit
Class (s) font.
A comment will be ignored by browsers. Language specific. (In HTML, the same as DIV RGB Notation Hex notation
[class~="warning"]). Colours #0033CC | normal | bold | bolder |
T How to use: RGB notation: rgb (0, 12, 12) font-weight lighter | 100 | 200 | 300 |
E#myid Specifies the weight of a font. 400 | 500 | 600 | 700 |
/* This is a comment */
800 | 900 | inherit
Matches any E element with ID equal to ID (s)
"myid".
★ BORDER ★ DIMENSION ★ PADDING ★ POSITIONING
✽ border
height bottom
Sets all the border properties in one declaration. ✽ padding
Sets the height of an element. Sets the bottom margin edge for a auto | length | % | inherit
auto | length | Sets all the padding properties in one positioned box.
color_name | hex_number | % | inherit declaration (order: top, right, bottom, left).
✽ border-color length | % |
rgb_number | transparent | T The height property does not include
Sets the color of the four borders. inherit
inherit padding, borders, or margins. clear
T How to use: Specifies which sides of an left | right | both | none |
none | hidden | dotted | element where other floating inherit
✽ border-style p{padding:10px 5px 15px 20px;}
dashed | solid | double | max-height none | length | elements are not allowed.
Sets the style of the four borders. groove | ridge | inset | outset
Sets the maximum height of an element. % | inherit
clip
✽ border-width length | thin | medium | Clips an absolutely positioned shape | auto | inherit
padding-bottom length | % |
Sets the width of the four borders. thick element.
max-width none | length | Sets the bottom padding of an element. inherit
✽ border-top Sets the maximum width of an element. % | inherit url | auto | crosshair |
border-top-color |
border-top-style | default | e-resize | help |
Sets all the top border properties move | n-resize |
in one declaration. border-top-width cursor
ne-resize | nw-resize |
min-height length | % | padding-left length | % | Specifies the type of cursor to be pointer | progress |
border-top-color color_name | hex_number inherit displayed.
| rgb_number | Sets the minimum height of an element. inherit Sets the left padding of an element. s-resize | se-resize |
Sets the color of the top border. transparent | inherit sw-resize | text |
w-resize | wait | inherit
border-top-style
border-style none | block | inline |
Sets the style of the top border.
min-width length | % |
padding-right length | % | inline-block |
Sets the minimum width of an element. inherit inline-table | list-item |
Sets the right padding of an element. inherit
border-top-width run-in | table |
border-width display table-caption | table-cell |
Sets the width of the top border.
width Specifies the type of box an table-column |
✽ border-right border-right-color | element should generate. table-column-group |
Sets the width of an element.
auto | length | padding-top table-footer-group |
Sets all the right border properties border-right-style | length | % |
border-right-width % | inherit Sets the right padding of an element. table-header-group |
in one declaration. T The width property does not include inherit table-row |
color_name | hex_number padding, borders, or margins. table-row-group | inherit
border-right-color
| rgb_number |
Sets the color of the right border. transparent | inherit float
Specifies whether or not a box left | right | none | inherit
border-right-style should float.
border-style
Sets the style of the right border.
★ MARGIN ★ OUTLINE
left
border-right-width auto | length | % | inherit
border-width Sets the left margin edge for a
Sets the width of the right border. positioned box.
✽ outline
✽ margin
✽ border-bottom border-bottom-color | Sets all the outline properties in one
border-bottom-style | Sets all the margin properties in one declaration. overflow
Sets all the bottom border outline-color | visible | hidden | scroll |
border-bottom-width declaration (order: top, right, bottom, left). auto | length |
properties in one declaration. outline-style | Specifies what happens if content auto | inherit
% | inherit
outline-width | inherit overflows an element's box.
border-bottom-color T How to use: T An outline is a line that is drawn
color_name | hex_number
| rgb_number | p{margin:10px 5px 15px 20px;} around elements (outside the borders)
Sets the color of the bottom to make the element "stand out".
position
border. transparent | inherit absolute | fixed | relative |
Specifies the type of positioning static | inherit
for an element.
border-bottom-style
border-style margin-bottom auto | length | color_name |
Sets the style of the bottom border. outline-color right
Sets the bottom margin of an element. % | inherit hex_number |
border-bottom-width Sets the color of an outline. rgb_number | invert Sets the right margin edge for a auto | length | % | inherit
| inherit positioned box.
Sets the width of the bottom border-width
border. margin-left auto | length | top
✽ border-left Sets the left margin of an element. % | inherit none | hidden | dotted
border-left-color | border- Sets the top margin edge for a auto | length | % | inherit
left-style | | dashed | solid |
Sets all the left border properties outline-style positioned box.
in one declaration. border-left-width double | groove | ridge
Sets the style of an outline. | inset | outset |
color_name | hex_number margin-right auto | length | inherit visibility
border-left-color visible | hidden | collapse |
| rgb_number | Sets the right margin of an element. % | inherit Specifies whether or not an
Sets the color of the left border. inherit
transparent | inherit element is visible.
border-left-style
border-style outline-width length | thin | medium
Sets the style of the left border. margin-top auto | length | z-index
Sets the width of an outline. | thick auto | number | inherit
Sets the top margin of an element. % | inherit
Sets the stack order of an element.
border-left-width
border-width
Sets the width of the left border.
★ LIST ★ TEXT T ★ PRINT ★ REFERENCE AND CREDITS
orphans
✽ list-style list-style-type | color color_name | hex_number Sets the minimum number of lines that
Sets all the properties for a list in list-style-position | Sets the color of text. | rgb_number | inherit must be left at the bottom of a page
one declaration. list-style-image | inherit when a page break occurs inside an CSS 2 Visual Cheat Sheet
element.
Designed © 2009 by Antonio Lupetti
direction • http://woorkup.com
Specifies the text direction/ ltr | rtl | inherit page-break-after • http://www.twitter.com/woork
list-style-image writing direction. auto | always | avoid |
Sets the page-breaking behavior after left | right | inherit • http://www.facebook.com/antoniolupetti
Specifies an image as the list-item url | outside | inherit
an element.
marker.
Download this Visual Cheat Sheet here:
letter-spacing
normal | length | inherit • http://woorkup.com
Increases or decreases the space
between characters in a text. page-break-before
auto | always | avoid |
list-style-position Sets the page-breaking behavior before Source W3School • http://w3school.com/
left | right | inherit
inside | outside | inherit an element.
Specifies where to place the list-
item marker.
line-height normal | number | length |
Sets the line height. % | inherit
page-break-inside
Sets the page-breaking behavior inside auto | avoid | inherit
none | circle | disc | an element.
square | armenian | text-align
left | right | center |
decimal | Specifies the horizontal alignment
list-style-type justify | inherit
decimal-leading-zero | of text.
Specifies the type of list-item georgian | lower-alpha |
widows
marker. lower-greek | lower-latin |
lower-roman | Sets the minimum number of lines that
upper-alpha | upper-latin | text-decoration must be left at the top of a page when a
none | underline |
upper-roman | inherit page break occurs inside an element.
Specifies the decoration added to overline | line-through |
text. blink | inherit
text-indent
Specifies the indentation of the length | % | inherit
★ TABLE first line in a text-block.
★ GENERATED CONTENT
border-collapse text-shadow
collapse | separate content
Specifies whether or not table borders | inherit Specifies the shadow effect added none | normal |
should be collapsed. to text. Used with the :before and :after content specifications |
pseudo-elements, to insert generated inherit
content.
border-spacing none | capitalize |

length length | text-transform
uppercase | lowercase |
Specifies the distance between the borders inherit Controls the capitalization of text. inherit
of adjacent cells. counter-increment none | id number |
Increments one or more counters. inherit
length | % | baseline | sub |

vertical-align
super | top |
caption-side top | bottom | Sets the vertical alignment of an text-top middle | bottom |
Specifies the placement of a table caption. inherit element. text-bottom | inherit
counter-reset none | id number |
Creates or resets one or more counters. inherit
white-space normal | nowrap | pre |
empty-cells Specifies how white-space inside pre-line | pre-wrap|
hide | show |
Specifies whether or not to display borders inherit an element is handled. inherit
and background on empty cells in a table.
quotes
none | string string
word-spacing
Sets the type of quotation marks for
embedded quotations.
string string | inherit
THE k
table-layout Increases or decreases the space normal | length | inherit
auto | fixed |
between words in a text.
WORKING
Sets the layout algorithm to be used for a
table.
inherit BRAIN

CSS 2 Visual Cheat Sheet

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS 2 Visual Cheat Sheet

Uploaded by

Copyright:

Available Formats

CSS 2 VISUAL CHEAT SHEET ★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2

LEGEND C ★ HOW TO / 2. SELECTORS ★ PSEUDO CLASSES ★ BACKGROUND

E Element C Child * :active ✽ background

selector {property:value} E+F

★ BORDER ★ DIMENSION ★ PADDING ★ POSITIONING

★ LIST ★ TEXT T ★ PRINT ★ REFERENCE AND CREDITS

border-spacing none | capitalize |

length | % | baseline | sub |

You might also like