CSS - Style sheets

February 2017

Font properties

Property Value Description
font-family Specific font (Arial, Times, Verdana)
Familly (serif, sans-serif, fantasy, monospace, cursive)
Defines one or more font names or font families. If multiple fonts are defined, the first one found on the user's system will be used.
font-style normal, italic, oblique Defines the writing style
font-weight lighter, normal, bold or bolder.
numeric value (100, 200, 300, 400, 500, 600, 700, 800, 900)
Defines the thickness of the font
font-size xx-small, x-small, small, medium, large, x-large, xx-large
size in points (pt), cm, %
Defines the font size
font-variant normal, small-caps Defines a variant (small capitals)
font font: Verdana, Arial, bold italic 8px; Shortcut for all properties

Text and paragraphs

Property Value Description
color "#RRGGBB" Defines the text color
line-height line-height: 12pt; Defines line spacing
text-align left, center, right or justify Defines text alignment
text-indent text-indent: 5px; Defines indentation
text-decoration blink (blinking), underline (underlined), line-through (strikethrough), overline (overlined) or none (no decoration) Defines decoration
text-shadow text-shadow: 1px 2px 4px black; Defines a drop shadow for the text, representing, respectively, the shadow's right-shift, down-shift, blur radius, and color.
text-transform uppercase, lowercase, or capitalize Defines the case of the text
white-space normal (text will wrap to the next line), pre (text appears with whatever blank spaces were entered), nowrap (text will not wrap) Hyphenation
word-spacing word-spacing: 6px; Defines how much space to put between words
width in points (pt), inches (in), in cm, on pixels (px), or as a % Defines the width of a text element or image
height in points (pt), inches (in), in cm, on pixels (px), or as a % Defines the height of a text element or image

Background colors

Property Value Description
background-color "#RRGGBB" Defines a background color
background-image url(http://url) Defines a background image
background-repeat repeat, repeat-x, repeat-y, no-repeat Defines how the background image repeats
background-attachment scroll, fixed Specifies if the background image will stay in place when the screen scrolls
background-position top, middle, bottom, left, center or right Positions the image relative to the upper-left corner
background background: url(test.jpg) fixed repeat; Shortcut for background properties


Property Example Description
margin-top margin-top: 5px; Value of top margin
margin-right margin-right: 0.5em; Value of right margin
margin-bottom margin-bottom: 2pt; Value of bottom margin
margin-left margin-left: 0; Value of left margin
margin margin: 5px 0.5em 2pt 0; Shortcut for margin properties


Property Value Description
border[-top -left -bottom -right]-width in points (pt), inches (in), in cm, on pixels (px), or as a % Border thickness [for the location given]
border[-top -left -bottom -right]-color border-left-color: #RRGGBB; Border color [for the location given]
border[-top -left -bottom -right]-style solid, dashed, dotted, double or ridge Border style [for the location given]
border-collapse collapse
Adds or removes "3D" effect
Border border: 1px 0 0 2px dotted green; Global shortcut for border properties


Property Value Description
padding-top padding-top: 3px; Padding between the element and the top border
padding-right padding-right: 0.25em; Padding between the element and the right border
padding-bottom padding-bottom: 0; Padding between the element and the bottom border
padding-left padding-left: 2pt; Padding between the element and the left border
padding padding: 3px 0.25em 0 2pt; Shortcut for all padding properties


Property Value Description
border-collapse separate or collapse Merges cell borders (collapse), doesn't merge them (separate)
border-spacing border-spacing: 4px; Cell spacing
caption-side top, bottom, left or right Placing the table's caption
empty-cells show or collapse Display (show) or hide (collapse) empty cells
table-layout fixed (independent of cell content) or auto (depending on cell content) Fixed or variable width
speak-headers always (always before each cell) or once (just once) Property for the blind and visually impaired, indicating how sound behaves when reading table header cells


Property Value Description
list-style-type decimal, upper-roman, lower-latin, disc, circle, square or none Type of bullets and numbering
list-style-image list-style-image: url(image.png); Personalise bullets with an image
list-style-position inside or outside Specifies bullet indentation
list-style   Shortcut to list properties

Page layout

Property Value Description
@page @page(size: portrait) Defines print layout
size auto, landscape or portrait Printing format
margin-top margin-top: 3 cm; Top margin
margin-right margin-right: 1.5 cm; Right margin
margin-bottom margin-bottom: 1 cm; Bottom margin
margin-left margin-left: 2 cm; Left margin
marks crop (crop marks), cross (cross marks), none (no marks) Crop marks and cross marks
page-break-before Always, avoid Forces a page break before an element
page-break-after Always, avoid Forces a page break after an element
orphans orphans: 2; Avoids having orphaned lines at the end of a page. Defines the minimum number of lines of an element that are left at the bottom of a page before a page break.
widows widows: 1; Avoids having widowed lines at the end of a page. Defines the minimum number of lines of an element that are left at the top of a page after a page break.


CSS: Hojas de estilo
CSS: Hojas de estilo
Les feuilles de style
Les feuilles de style
I fogli di stile
I fogli di stile
As folhas de estilo
As folhas de estilo
This document, titled "CSS - Style sheets," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).