CSS Cheat Sheet

This is a summarized form of the CSS Tutorial.

For reference this is the CSS2 Specification .

What is CSS

  • CSS stands for Cascading Style Sheets.
  • Styles define how to display HTML elements. Style sheets are collections of styles.
  • Multiple style sheets will cascade into a single style definition.
  • There are 3 ways to specify styles (decreasing priority):
    1. inline as an element style attribute
       <p style="color: sienna>text</p>
    2. in an internal style sheet in the head
       <head> <style type="text/css">
      <!--
      hr {color: sienna}
      -->
      </style> </head>
    3. in an external style sheet in a css file
      <link rel="stylesheet" type="text/css"
      href="style.css" /> 

CSS Syntax

CSS syntax is made up of three parts - selector {property: value}.

  • Multiple property-value pairs may be separated by semi-colons.
  • Multiple selectors must be separated by commas
  • Values must be quoted if they are multiple words
  • A simple example
    h1,h2,h3 {
    text-align: center;
    color: black;
    font-family: "sans serif" } 
  • Classes allow groups of elements to share formatting e.g.
    p.right {text-align: right}
    .blue {color: blue}
    <p class="right blue">right-aligned blue text</p> 
  • Styles can also match on attribute values or id e.g.
    input[type="text"] {background-color: blue}
    #id {background-color: blue}
    p#id {background-color: blue} 
  • CSS uses C-style comments - /* comment */ .

CSS Background/Text Properties

  • Background properties examples
    background-color: black;
    background-image:  url('bg.jpg');
    background-repeat: repeat-[x|y]/no-repeat/repeat;
    background-attachment: fixed
    background-position: center/30% 20%/50px 100px;
    background: blue url('bg.gif') no-repeat fixed center; 
  • Text properties examples
    color: #00ff00/green/rgb(0,255,0) ; text-shadow:blue;
    text-align: left/right/center/justify ; text-indent: 1cm;
    letter-spacing: 0.5cm/-3px ; line-height: 200%;
    white-space: nowrap ; word-spacing: 30px
    text-decoration: overline/line-through/underline/blink/none
    text-transform: uppercase/lowercase/capitalize
  • Font properties examples
    font-family: times/sans-serif ; font-size: 130%
    font-size-adjust: 0.60 ; font-variant: small-caps
    font-style: italic/oblique ; font-stretch: wider
    font-weight: bold/900
    font: italic small-caps 900 12px arial
    font: caption/icon/menu/message-box/small-caption/status-bar 

CSS Border/List Properties

  • Border properties examples (btlr=bottom/top/left/right. An outline occurs outside of the border.
    border-style: medium/solid/double/groove/dotted/
      dashed/inset/outset;
    border-btlr: width style color ; border-btlr-style
    border-width:5px ; border-btlr-width: thick
    border-color: color x 4; border-btlr-color
    outline-color/style/width ; outline:color style width
  • A margin describes space around the element. Padding defines the space between border and content.
    margin: width x 4 (trbl); margin-btlr
    padding: width x 4 (trbl); padding-btlr
  • List properties examples
    list-style-type: disc/circle/square/none
    list-style-type: lower/upper-roman/alpha / decimal
    list-style-image: url('a.gif')
    list-style-position: inside/outside
    list-style: type position image
  • Table properties examples
    table-layout: automatic/fixed;
    border-collapse:collapse/separate; empty-cells:show/hide
    border-spacing: width x 2;caption-side: btlr

Sizing and Positioning CSS Properties

  • Size properties examples
    height/width: auto/50%/100px
    min/max-height/width:none/50%/100px
    line-height: normal/100px/1/50%
  • Position properties
    display: inline/none/block (lots of others)
    float: btlr ; 
    position: relative(to normal)/absolute(rel to block)
      /fixed(rel to window, doesn't move)/static(normal) ;
    bottom/top/left/right: +/-100px/width
    vertical-align:top/bottom/text-top/text-bot/sub/super
  • Visibility properties
    visibility:visible/hidden/collapse (for table elems)
    clear:left/right/both/none (where floats aren't allowed)
    clip: rect(10px, 5px, 10px, 5px)
    overflow:auto/scroll/visible/hidden
    z-index: 1 (0 is normal) 

Advanced CSS

  • Pseudo classes can restrict the selector. a:hover and a:active may have to come after a:link and a:visited.
    selector.class:pseudo-class {property: value}
    a:link {color: #FF0000}   (unvisited link)
    a:visited {color: #00FF00}  (visited link)
    a:hover {color: blue}  (mouse-over element)
    a:active {color: #0000FF} (selected element)
    a:focus {color: #0000FF} (focused element - not in IE)
    p:first-child {font-weight:bold}
    p > em:first-child { } ; p:first-child em { }
  • Pseudo elements are dynamic elements
    p:first-letter {} ; p:first-line {} ;
    h1:before {} ; h1:after {} ;
  • @media allows different styles for different media. Media examples include screen, print, handheld, projection, tty, tv, aural, braille.
     @media screen,print { p {color:blue} }
  • Misc Properties
    opacity:0.4; (for firefox)
    filter:alpha(opacity=40) (for IE)
     
    onmouseover="this.style.opacity=1;
      this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;
      this.filters.alpha.opacity=40"
     
    cursor:deflt/cursor/pointer/move/wait/help/text/crosshair
Recent changes RSS feed Creative Commons License Donate Minima Template by Wikidesign Driven by DokuWiki