CSS

This page contains information and examples on stylization using cascading style sheets

Resources

Validator: http://jigsaw.w3.org/css-validator

Box Model

cssbox

CSS Properties

Content of CSS property list from www.w3schools.com embedded using iframe

Selectors

  • ELEMENTNAME {PROPERTY1:VALUE1;}
  • ELEMENTNAME#IDNAME {PROPERTY1:VALUE1;}
  • .CLASSATTRIBUTENAME | div.CLASSATTRIBUTENAME {PROPERTY1:VALUE1;}
  • ELEMENTNAME1 ELEMENTNAME2 {PROPERTY1:VALUE1;}
  • ELEMENTNAME1+ELEMENTNAME2 {PROPERTY1:VALUE1;}
  • ELEMENTNAME [ATTRIBUTENAME] {PROPERTY1:VALUE1;}
  • pseudoclasses | pseudoelements

Code Examples

Two columns

<?xml version="1.0" encoding="ENCODING"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="ENCODING" /> 
    <title>Two columns layout</title>
    <style>
    body {
      background: white;
      font-family: sans-serif;
      margin: 0;
      padding 0;
    }

    h1 {
         display: inline;
     margin: 0;
     font-weight: normal;
    }

    div#container {
     position: relative;
     min-height: 400px;
     border: 1px solid gray;
     max-width: 1000px;
     min-width: 750px;
     margin: auto;
    }

    div#first-column {
          display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      border: 1px solid gray;
      width: 200px;
      margin: 3px;
    }

    div#first-column {
     left: 0;
    }

    div#second-column {
         display: block;
     margin: 3px 3px 3px 208px;
     border: 1px solid gray;
     min-height: 392px;
    }

    div#header, div#footer {
          display: block;
      padding: 3px;
      border: 1px solid gray;
      max-width: 994px;
      min-width: 744px;
      margin: auto;
    }

    div#header {
     border-bottom: none;
    }

    div#footer {
     border-top: none;
    }     
    </style>
  </head>
  <body>
    <div id='header'>
      <h1>HEADER</h1>
    </div>
    <div id='container'>
      <div id='first-column'>
        FIRST COLUMN TEXT
      </div>
      <div id='second-column'>
        SECOND COLUMN TEXT
      </div>
    </div>
    <div id='footer'>
      <h1>FOOTER</h1>
    </div>
   </body>
</html>

Three columns

<?xml version="1.0" encoding="ENCODING"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="ENCODING" /> 
    <title>Three columns layout</title>
    <style>
    body {
      background: white;
      font-family: sans-serif;
      margin: 0;
      padding 0;
    }

    h1 {
         display: inline;
     margin: 0;
     font-weight: normal;
    }

    div#container {
     position: relative;
     min-height: 400px;
     border: 1px solid gray;
     max-width: 1000px;
     min-width: 750px;
     margin: auto;
    }

    div#first-column, div#third-column {
          display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      border: 1px solid gray;
      width: 200px;
      margin: 3px;
    }

    div#first-column {
     left: 0;
    }

    div#third-column {
     right: 0;
    }

    div#second-column {
         display: block;
     margin: 3px 208px 3px 208px;
     border: 1px solid gray;
     min-height: 392px;
    }

    div#header, div#footer {
          display: block;
      padding: 3px;
      border: 1px solid gray;
      max-width: 994px;
      min-width: 744px;
      margin: auto;
    }

    div#header {
     border-bottom: none;
    }

    div#footer {
     border-top: none;
    }     
    </style>
  </head>
  <body>
    <div id='header'>
      <h1>HEADER</h1>
    </div>
    <div id='container'>
      <div id='first-column'>
        FIRST COLUMN TEXT
      </div>
      <div id='second-column'>
        SECOND COLUMN TEXT
      </div>
      <div id='third-column'>
        THIRD COLUMN TEXT
      </div>
    </div>
    <div id='footer'>
      <h1>FOOTER</h1>
    </div>
   </body>
</html>

Liquid Three Columns

<?xml version="1.0" encoding="ENCODING"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="ENCODING" /> 
    <title>Liquid three columns layout</title>
    <style>
    body {
      background: white;
      font-family: sans-serif;
      margin: 0;
      padding 0;
    }

    h1 {
     margin: 0;
     font-weight: normal;
    }

    div#container {
     position: relative;
     min-height: 400px;
     border: 1px solid gray;
     max-width: 1000px;
     min-width: 750px;
     margin: auto;
    }

    div#first-column, div#third-column {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 20%;
    }

        div#first-column-inner, div#third-column-inner {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          border: 1px solid grey;
          margin: 3px;
        }

    div#first-column {
     left: 0;
    }

    div#third-column {
     right: 0;
    }

    div#second-column {
     margin: 3px 20% 3px 20%;
     border: 1px solid gray;
     min-height: 392px;
    }

    div#header, div#footer {
      padding: 3px;
      border: 1px solid gray;
      max-width: 994px;
      min-width: 744px;
      margin: auto;
    }

    div#header {
     border-bottom: none;
    }

    div#footer {
     border-top: none;
    }     
    </style>
  </head>
  <body>
    <div id='header'>
      <h1>HEADER</h1>
    </div>
    <div id='container'>
      <div id='first-column'>
        <div id='first-column-inner'>
           FIRST COLUMN TEXT
        </div>
      </div>
      <div id='second-column'>
        SECOND COLUMN TEXT
      </div>
      <div id='third-column'>
        <div id='third-column-inner'>
          THIRD COLUMN TEXT
        </div> 
      </div>
    </div>
    <div id='footer'>
      <h1>FOOTER</h1>
    </div>
   </body>
</html>

Float Three columns

<?xml version="1.0" encoding="ENCODING"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="ENCODING" /> 
    <title>Float three columns layout</title>
    <style>
    body {
      background: white;
      font-family: sans-serif;
      margin: 0;
      padding 0;
    }

    h1 {
     margin: 0;
     font-weight: normal;
    }

    div#container {
     min-height: 400px;
     border: 1px solid gray;
     max-width: 1002px;
     min-width: 750px;
     margin: auto;
    }

    div#first-column, div#third-column {
      width: 200px;
          border: 1px solid gray;
      min-height: 392px;
    }

    div#first-column {
          float: left;
          margin-left: -205px;
    }

    div#third-column {
     float: right;
         margin-right: -205px;
    }

        div#content {
         margin: 3px 208px 3px 208px;
        }

    div#second-column {
     border: 1px solid gray;
     min-height: 392px;
    }

    div#header, div#footer {
      padding: 3px;
      border: 1px solid gray;
      max-width: 994px;
      min-width: 744px;
      margin: auto;
    }

    div#header {
     border-bottom: none;
    }

    div#footer {
     border-top: none;
         clear: both;
    }     
    </style>
  </head>
  <body>
    <div id='header'>
      <h1>HEADER</h1>
    </div>
    <div id='container'>
      <div id='content'>
        <div id='first-column'>
          FIRST COLUMN TEXT
        </div>
        <div id='third-column'>
          THIRD COLUMN TEXT
        </div>
        <div id='second-column'>
          SECOND COLUMN TEXT
        </div>
      </div>
    </div>
    <div id='footer'>
      <h1>FOOTER</h1>
    </div>
   </body>
</html>

Tabular style

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="tabularStyle.css" ?>
<page>
  <table>
    <tablerow>
      <tablecell1>ONE</tablecell1>
      <tablecell2>TWO</tablecell2>
      <tablecell3>THREE</tablecell3>
    </tablerow>
    <tablerow>
      <tablecell1>FOUR</tablecell1>
      <tablecell2>FIVE</tablecell2>
      <tablecell3>SIX</tablecell3>
    </tablerow>
   </table>
</page>

page {
  display:block;
}

table {
  display:table;
  padding:20px;
}

tablerow {
  display:table-row;
}

tablecell1, tablecell2, tablecell3 {
   display: table-cell;
   padding: 10px;
   border: 1px solid gray;
}

List style

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="listStyle.css" ?>
<page>
   <list>
     <bulletpoint>ITEM ONE</bulletpoint>
     <bulletpoint>ITEM TWO</bulletpoint>
     <bulletpoint>ITEM THREE</bulletpoint>
     <list>
        <bulletpoint>ITEM THREE A</bulletpoint>
        <bulletpoint>ITEM THREE B</bulletpoint>
     </list>
   </list>
</page>

list {
  display:block;
  padding-left:20px;
}

bulletpoint {
  display:block;
}

bulletpoint:before {
  content:"+ ";
}

Attribute style

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="attributeStyle.css" ?>
<page>
  <title author="AUTHOR">TITLE</title>
</page>

title:after {
  display:block;
  content:"Author is: " attr(author);
}
Page tags: css xml
page_revision: 35, last_edited: 1255866483|%e %b %Y, %H:%M %Z (%O ago)
EditTags History Files Print Site tools+ Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License