CSS - Style sheets

October 2016

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.

Related :

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 entitled « CSS - Style sheets » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.