0% found this document useful (0 votes)
182 views

Css Quick Reference Manual

This document provides a summary of CSS properties for background, color, font, text formatting, and units. It includes the property name, possible values, default values, and what elements they apply to for common CSS properties related to text styling and formatting. Examples of CSS code are also provided to demonstrate using these properties.

Uploaded by

devenuna
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
182 views

Css Quick Reference Manual

This document provides a summary of CSS properties for background, color, font, text formatting, and units. It includes the property name, possible values, default values, and what elements they apply to for common CSS properties related to text styling and formatting. Examples of CSS code are also provided to demonstrate using these properties.

Uploaded by

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

background (¥) text-indent

Value: <background-color> || <background-image> Value: <length> | <percentage>


<background-repeat> || <background-attachment> Default: 0
<background-position> Applies to: block-level elements
Default: not defined for shorthand properties Percentage values: refer to parent element’s width
Percentage values: allowed on <background-position>
line-height
color Value: normal | <number> | <length> | <percentage>
Value: <color> Percentage values: relative to the font size of the element itself
Default: UA specific

CSS SAMPLES
FONT PROPERTIES
H1 { font-family: Times } /* all ‘H1’ elements */
font-family H1, H2 { color: blue } /* all ‘H1’ and ‘H2’ elements */
Value: [[<family-name> | <generic-family>],]* H1 EM { color : red } /* ‘EM’ elements within ‘H1’ elements/
[<family-name> | <generic-family>] .para { font-family: Arial } /* all elements with CLASS ‘para’ */
Default: UA specific H1#z98y { letter-spacing: 0.5em } /* the ‘H1’ element with ID ‘z98y’ */

<generic-family>
serif | sans-serif | cursive | fantasy | monospace NOTATION
font-style a b a followed by b
[a b] Grouping of a and b
Value: normal | italic | oblique
a | b a or b
a || b either a or b or both in any order
font-variant a? a is optional
Value: normal | small-caps a* zero or more occurrences of a
a+ one or more occurrences of a
a{1, 4} a occurs at least once and at most 4 times
font-weight
Value:

normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
CSS Quick Reference Manual
PSEUDO CLASSES AND PSEUDO ELEMENTS
font-size
Anchor Pseudo Classes Typographic Pseudo Elements
Cascading Style Sheets
Value: <absolute-size> | <relative-size> | <length> | <percentage>
Percentage values: relative to parent element’s font size A:link /* unvisited link */ P:first-line /* first line of a P element */
A:visited /* visited links */ P:first-letter /* first letter of a P element */
<absolute-size> A:active /* active links */
xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>
larger | smaller UNITS

font Properties
Value: [ <font-style> || <font-variant> || <font-weight> ]?
Length units - Box Properties
<font-size> [ / <line-height> ]? <font-family> <length> - Classification Properties
Default: not defined for shorthand properties (+ | -)? <number> <unit> - Color and Background Properties
Percentage values: allowed on <font-size> and <line-height> <number> - Font Properties
<digit>+[. <digit>*]?
<unit>
- Text Properties
TEXT PROPERTIES <absolute-unit> | <relative-unit>
<absolute-unit> CSS Samples
word-spacing mm | cm | in | pt | pc
Value: normal | <length> <relative-unit> Notation
em | ex | px
letter-spacing Pseudo Class and Pseudo element
Value: normal | <length> Percentage Units
<percentage> Units
text-decoration (¥) <number>% - Length Units
Value: none | [ underline || overline || line-through || blink ] - Percentage Units
Color Units - Color Units
vertical-align (¥) <color> - Url
Value: baseline | sub | super | top | text-top | middle | bottom | <color-name> | <rgb-color>
text-bottom | <percentage> <color-name>
Applies to: inline elements aqua | black | blue | fuchsia | gray | green | lime | maroon |
Percentage values: refer to the ‘line-height’ of the element itself navy | olive | purple | red | silver | teal | white | yellow
<rgb-color>
#<hex><hex><hex> |
text-transform
#<hex><hex><hex><hex><hex><hex> |
Value: capitalize | uppercase | lowercase | none rgb(<number>, <number>, <number>) | Day Two B.V.
rgb(<percentage> <percentage>, <percentage>) http://www.day-two.nl/
text-align [email protected]
Value: left | right | center | justify URL
Default: UA specific <url>
Applies to: block-level elements url(text)
CSS PROPERTIES border-bottom-width (¥) bottom (¥)
Value: thin | medium | thick | <lenght> Value: <length> | <percentage> | auto | inherit
The Cascading Style Sheets properties outlined here are grouped Applies to: positioned elements
into the appropriate categories. For each property the following border-left-width (¥) Percentage values: refer to parent element’s height
information is specified: Value: thin | medium | thick | <lenght>
? ? The property name left (¥)
? ? The set of possible values for the property border-width (¥)
? ? The default value (in bold, or specified separately) Value: <length> | <percentage> | auto | inherit
Value: thin | medium | thick | <lenght> {1, 4} Applies to: positioned elements
? ? The elements that the property applies to (all unless otherwise stated)
Default: not defined for shorthand properties Percentage values: refer to parent element’s width
? ? ¥ indicates a property that is not inherited
The notation used in this Quick Reference is summarised at the end.
border-color (¥)
Value: <color>{1,4} z-index (¥)
Default: the value of the ‘color’ property Value: auto | <integer> | inherit
Applies to: positioned elements
BOX PROPERTIES border-style (¥)
Value: none | dotted | dashed | solid | double | overflow (¥)
margin-top (¥) groove | ridge | inset | outset Value: visible | hidden | scroll | auto | inherit
Value: <length> | <percentage> | auto
Default: 0 Applies to: block-level and replaced elements
border-top (¥)
Percentage values: refer to parent element’s width
Value: <border-top-width> || <border-style> || <color>
Default: not defined for shorthand properties CLASSIFICATION PROPERTIES
margin-right (¥)
Value: <length> | <percentage> | auto border-right (¥) display (¥)
Default: 0 Value: block | inline | list-item | none
Value: <border-right-width> || <border-style> || <color>
Percentage values: refer to parent element’s width
Default: not defined for shorthand properties
white-space
margin-bottom (¥)
border-bottom (¥) Value: normal | pre | nowrap
Value: <length> | <percentage> | auto
Value: <border-bottom-width> || <border-style> || <color>
Default: 0
Percentage values: refer to parent element’s width
Default: not defined for shorthand properties list-style-type
Value: disc | circle | square | decimal | lower-roman | upper-roman |
margin-left (¥) border-left (¥) lower-alpha | upper-alpha | none
Value: <border-left-width> || <border-style> || <color> Applies to: elements with ‘display’ value ‘list-item’
Value: <length> | <percentage> | auto
Default: not defined for shorthand properties
Default: 0
Percentage values: refer to parent element’s width list-style-image
border (¥) Value: <url> | none
margin (¥) Value: <border-width> || <border-style> || <color> Applies to: elements with ‘display’ value ‘list-item’
Default: not defined for shorthand properties
Value: <length> | <percentage> | auto {1, 4}
Default: not defined for shorthand properties list-style-position
Percentage values: refer to parent element’s width width (¥) Value: inside | outside
Value: <length> | <percentage> | auto Applies to: elements with ‘display’ value ‘list-item’
padding-top (¥) Applies to: block-level and replaced elements
Value: <length> | <percentage>
Percentage values: refer to parent element’s width list-style
Default: 0 Value: <list-style-type> || <list-style-position> || <list-style-image>
Percentage values: refer to width of closest block-level ancestor height (¥) Default: not defined for shorthand properties
Value: <length> | auto Applies to: elements with ‘display’ value ‘list-item’
padding-right (¥) Applies to: block-level and replaced elements
Value: <length> | <percentage>
Default: 0 float (¥) COLOR AND BACKGROUND PROPERTIES
Percentage values: refer to width of closest block-level ancestor Value: left | right | none
background-color (¥)
padding-bottom (¥) clear (¥) Value: <color> | transparent
Value: <length> | <percentage> Value: none | left | right | both
Default: 0 background-image (¥)
Percentage values: refer to width of closest block-level ancestor visibility (¥) Value: <url> | none
Value: visible | hidden | collapse | inherit
padding-left (¥) background-repeat (¥)
Value: <length> | <percentage>
Default: 0 position (¥) Value: repeat | repeat-x | repeat-y | no-repeat
Percentage values: refer to width of closest block-level ancestor Value: static | relative | absolute | fixed | inherit
Applies to: all elements, but not to generated content background-attachment (¥)
padding (¥) Value: scroll | fixed
Value: <length> | <percentage> {1, 4} top (¥)
Default: not defined for shorthand properties Value: <length> | <percentage> | auto | inherit background-position (¥)
Percentage values: refer to width of closest block-level ancestor
Applies to: positioned elements Value: [<percentage> | <length>]{1,2} | [top | center
Percentage values: refer to parent element’s height [left | center | right]
border-top-width (¥) Default: 0% 0%
Value: thin | medium | thick | <lenght> Applies to: block-level and replaced elements
right (¥)
Percentage values: refer to the size of the element itself
Value: <length> | <percentage> | auto | inherit
border-right-width (¥) Applies to: positioned elements
Value: thin | medium | thick | <lenght> Percentage values: refer to parent element’s width

You might also like