CS110 CSS Reference

This page is a condensation and re-formatting of the CSS reference information at http://www.w3schools.com/css/css_reference.asp. It focuses on the CSS properties used in CS110, and it is formatted for compact printing. If you are working on the web, you should instead use their web site. Their site is in alphabetical order; this reference has been re-organized to group related properties.

The links in the "Property" column point to more useful information about the specific property.

Box Model: Margin, Border, Padding

Margin

Property Description Values
margin A shorthand property for setting the margin properties in one declaration margin-top, margin-right, margin-bottom, margin-left
margin-bottom, margin-top, margin-left, margin-right Sets the bottom/top/left/right margin of an element auto, length, %

Border

Property Description Values
border A shorthand property for setting all of the properties for the four borders in one declaration border-width, border-style, border-color
border-color Sets the color of the four borders, can have from one to four colors color
border-style Sets the style of the four borders, can have from one to four styles none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-width A shorthand property for setting the width of the four borders in one declaration, such a 2px solid red Can have from one to four values thin, medium, thick, length
border-bottom border-top, border-left, border-right A shorthand property for setting all of the properties for the bottom/top/left/right border in one declaration border-bottom-width, border-style, border-color
border-bottom-color
border-top/left/right-color		 Sets just the color of just the bottom/top/left/right border border-color
border-bottom-style
border-top/left/right-style		 Sets just the style of just the bottom/top/left/right border border-style
border-bottom-width,
border-top/left/right-width		 Sets just the width of just the bottom/top/left/right border thin, medium, thick, length

Padding

Property Description Values
padding A shorthand property for setting all of  the padding properties in one declaration padding-top, padding-right, padding-bottom, padding-left
padding-bottom, padding-top, padding-left, padding-right Sets the bottom/top/left/right padding of an element length, %

Positioning

Property Description Values
clear Sets the sides of an element where other floating elements are not allowed left, right, both, none
display Sets how/if an element is displayed none, inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
float Removes elt from the flow and sets where it will appear in its container. May float outside its containing elt, unless a later elt in the same container has the clear property or if the container is itself floated. left, right, none
position Specifies placement of an element:
  • Static is the default, using the flow.
  • relative moves elt relative to its normal placement.
  • absolute removes elt from the flow and places it with respect to the first parent that isn't static, or the body if there isn't one. Placement is done with left, top, right and bottom.
  • fixed positions an element relative to the browser window. Placement is done with left, top, right and bottom.
static, relative, absolute, fixed
top Sets how far the top edge of an element is above/below the top edge of the parent element. Used with absolute, relative and and fixed positioning; ignored for static auto, %, length
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element auto, %, length
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element. auto, %, length
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element auto, %, length
visibility Sets if an element should be visible or invisible visible, hidden, collapse
cursor Specifies the type of cursor to be displayed url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
clip Sets the shape of an element. The element is clipped into this shape, and displayed shape, auto
overflow, Sets what happens if the content of an element overflow its area visible, hidden, scroll, auto
vertical-align Sets the vertical alignment of an element baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, %
z-index Sets the stack order of an element auto, number

Text and Font

Text

Property Description Values
color Sets the color of text in the elt color
direction Sets the text direction ltr, rtl
letter-spacing Increase or decrease the space between characters normal, length
text-align Aligns the text in an element left, right, center, justify
text-decoration Adds decoration to text none, underline, overline, line-through, blink
text-indent Indents the first line of text in an element length, %
text-shadow   none, color, length
text-transform Controls the letters in an element none, capitalize, uppercase, lowercase
unicode-bidi   normal, embed, bidi-override
white-space Sets how white space inside an element is handled normal, pre, nowrap
word-spacing Increase or decrease the space between words normal, length

Font

Property Description Values
font A shorthand property for setting all of the properties for a font in one declaration, such as italic normal bold 12pt Verdana. Size and family are required; the rest can default. font-style, font-variant, font-weight, font-size/line-height, font-family,
caption, icon, menu, message-box, small-caption, status-bar
font-family, A prioritized list of font family names and/or generic family names for an element. Names that contain spaces should be in quotation marks. family-name, generic-family
font-size Sets the size of a font xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %
font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font none, number
font-stretch Condenses or expands the current font-family normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
font-style, Sets the style of the font normal, italic, oblique
font-variant, Displays text in a small-caps font or a normal font normal, small-caps
font-weight, Sets the weight of a font normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

Lists and Tables

List and Marker

Property Description Values
list-style A shorthand property for setting all of the properties for a list in one declaration list-style-type, list-style-position, list-style-image
list-style-image Sets an image as the list-item marker none, url
list-style-position Sets where the list-item marker is placed in the list inside, outside
list-style-type Sets the type of the list-item marker none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
marker-offset   auto, length

Table

Property Description Values
border-collapse Sets the border model of a table collapse, separate
border-spacing Sets the distance between the borders of adjacent cells (only for the "separated borders" model) length length
caption-side Sets the position of the caption according to the table top, bottom, left, right
empty-cells Sets whether cells with no visible content should have borders or not (only for the "separated borders" model)  show, hide
table-layout Sets the algorithm used to lay out the table auto, fixed

Miscellaneous

Background

Property Description Values
background A shorthand property for setting all background properties in one declaration background-color, background-image, background-repeat background-attachment background-position
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll, fixed
background-color Sets the background color of an element color-rgb, color-hex, color-name, transparent
background-image Sets an image as the background url, none
background-position Sets the starting position of a background image top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos
background-repeat Sets if/how a background image will be repeated repeat, repeat-x, repeat-y, no-repeat

Dimension

Property Description Values
height Sets the height of an element auto, length, %
line-height Sets the distance between lines normal, number, length, %
max-height Sets the maximum height of an element none, length, %
max-width Sets the maximum width of an element none, length, %
min-height Sets the minimum height of an element length, %
min-width Sets the minimum width of an element length, %
width Sets the width of an element auto, %, length  

Generated Content

Property Description Values
content Generates content in a document. Used with the :before and :after pseudo-elements string, url, counter(name), counter(name, list-style-type), counters(name, string), counters(name, string, list-style-type), attr(X), open-quote, close-quote, no-open-quote, no-close-quote
counter-increment Sets how much the counter increments on each occurrence of a selector  none, identifier number
counter-reset Sets the value the counter is set to on each occurrence of a selector none, identifier number
quotes Sets the type of quotation marks none, string string

Outlines

Property Description Values
outline A shorthand property for setting all the outline properties in one declaration outline-color, outline-style, outline-width
outline-color Sets the color of the outline around an element color, invert
outline-style Sets the style of the outline around an element none, dotted, dashed, solid, double, groove, ridge, inset, outset
outline-width Sets the width of the outline around an element thin, medium, thick, length

Pseudo-classes

Pseudo-class Purpose
:active Adds special style to an activated element
:focus Adds special style to an element while the element has focus
:hover Adds special style to an element when you mouse over  it
:link Adds special style to an unvisited link
:visited Adds special style to a visited link
:first-child Adds special style to an element that is the first child of some other element
:lang Allows the author to specify a language to use in a specified element

Pseudo-elements

Pseudo-element Purpose
:first-letter Adds special style to the first letter of a text
:first-line Adds special style to the first line of a text
:before Inserts some content before an element
:after Inserts some content after an element

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2006 by Refsnes Data. All Rights Reserved.

Valid HTML 4.01 Strict Valid CSS Conforms to W3C-WAI level A