Scribd
Upload
32K views

CSS 2 Visual Cheat Sheet

CSS2 Visual Cheat Sheet is an useful and practical reference to Cascading Style Sheets Level 2 for web designers and developers designed by Antonio Lupetti (http://woorkup.com). This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find at a glance everything you are looking for. Here’s a preview.

Uploaded by

Antonio Lupetti
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
32K views

CSS 2 Visual Cheat Sheet

CSS2 Visual Cheat Sheet is an useful and practical reference to Cascading Style Sheets Level 2 for web designers and developers designed by Antonio Lupetti (http://woorkup.com). This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find at a glance everything you are looking for. Here’s a preview.

Uploaded by

Antonio Lupetti
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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".
CSS 2 VISUAL CHEAT SHEET ★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2

★ 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.
CSS 2 VISUAL CHEAT SHEET ★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2

★ 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

You might also like