Name: ________________________

CSS Properties

Please note that this page is intended to show the commonly-used (at least in CSCI 115) properties and values - not a comprehensive list.

"Initial" Properties

• text-align: left | right | center
• color: red | blue | yellow | grey | . . .
• background-color: red | blue | . . .
• border: 1px solid black (for example)

Specifying Colour (for both color and background-color properties)

• color: red | blue | . . .
  or color: #FF0080 (for example)
  or color: #CD0 (for example - short for #CCDD00)
  or color: hsl(0, 100%, 100%)

Font Properties

• font-style: normal | italic
• font-weight: normal | bold
• font-size: 1.2em | 120% | 24px
• or abbreviate the above properties to (for example)
  font: italic bold 1.2em Verdana, Arial, sans-serif
  (The order of the first 2 values does not matter - and one or both of them can be omitted.)
• generic font families: serif, sans-serif, monospace

Text Properties

• text-align: left | right | center
• text-decoration: none | underline

Padding and Margin Examples

• padding-left: 2em
• padding: 50px
• margin: 0px 100px 0px 50px
  (for top, right, bottom and left)
• padding: 0px 200px
  (for 0px top and bottom, and 200px left and right)

Border Properties and Examples

• border-style: none | solid | dotted | dashed
• border-width: 5px (for example)
• border-color: red
• border: 3px dotted blue
• border-bottom: 10px solid red
• border-top-style: dashed
• border-top-color: blue
• border-top-width: 3px
• border-width: 1px 10px 3px 10px
• border-style: dashed solid
• border-color: red blue

Positioning

• float: left | right | none
• clear: left | right | both | none
• position: relative | absolute | static | fixed
• top: 5px (for example)
• left: 100px | 25%
• z-index: 5 (for example) - higher numbers are on top

Background

• background-color: yellow (for example)

Miscellaneous

• overflow: visible | hidden | auto
• display: block | inline | inline-block | none
• visibility: visible | hidden
• opacity: 0.5 (for example) - 0 means completely transparent, 1 means opaque
• list-style-type: none
• box-sizing: content-box | border-box
• a:hover {...}
• li:first-child {...}