Department of Mathematics

Math 300: Mathematical Computing

CSS Cheat Sheet

CSS Tag Purpose Example values
background-color set the background color

color name: "blue", "red"

hex color spec: "0000ff" "ff0000"

rgb color spec: "rgb(0,0,255)"

background-image specify an image for the background "url("
background-repeat set the repeat style for the background image

tile both directions: "repeat"

tile x direction only: "repeat-x"

tile y direction only: "repeat-y"

do not tile: "no-repeat"

border-color set the color of the border

color name: "blue"

hex color spec: "0000ff"

border-style set the style of the border

values are self-evident: "none", "dotted", "dashed", "solid", "double", groove", "ridge", "inset"

border-width set the width of the border

description: "thin", "medium", "thick"

width specification: "2mm","2ex","2pt"

clear set an edge for an element where no floating element should interfere

allow all floating elements: "none"

do not allow floats on left edge: "left"

do not allow floats on right edge: "right"

do not allow floats: "both"

color set the foreground color of an element

color name: "blue", "red"

hex color spec: "0000ff" "ff0000"

float allow an element to be displayed in a variable position possibly interleaved with other elements

allow element to float on left: "left"

allow element to float on right: "right"

put element where it appears in HTML: "none"

font-family set the family of the font Always give choices: "Arial, Helvetica, sans-serif", "Times, serif"
font-size set the size of the font

relative: "smaller","larger"

less relative: "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large"

absolute: "2em", "2pt", "2mm"

percentage relative to parent element font size: "80%"

font-style set the font style "normal", "italic", "oblique"
font-variant set variations on the font "normal", "small-caps"
font-weight set 'boldness' of font

text specification: "normal", "bold"

relative: "bolder", "lighter"

numeric: "100", "200", ..., "900"

height set the height of an element "auto"; or a length: "2in", "2cm"
letter-spacing specify spacing between letters "normal"; or a length: "2pt", "2mm"
line-height set the height of a line of text

"normal"; or a number "8", "10". Interpretation of the number varies

length: "2cm", "2ex"

percentage relative to parent element size: "80%"

list-style-image set an image to be the "bullet" in an unordered list. "none"; or a url: "url("
list-style-type set the bullet style or numbering scheme for a list

bullet styles: "none", "disc", "circle", "square"

numbering scheme: "lower-roman", "upper-roman", "lower-alpha", "upper-alpha"

margin set the margin for an element

length: "2pt", "2mm", "2em"

percentage of closest ancestor: "10%"





as with margin, but with finer control  
padding set padding between text and edge of an element

length: "2pt", "2mm", "2em"

percentage of closest ancestor: "10%"





as with padding, but with finer control  
text-align set horizontal alignment of text elements "left", "center", "right", "justify"
text-decoration set special markings on text "none", "underline", "overline", "line-through", "blink"
text-indent set indentation of the first line of a text element

length: "2mm", "2em", "2pt"

percentage of parent element width: "5%"

text-transform set case of text "none", "capitalize", "uppercase", "lowercase"
display specify spacing or lack thereof around text "inline", "block"
vertical-align set the alignment of the baseline of an element with respect to its line-height; think subscripts...

text: "baseline", "sub", "super", "top", "text-top", "middle", "bottom", "text-bottom"

percentage of line-height of element: "10%"

white-space how is white space to be treated; reduce to one space, respect spaces...?

reduce spaces to one: "normal"

use all spaces in HTML code: "pre"

don't wrap lines: "nowrap"

width set width of element

length: "2in", "2cm"

percentage of parent element: "80%"

word-spacing modify spacing between words "normal"; or a length: "2mm", "2pt"

Notes on how to apply styles

You may apply the style attributes to various kinds of objects. The easiest way to use them is to change the definition of existing html tags.


The following changes the color of every H1 header to a blue, and centers it.

H1{color:#3366ff; text-align:center}

You may also define new classes of styles, which may be caused to apply to html tags as required.


The following changes the color only of html objects that have class "special":

.special {color: #990033}

Thus, a paragraph would look crimson if it used the following tags:

<p class="special">Blah blah blah</p>

A third way to apply attributes is to make a "pseudo-class" or a "pseudo-element" - a definition that applies only if an html element is in the given state.


To make html links appear black after they have been used, define

A:visited {color:black}

Other possible pseudo-classes include :hover, which allows attributes to be applied when a mouse hovers over a link, and :link, which applies to a link that has not been visited. Pseudo elements change attributes of text based on position. In particular, :first-line allows you to specify attributes to apply only to the first line of a paragraph, and :first-letter allows changes only to the first letter of a paragraph.

You can mix and match these methods. Following are all acceptable ways to specify formatting attributes.

P {color:green}



Assignment C is posted.

The test solution is available.

Department of Mathematics, PO Box 643113, Neill Hall 103, Washington State University, Pullman WA 99164-3113, 509-335-3926, Contact Us
Copyright © 1996-2015 Kevin Cooper