Cascading Style Sheets, Part 2

Markup

A form for lecture feedback will be available from the course web site. Please take two minutes to fill it out after you have seen the lecture.


February 16, 2011

Harvard University
Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu

Presentation - Cascading Style Sheets (CSS)

CSS

Block Model

Box Model Illustration from CSS:  The Definitive Guide by Eric Meyer

Image from Cascading Style Sheets: The Definitive Guide, 3rd ed by Eric Meyer, published by O'Reilly


Firebug visualization of block model (Layout):
Firebug Block Model

Float

Float takes the block out of the flow of the containing block and moves it (right or left) within the containing block.

Example 6.1 - float: none; - View example by itself (Without Styles)

<p><img src="images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.  Suspendisse mollis leo nec diam. Vestibulum
  pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>

In style element (<style type="text/css">) within head element:

img { 
  float: none;
  border: thin dotted black; 
  padding: 5px;
  }
 

float none

Example 6.2 - float: right; - View example by itself (Without Styles)

<p><img src="images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.  Suspendisse mollis leo nec diam. Vestibulum
  pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>

In style element (<style type="text/css">) within head element:

img { 
  float: right;
  clear: none;
  border: thin dotted black; 
  padding: 5px;
  }
 

float none

Float

Float: right

Example 6.3 - float: right; - View example by itself (Without Styles)

<div>
  <div class="about">Drafted by Thomas Jefferson between June 11 and June 28, 1776, the
    Declaration of Independence is at once the nation's most cherished symbol of liberty and
    Jefferson's most enduring monument.</div>
  <div> We hold these truths to be self-evident, that all men are created equal, that they are
    endowed by their Creator with certain unalienable Rights, that among these are Life,
    Liberty, and the pursuit of Happiness. That to secure these rights, Governments are
    instituted among Men, deriving their just powers from the consent of the governed. That
    whenever any Form of Government becomes destructive of these ends, it is the Right of the
    People to alter or to abolish it, and to institute new Government, laying its foundation on
    such principles and organizing its powers in such form, as to them shall seem most likely to
    effect their Safety and Happiness. </div>
</div>

In style element (<style type="text/css">) within head element:

.about {
        float: right;
        width: 33%; 
        text-align: left; 
        font-size: 0.75em;  
        color: #006600;      
        background: #fefecd;      
        padding: 0.5em;      
        margin: 0.75em;      
        border-width: thin;      
        border-style: dotted;
        border-color: #900;
       }
body { 
        font-size: large; 
        line-height: 1.5;
     }
 

css float

Float: left

Example 6.4 - float: left; - View example by itself (Without Styles)

<div>
  <div class="about">Drafted by Thomas Jefferson between June 11 and June 28, 1776, the
    Declaration of Independence is at once the nation's most cherished symbol of liberty and
    Jefferson's most enduring monument.</div>
  <div> We hold these truths to be self-evident, that all men are created equal, that they are
    endowed by their Creator with certain unalienable Rights, that among these are Life,
    Liberty, and the pursuit of Happiness. That to secure these rights, Governments are
    instituted among Men, deriving their just powers from the consent of the governed. That
    whenever any Form of Government becomes destructive of these ends, it is the Right of the
    People to alter or to abolish it, and to institute new Government, laying its foundation on
    such principles and organizing its powers in such form, as to them shall seem most likely to
    effect their Safety and Happiness. </div>
</div>

In style element (<style type="text/css">) within head element:

.about {
        float: left;
        width: 33%; 
        text-align: left; 
        font-size: 0.75em;  
        color: #006600;      
        background: #fefecd;      
        padding: 0.5em;      
        margin: 0.75em;      
        border-width: thin;      
        border-style: dotted;
        border-color: #900;
       }
body { 
        font-size: large; 
        line-height: 1.5;
     }
 

css float

Float and Clear

The clear property defines the top clearance to push the block past a previous float.

Example 6.5 - float: right; clear: none; - View example by itself (Without Styles)

<p><img src="images/777-t-1.jpg" alt="777"/>
   <img src="images/777-t-2.jpg" alt="777"/>
   <img src="images/777-t-3.jpg" alt="777"/>
  Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt
  ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante
  est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec
  diam. pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh. Proin sollicitudin ante vel
  eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec
  tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede
  non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna.
  Maecenas aliquam arcu ac turpis. </p>

In style element (<style type="text/css">) within head element:

img { 
  float: right;
  clear: none;
  border: thin dotted black; 
  padding: 5px;
  margin: 5px;
  }
p {line-height: 1.5em;}  
 

clear

float: right; clear: right

Example 6.6 - float: right; clear: right; - View example by itself (Without Styles)

<p><img src="images/777-t-1.jpg" alt="777"/>
   <img src="images/777-t-2.jpg" alt="777"/>
   <img src="images/777-t-3.jpg" alt="777"/>
  Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt
  ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante
  est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec
  diam. pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh. Proin sollicitudin ante vel
  eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec
  tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede
  non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna.
  Maecenas aliquam arcu ac turpis. </p>

In style element (<style type="text/css">) within head element:

img { 
  float: right;
  clear: right;
  border: thin dotted black; 
  padding: 5px;
  margin: 5px;
  }
p {line-height: 1.5em;}  
 

clear

float: right; clear: left

Example 6.7 - float: right; clear: left; - View example by itself (Without Styles)


<p><img src="images/777-t-1.jpg" alt="777"/>
   <img src="images/777-t-2.jpg" alt="777"/>
   <img src="images/777-t-3.jpg" alt="777"/>
  Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt
  ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante
  est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec
  diam. pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh. Proin sollicitudin ante vel
  eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec
  tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede
  non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna.
  Maecenas aliquam arcu ac turpis. </p>

In style element (<style type="text/css">) within head element:

img { 
  float: right;
  clear: left;
  border: thin dotted black; 
  padding: 5px;
  margin: 5px;
  }
p {line-height: 1.5em;}  
 

Float and Clear

The clear property defines the sides of a block where floated blocks cannot occur.

Example 6.8 - clear: none; - View example by itself (Without Styles)

<p><img src="images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.</p>
<p><img src="images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum
  pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>
<p><img src="images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc
  tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor
  mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non
  convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas
  aliquam arcu ac turpis. </p>

In style element (<style type="text/css">) within head element:

p { 
  clear: none; 
  line-height: 1.5em;
  border: thin solid red;
}
img { 
  float: right;
  border: thin dotted black; 
  padding: 5px;
}
 

clear

Example 6.9 - clear: right; - View example by itself (Without Styles)

<p><img src="images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.</p>
<p><img src="images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum
  pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>
<p><img src="images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc
  tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor
  mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non
  convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas
  aliquam arcu ac turpis. </p>

In style element (<style type="text/css">) within head element:

p { 
  clear: right; 
  line-height: 1.5em;
  border: thin solid red;
}
img { 
  float: right;
  border: thin dotted black; 
  padding: 5px;
}
 

clear

How to get image to be contained in box?

Or, how to avoid something like:
float and clear

Example 6.10 - clear: right; - View example by itself (Without Styles)

<div class="airplane"><img src="images/777-t2-1.png" alt="777"/>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.<hr class="opaque"/></div>
<div class="airplane"><img src="images/777-t2-2.png" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum
  pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan
  sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec
  fringilla. Duis adipiscing diam at enim. Vestibulum nibh.<hr class="opaque"/></div>
<div class="airplane"><img src="images/777-t2-3.png" alt="777"/>Proin sollicitudin ante vel eros. Nunc
  tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor
  mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non
  convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas
  aliquam arcu ac turpis. <hr class="opaque"/></div>

In style element (<style type="text/css">) within head element:

div.airplane { 
  clear: right; 
  line-height: 1.5em;
  padding: 1em;
  margin: 1em;
  border: medium solid blue;
}
.airplane img { 
  float: right;
  border: thin dotted black; 
  padding: 5px;
}
hr.opaque { clear: both; padding: 0; margin: 0; visibility: hidden;}
 

clear

Float Opposite

Use float: left and float: right for content to be on opposite sides.

Example 6.11 - float left and right - View example by itself (Without Styles)

<p>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.</p>
<div class="footer">
  <p class="course">
    <a href="http://cscie12.dce.harvard.edu/" shape="rect">CSCI E-12 Home</a> |
    <a href="mailto:cscie12@dce.harvard.edu" shape="rect">cscie12@dce.harvard.edu</a>
  </p>
  <p class="global">
    <a href="http://www.harvard.edu/" shape="rect">Harvard University</a> |
    <a href="http://www.extension.harvard.edu/" shape="rect">Extension School</a>
  </p>
</div>

In style element (<style type="text/css">) within head element:

div.footer { 
  background-color: #fcf;
  border-top: thin solid #333; 
}
div.footer p.course { float: left; }
div.footer p.global { float: right; }
div.footer p {
  padding: 0.25em 2em 0.25em 2em;
  font-size: small;
}
div.footer a:link, 
div.footer a:visited, 
div.footer a:hover, 
div.footer a:active {
  text-decoration: none;
  color: navy;
  font-weight: bold;
  padding: 0.25em; 
}
div.footer a:hover {
  color: #ccf;
  background-color: navy;
}
 

float opposite

The background color of the parent div did not display. The content of this div has been "floated," therefore it has been removed from the calculation of its box model. The parent div size is null. Solution: float the parent div. Recall that a float is always with respect to the containing box.

Example 6.12 - float left and right and parent div - View example by itself (Without Styles)
<p>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.</p>
<div class="footer">
  <p class="course">
    <a href="http://cscie12.dce.harvard.edu/" shape="rect">CSCI E-12 Home</a> |
    <a href="mailto:cscie12@dce.harvard.edu" shape="rect">cscie12@dce.harvard.edu</a>
  </p>
  <p class="global">
    <a href="http://www.harvard.edu/" shape="rect">Harvard University</a> |
    <a href="http://www.extension.harvard.edu/" shape="rect">Extension School</a>
  </p>
</div>

In style element (<style type="text/css">) within head element:

div.footer {
    background-color: #fcf; 
    float: left;
    width: 100%;
    border-top: thin solid #333;     
}
div.footer p.course { float: right; }
div.footer p.global { float: left; }
div.footer p {
  padding: 0.25em 2em 0.25em 2em;
  font-size: small;
}
div.footer a:link, 
div.footer a:visited, 
div.footer a:hover, 
div.footer a:active {
  text-decoration: none;
  color: navy;
  font-weight: bold;
  padding: 0.25em; 
}
div.footer a:hover {
  color: #ccf;
  background-color: navy;
}
 

float opposite

Float and Margins

We want to float one element left, the other right. We want content to be between the floated elements.

Example 6.13 - float and margin - View example by itself (Without Styles)

     <p class="first">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at
        sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin.
        Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque
        mauris turpis eu purus.</p>
      <p class="second">Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla
        fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede
        lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing
        diam at enim. Vestibulum nibh.</p>
      <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis
        volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id
        nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit
        ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis.
        Ut pellentesque porta turpis. n vitae erat. Nam lacinia imperdiet lorem. Aliquam
        ullamcorper ultrices dui.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. Ut
        ipsum. In hac habitasse platea dictumst. </p>

In style element (<style type="text/css">) within head element:

p.first { 
  float: left; 
  width: 30%;
  font-size: x-small;
}
p.second { 
  float: right; 
  width: 30%;
  font-size: x-small;
}
 

float margin

Make the middle content not wrap around the floated contents (set margin for the middle content).

Example 6.14 - float and margin to achieve a column effect - View example by itself (Without Styles)

     <p class="first">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at
        sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin.
        Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque
        mauris turpis eu purus.</p>
      <p class="second">Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla
        fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede
        lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing
        diam at enim. Vestibulum nibh.</p>
      <p class="third">Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam
        non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus
        feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis
        commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas
        aliquam arcu ac turpis. Ut pellentesque porta turpis.n vitae erat. Nam lacinia
        imperdiet lorem. Aliquam ullamcorper ultrices dui.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. Ut
        ipsum. In hac habitasse platea dictumst. </p>

In style element (<style type="text/css">) within head element:

p.first { 
  float: left; 
  width: 30%;
  font-size: x-small;
}
p.second { 
  float: right; 
  width: 30%;
  font-size: x-small;
}
p.third {
  margin-left: 35%;
  margin-right: 35%; 
}
 

float margin

Float and a Flexible "Grid"

Here each "program" is wrapped in a div or a p, which contains a thumbnail and a caption. The div (or p) elements are sized (height and width set) and floated. The result is a table-like layout that is flexible for varying widths of the browser window.

Harvard at Home Programs

float float

Congress

float float

Solar System

>markup

Float and a Flexible "Grid"

It is important to set height and width !

Example 6.15 - Making a grid: setting width but not height - View example by itself (Without Styles)

<div id="gallery">
  <p><img src="images/777-t-1.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-2.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-3.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-4.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-5.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-6.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</p>
  <p><img src="images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</p>
  <p><img src="images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</p>
</div>    
    

In style element (<style type="text/css">) within head element:

#gallery p { 
  float: left;
  width: 150px;
  padding: 5px;
  border: thin dotted #ccc;
  margin: 5px; 
  text-align: center;
  font-size: x-small;
}
#gallery p img { padding-top: 5px; }
body { 
  font-family: arial,helvetica,sans-serif;
}
 

float

Example 6.16 - Making a grid: setting height and width - View example by itself (Without Styles)

<div id="gallery">
  <p><img src="images/777-t-1.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-2.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-3.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-4.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-5.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/777-t-6.jpg" alt="777"/><br/>Boeing 777</p>
  <p><img src="images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</p>
  <p><img src="images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</p>
  <p><img src="images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</p>
</div>    
    

In style element (<style type="text/css">) within head element:

#gallery p { 
  float: left;
  width: 150px;
  height: 150px;
  padding: 5px;
  border: thin dotted #ccc;
  margin: 5px; 
  text-align: center;
  font-size: x-small;
}
#gallery p img { padding-top: 5px; }
body { 
  font-family: arial,helvetica,sans-serif;
}
 

float

Lists

Ordered List

An ordered list:

Example 6.17 - Ordered List: upper-roman - View example by itself (Without Styles)

<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong>
<ol class="basketball">
  <li>Roy Williams</li>
  <li>Mark Few</li>
  <li>Jamie Dixon</li>
  <li>Bruce Pearl</li>
  <li>Bo Ryan</li>
  <li>Mike Krzyzewski</li>
  <li>John Calipari</li>  
  <li>Thad Matta</li>
  <li>Mark Fox</li>
  <li>Rick Pitino</li>
  <li>Jim Boeheim</li>
  <li>Bob Huggins</li>
  <li>Bill Self</li>
  <li>Rick Majerus</li>
  <li>Sean Miller</li>
</ol>

In style element (<style type="text/css">) within head element:

ol.basketball {
   list-style: upper-roman;
}
 

Lists with Image

And now, let's add a basketball icon as a list bullet (image is at images/basketball.gif, basketball

list

An unordered list controlled by CSS:

Example 6.18 - List with images as bullets - View example by itself (Without Styles)

<div class="basketball">
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong>
<ul class="basketball">
  <li>Roy Williams</li>
  <li>Mark Few</li>
  <li>Jamie Dixon</li>
  <li>Bruce Pearl</li>
  <li>Bo Ryan</li>
  <li>Mike Krzyzewski</li>
  <li>John Calipari</li>  
  <li>Thad Matta</li>
  <li>Mark Fox</li>
  <li>Rick Pitino</li>
  <li>Jim Boeheim</li>
  <li>Bob Huggins</li>
  <li>Bill Self</li>
  <li>Rick Majerus</li>
  <li>Sean Miller</li>
</ul>
</div>

In style element (<style type="text/css">) within head element:

ul.basketball {
    list-style-image: url(images/basketball.gif);
}
 

Doing this without CSS

How to accomplish this without CSS.

Example 6.19 - A bad way - View example by itself (Without Styles)

<p>Achieving the same effect using HTML and the IMG element (look at the source to see the difference between this and the CSS way):</p>
<div>
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><br/>
  <img src="images/basketball.gif" alt="*"/>Roy Williams<br/>
  <img src="images/basketball.gif" alt="*"/>Mark Few<br/>
  <img src="images/basketball.gif" alt="*"/>Jamie Dixon<br/>
  <img src="images/basketball.gif" alt="*"/>Bruce Pearl<br/>
  <img src="images/basketball.gif" alt="*"/>Bo Ryan<br/>
  <img src="images/basketball.gif" alt="*"/>Mike Krzyzewski<br/>
  <img src="images/basketball.gif" alt="*"/>John Calipari<br/>  
  <img src="images/basketball.gif" alt="*"/>Thad Matta<br/>
  <img src="images/basketball.gif" alt="*"/>Mark Fox<br/>
  <img src="images/basketball.gif" alt="*"/>Rick Pitino<br/>
  <img src="images/basketball.gif" alt="*"/>Jim Boeheim<br/>
  <img src="images/basketball.gif" alt="*"/>Bob Huggins<br/>
  <img src="images/basketball.gif" alt="*"/>Bill Self<br/>
  <img src="images/basketball.gif" alt="*"/>Rick Majerus<br/>
  <img src="images/basketball.gif" alt="*"/>Sean Miller<br/>
</div>

In style element (<style type="text/css">) within head element:

/* no css rules */
 
For the complete list: NCAA Men's Basketball Statistics

Display Property

Can use CSS to turn off display. This will be especially useful to manipulate CSS properties with JavaScript.

Example 6.20 - display: none; - View example by itself (Without Styles)

<ul>
  <li>American League
    <ul>
      <li id="ale">East
        <ul>
          <li>Baltimore</li>
          <li>Boston</li>
          <li>New York</li>
          <li>Toronto</li>
          <li>Tampa Bay</li>
        </ul> </li>
      <li id="alc">Central
        <ul>
          <li>Chicago</li>
          <li>Cleveland</li>
          <li>Detroit</li>
          <li>Kansas City</li>
          <li>Minnesota</li>
        </ul> </li>
      <li id="alw">West
        <ul>
          <li>Los Angeles</li>
          <li>Oakland</li>
          <li>Texas</li>
          <li>Seattle</li>
        </ul> </li>
    </ul> </li>
</ul>

In style element (<style type="text/css">) within head element:

#ale { display: none; }
#alw { display: none; }
* { font-family: arial,helvetica,sans-serif; }
 

display

Full list for the American League:
display

Visibility

Visibility controls whether or not an element is displayed. The element still takes up space in the block model.

Example 6.21 - visibility: hidden; - View example by itself (Without Styles)

<ul>
  <li>American League
    <ul>
      <li id="ale">East
        <ul>
          <li>Baltimore</li>
          <li>Boston</li>
          <li>New York</li>
          <li>Toronto</li>
          <li>Tampa Bay</li>
        </ul> </li>
      <li id="alc">Central
        <ul>
          <li>Chicago</li>
          <li>Cleveland</li>
          <li>Detroit</li>
          <li>Kansas City</li>
          <li>Minnesota</li>
        </ul> </li>
      <li id="alw">West
        <ul>
          <li>Los Angeles</li>
          <li>Oakland</li>
          <li>Texas</li>
          <li>Seattle</li>
        </ul> </li>
    </ul> </li>
</ul>

In style element (<style type="text/css">) within head element:

#ale { visibility: hidden; }
#alw { visibility: hidden; }
* { font-family: arial,helvetica,sans-serif; }
 

display

Full list for the American League:
display

Lists: Navigation and Content

Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content items, etc.) and CSS can style them as desired.

Some samples of lists in action:

The University of Kansas
University of Kansas page with lists highlighted

The White House
The White House page with lists highlighted

Harvard Summer School
Harvard Summer School page with lists highlighted

Lists and Navigation

Harvard Extension School
Harvard Extension School Navigation

Lists without "list-style"

ul { list-style: none; }

Default list style:
default list style

Example 6.22 - list-style: none; - View example by itself (Without Styles)

<ul id="conferences">
  <li>Big XII</li>
  <li>Ivy League</li>
  <li>Pac 10</li>
</ul>

In style element (<style type="text/css">) within head element:

ul#conferences {
  list-style: none;
}
 

Screenshot

Lists: Inline Tabs

Key points:

Example 6.23 - simple list - View example by itself
<ul>
  <li>Big XII</li>
  <li>Ivy League</li>
  <li>Pac 10</li>
</ul>
  • Big XII
  • Ivy League
  • Pac 10
 
Example 6.24 - inline list items - View example by itself (Without Styles)

<ul id="conferences">
  <li>Big XII</li>
  <li>Ivy League</li>
  <li>Pac 10</li>
</ul>

In style element (<style type="text/css">) within head element:

ul#conferences {
  list-style: none;
}
ul#conferences li {
  display: inline;
}
 

inline list items

Example 6.25 - Inline List Items - View example by itself (Without Styles)

<ul id="conferencenav">
  <li><a href="http://big12sports.collegesports.com/" shape="rect">Big XII</a></li>
  <li><a href="http://www.ivyleaguesports.com/" shape="rect">Ivy League</a></li>
  <li><a href="http://www.pac-10.org/" shape="rect">Pac 10</a></li>
</ul>

In head element:

<link rel="stylesheet" type="text/css" href="example25.css"/>

In example25.css

ul#conferencenav {
  list-style: none;
  padding-bottom: 0.5em;
  border-bottom: 2px solid black;
  font-weight: bold;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #990000;
}
ul#conferencenav li {
  display: inline;
  margin: 0;
}
ul#conferencenav a{
  padding: 0.5em 1em;
  margin-right: 0.25em;
  background-color: #dddd00;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  text-decoration: none;
 }
ul#conferencenav a:link,
ul#conferencenav a:visited {
     color: #990000;
}
ul#conferencenav a:hover {
     color: #dddd00;
     background-color: #990000;
}
 

list

Inspired by: CSS Cookbook by Christopher Schmitt

Lists as Navigation

Key points:

Default styling:
navigation lists

Note: "a" display property is set to "block". This makes the hyperlink active over the whole area, not just with the text.

Example 6.26 - lists as navigation - View example by itself (Without Styles)
<div id="navigation1">
<ul>
  <li><a href="http://www.baylor.edu/" shape="rect">Baylor</a></li>
  <li><a href="http://www.cu.edu/" shape="rect">Colorado</a></li>
  <li><a href="http://www.iastate.edu/" shape="rect">Iowa State</a></li>
  <li><a href="http://www.ku.edu/" shape="rect">Kansas</a></li>
  <li><a href="http://www.ksu.edu/" shape="rect">Kansas State</a></li>
  <li><a href="http://www.missouri.edu/" shape="rect">Missouri</a></li>
  <li><a href="http://www.unl.edu/" shape="rect">Nebraska</a></li>
  <li><a href="http://www.ou.edu/" shape="rect">Oklahoma</a></li>
  <li><a href="http://www.okstate.edu/" shape="rect">Oklahoma State</a></li>
  <li><a href="http://www.utexas.edu/" shape="rect">Texas</a></li>
  <li><a href="http://www.tamu.edu/" shape="rect">Texas A&M</a></li>
  <li><a href="http://www.ttu.edu/" shape="rect">Texas Tech</a></li>
</ul>
</div>

In head element:

<link rel="stylesheet" type="text/css" href="example26.css"/>

In example26.css

#navigation1 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 0.7em;
  width: 15em;
  border-right: 1px solid #333;
  margin-bottom: 1em;
  background-color: #ddd;
  color: #900;
}
#navigation1 ul { 
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigation1 ul li { 
  margin: 0;
  border-top: 1px solid #333;
}
#navigation1 ul li a {
  display: block;
  background-color: #ddd;
  border-top: 1px solid #333;
  border-left: 5px solid #333;
  text-decoration: none;
  padding: 2px 2px 2px 0.5em;
}
#navigation1 ul li a:link,
#navigation1 ul li a:visited  
{ color: #900; }
#navigation1 ul li a:hover {
     color: #fff;
     background-color: #900;}
 

navigation lists

Inspired by: CSS Cookbook by Christopher Schmitt

Lists as Navigation

Nested list styled as "clamshell" navigation.

  • styles for secondary nested lists (e.g. selector for ul ul a)
  • Example 6.27 - Nested lists for 'clamshell' navigation - View example by itself (Without Styles)
    <div id="navclam">
    <ul>
      <li><a href="http://big12sports.collegesports.com/" shape="rect">Big XII</a>
        <ul>
          <li><a href="http://www.baylor.edu/" shape="rect">Baylor</a></li>
          <li><a href="http://www.cu.edu/" shape="rect">Colorado</a></li>
          <li><a href="http://www.iastate.edu/" shape="rect">Iowa State</a></li>
          <li><a href="http://www.ku.edu/" shape="rect">Kansas</a></li>
          <li><a href="http://www.ksu.edu/" shape="rect">Kansas State</a></li>
          <li><a href="http://www.missouri.edu/" shape="rect">Missouri</a></li>
          <li><a href="http://www.unl.edu/" shape="rect">Nebraska</a></li>
          <li><a href="http://www.ou.edu/" shape="rect">Oklahoma</a></li>
          <li><a href="http://www.okstate.edu/" shape="rect">Oklahoma State</a></li>
          <li><a href="http://www.utexas.edu/" shape="rect">Texas</a></li>
          <li><a href="http://www.tamu.edu/" shape="rect">Texas A&M</a></li>
          <li><a href="http://www.ttu.edu/" shape="rect">Texas Tech</a></li>
        </ul>
      </li>
      <li><a href="http://www.ivyleaguesports.com/" shape="rect">Ivy League</a>
        <ul class="collapse">
          <li><a href="http://www.brown.edu/" shape="rect">Brown</a></li>
          <li><a href="http://www.columbia.edu/" shape="rect">Columbia</a></li>
          <li><a href="http://www.cornell.edu/" shape="rect">Cornell</a></li>
          <li><a href="http://www.dartmouth.edu/" shape="rect">Dartmouth</a></li>
          <li><a href="http://www.harvard.edu/" shape="rect">Harvard</a></li>
          <li><a href="http://www.upenn.edu/" shape="rect">Penn</a></li>
          <li><a href="http://www.princeton.edu/" shape="rect">Princeton</a></li>
          <li><a href="http://www.yale.edu/" shape="rect">Yale</a></li>
        </ul>
      </li>
      <li><a href="http://www.pac-10.org/" shape="rect">Pac 10</a>
        <ul class="collapse">
          <li><a href="http://www.arizona.edu/" shape="rect">Arizona</a></li>
          <li><a href="http://www.asu.edu/" shape="rect">Arizona State</a></li>
          <li><a href="http://www.berkeley.edu/" shape="rect">California</a></li>
          <li><a href="http://www.uoregon.edu/" shape="rect">Oregon</a></li>
          <li><a href="http://www.oregonstate.edu/" shape="rect">Oregon State</a></li>
          <li><a href="http://www.stanford.edu/" shape="rect">Stanford</a></li>
          <li><a href="http://www.ucla.edu/" shape="rect">UCLA</a></li>
          <li><a href="http://www.usc.edu/" shape="rect">USC</a></li>
          <li><a href="http://www.washington.edu/" shape="rect">Washington</a></li>
          <li><a href="http://www.wsu.edu/" shape="rect">Washington State</a></li>
        </ul>
      </li>
    </ul>
    </div>
    
    

    In head element:

    <link rel="stylesheet" type="text/css" href="example27.css"/>

    In example27.css

    #navclam {
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 0.7em;
      width: 10em;
      border-right: 1px solid #333;
      margin-bottom: 1em;
      background-color: #ddd;
      color: #900;
    }
    #navclam ul { 
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #navclam ul li { 
      margin: 0;
      border-top: 1px none #333;
    }
    #navclam ul li a {
      display: block;
      background-color: #ccc;
      border-top: 1px none #333;
      border-right: 1px solid #333;
      border-bottom: thin dotted #333;
      border-left: 5px solid #333;
      text-decoration: none;
      padding: 2px 2px 2px 0.5em;
    }
    #navclam a:link {
      color: #900;
    }
    #navclam a:visited {
      color: #900;
    }
    #navclam a:hover {
      color: #fff;
      background-color: #900;
      border-top: 1px outset #333;
      border-right: 1px outset #333;
      border-bottom: 1px outset #333;
      border-left: 5px outset #333;
    }
    #navclam a:active {
      color: #fff;
      background-color: #900;
      border-top: 1px inset #333;
      border-right: 1px inset #333;
      border-bottom: 1px inset #333;
      border-left: 5px inset #333;
    }
    #navclam ul ul a { 
      list-style: none;
      padding-left: 1.5em;
      font-size: 80%;
      font-weight: normal;
    }
    #navclam ul.collapse { 
      display: none; 
    }
    
     

    lists as navigation

    Default styling of nested list:
    lists as navigation

    Inspired by: CSS Cookbook by Christopher Schmitt

    Dropdown Menus

    Key points:

    American League dropdown

    Example 6.28 - drop down menu - View example by itself (Without Styles)
    
          <ul id="dropdown1">
          <li><a href="#" shape="rect">AL East</a>
            <ul>
              <li><a href="#" shape="rect">Baltimore</a></li>
              <li><a href="#" shape="rect">Boston</a></li>
              <li><a href="#" shape="rect">New York</a></li>
              <li><a href="#" shape="rect">Toronto</a></li>
              <li><a href="#" shape="rect">Tampa Bay</a></li>
            </ul> </li>
          <li><a href="#" shape="rect">AL Central</a>
            <ul>
              <li><a href="#" shape="rect">Chicago</a></li>
              <li><a href="#" shape="rect">Cleveland</a></li>
              <li><a href="#" shape="rect">Detroit</a></li>
              <li><a href="#" shape="rect">Kansas City</a></li>
              <li><a href="#" shape="rect">Minnesota</a></li>
            </ul> </li>
          <li><a href="#" shape="rect">AL West</a>
            <ul>
              <li><a href="#" shape="rect">Los Angeles</a></li>
              <li><a href="#" shape="rect">Oakland</a></li>
              <li><a href="#" shape="rect">Texas</a></li>
              <li><a href="#" shape="rect">Seattle</a></li>
            </ul> </li>
        </ul> 

    In style element (<style type="text/css">) within head element:

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      }
    li {
      float: left;
      position: relative;
      width: 10em;
      }
    li ul {
      display: none;
      top: 1em;
      left: 0;
      }
    li:hover ul { display: block; }  
      
     

    Dropdown Menus

    Example 6.29 - drop-down menu - View example by itself (Without Styles)
    
          <ul id="dropdown2">
          <li><a href="#" shape="rect">AL East</a>
            <ul>
              <li><a href="#" shape="rect">Baltimore</a></li>
              <li><a href="#" shape="rect">Boston</a></li>
              <li><a href="#" shape="rect">New York</a></li>
              <li><a href="#" shape="rect">Toronto</a></li>
              <li><a href="#" shape="rect">Tampa Bay</a></li>
            </ul> </li>
          <li><a href="#" shape="rect">AL Central</a>
            <ul>
              <li><a href="#" shape="rect">Chicago</a></li>
              <li><a href="#" shape="rect">Cleveland</a></li>
              <li><a href="#" shape="rect">Detroit</a></li>
              <li><a href="#" shape="rect">Kansas City</a></li>
              <li><a href="#" shape="rect">Minnesota</a></li>
            </ul> </li>
          <li><a href="#" shape="rect">AL West</a>
            <ul>
              <li><a href="#" shape="rect">Los Angeles</a></li>
              <li><a href="#" shape="rect">Oakland</a></li>
              <li><a href="#" shape="rect">Texas</a></li>
              <li><a href="#" shape="rect">Seattle</a></li>
            </ul> </li>
        </ul> 

    In style element (<style type="text/css">) within head element:

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      }
    li {
      float: left;
      position: relative;
      width: 10em;
      }
    li ul {
      display: none;
      top: 1.7em;
      left: 0;
    }
    li > ul {
    	top: auto;
    	left: auto;
    }
    li:hover ul { display: block; }
    #dropdown2  li { 
      border: thin solid navy; 
      font-family: calibri,verdana,tahoma,helvetica,sans-serif;
      background-color: #ccf;
      }
    #dropdown2 ul li { background-color: #eef; }
    #dropdown2 a {display:block; padding: 0.25em;}
    #dropdown2 a:link, 
    #dropdown2 a:visited, 
    #dropdown2 a:hover, 
    #dropdown2 a:active 
      { text-decoration: none; font-weight: bold; }
    #dropdown2 a:hover { background-color: navy; color: #ccf; }
      
     

    dropdown

    Dropdown Menus: Vertical

    dropdown

    Example 6.30 - drop-down/out menu - View example by itself (Without Styles)
    
          <ul id="dropdown3">
          <li><a href="#" shape="rect">AL East</a>
            <ul>
              <li><a href="#" shape="rect">Baltimore</a></li>
              <li><a href="#" shape="rect">Boston</a></li>
              <li><a href="#" shape="rect">New York</a></li>
              <li><a href="#" shape="rect">Toronto</a></li>
              <li><a href="#" shape="rect">Tampa Bay</a></li>
            </ul> </li>
          <li><a href="#" shape="rect">AL Central</a>
            <ul>
              <li><a href="#" shape="rect">Chicago</a></li>
              <li><a href="#" shape="rect">Cleveland</a></li>
              <li><a href="#" shape="rect">Detroit</a></li>
              <li><a href="#" shape="rect">Kansas City</a></li>
              <li><a href="#" shape="rect">Minnesota</a></li>
            </ul> </li>
          <li><a href="#" shape="rect">AL West</a>
            <ul>
              <li><a href="#" shape="rect">Los Angeles</a></li>
              <li><a href="#" shape="rect">Oakland</a></li>
              <li><a href="#" shape="rect">Texas</a></li>
              <li><a href="#" shape="rect">Seattle</a></li>
            </ul> </li>
        </ul> 

    In style element (<style type="text/css">) within head element:

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      }
    li {
      position: relative;
      width: 10em;
    }
    li ul {
      display: none;
      position: absolute; 
      top: 1.7em;
      left: 0;
    }
    li > ul {
    	top: auto;
    	left: auto;
    }
    li:hover ul { display: block; }
    
    #dropdown3 li ul { 
      margin-left: 10em; 
      margin-top: -1.8em;
    }
    #dropdown3  li { 
      border: thin solid navy; 
      font-family: calibri,verdana,tahoma,helvetica,sans-serif;
      background-color: #ccf;
      }
    #dropdown3 ul li { background-color: #eef; }
    #dropdown3 a {display:block; padding: 0.25em;}
    #dropdown3 a:link, 
    #dropdown3 a:visited, 
    #dropdown3 a:hover, 
    #dropdown3 a:active 
      { text-decoration: none; font-weight: bold; }
    #dropdown3 a:hover { background-color: navy; color: #ccf; }
      
     

    Breadcrumb Navigation

    "Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

    Key points:

    Markup "breadcrumb" navigation using nested lists so that markup reflects the parent/child or hierarchy relationship.

    screenshot

    screenshot

    Strategy is similar to that of creating tabs. Use "display: inline" to make list items inline; use background image for "li" to show arrow.

    Example 6.31 - Nested lists for 'breadcrumb' navigation - View example by itself (Without Styles)
          <div id="breadcrumb">
            <ul>
              <li> <a href="http://dmoz.org/" shape="rect">Top</a>
                <ul>
                  <li> <a href="http://dmoz.org/Science/" shape="rect">Science</a>
                    <ul>
                      <li> <a href="http://dmoz.org/Science/Biology/" shape="rect">Biology</a>
                        <ul>
                          <li> <a href="http://dmoz.org/Science/Biology/Genetics/" shape="rect">
                            Genetics</a>
                            <ul>
                              <li> <a href="http://dmoz.org/Science/Biology/Genetics/Genomics/" shape="rect">
                                Genomics</a>
                                <ul>
                                  <li>
                                    <span>Pharmacogenetics</span>
                                  </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          
        

    In head element:

    <link rel="stylesheet" type="text/css" href="example31.css"/>

    In example31.css

    /* 
      Order of pseudo-"a" elements:
      LoVe HAte (Link, Visited, Hover, Active 
    */
    #breadcrumb a:link , #breadcrumb a:visited ,
    #breadcrumb a:hover , #breadcrumb a:active , #breadcrumb li span {
    	color: navy;
    	font-family: Tahoma, Arial, Helvetica, sans-serif;
    	font-size: small;
    	font-weight: normal;
    	padding: 0.5em;
    	text-decoration: none;
    }
    #breadcrumb a:hover {
    	text-decoration: underline;
    }
    #breadcrumb li span {
    	color: black;
    }
    #breadcrumb {
    	background-color: #ddd;
    }
    #breadcrumb ul {
    	display: inline;
    	margin-left: 0;
    	padding-left: 0;
    }
    #breadcrumb ul li {
    	display: inline;
    }
    #breadcrumb ul ul li {
    	background-image: url(images/arrow.gif);
    	background-position: left;
    	background-repeat: no-repeat;
    	padding-left: 25px;
    }
     

    Rounded Boxes

    square box rounded box

    CSS and Background Images

    Technique is from Simple Rounded Corner CSS Boxes by Ryan Thrash


    View example

    <div class="cssbox">
      <div class="cssbox_head">
        <h2>Lorem Ipsum</h2>
      </div>
      <div class="cssbox_body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
    Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
    eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
    ullamcorper purus adipiscing porttitor sed ut lectus.</p>
      </div>
    </div>
    

    Background Image in Containing div
    rounded


    Background Image in Content div
    rounded


    Background Image in Header div
    rounded


    Background Image in Header h2
    rounded


    Background Image:
    background box

    CSS3 border-radius

    Example 6.32 - CSS3 border-radius - View example by itself (Without Styles)
      
    <div class="box rounded">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
    Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
    eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
    ullamcorper purus adipiscing porttitor sed ut lectus.</p>
    </div>
    

    In style element (<style type="text/css">) within head element:

    .box { 
        width: 260px; 
        padding: 0 40px; 
        border: 3px solid #009999; 
        background-color: #CCFFFF;
    }
    .rounded {
         -moz-border-radius: 25px;
         -webkit-border-radius: 25px;
         -khtml-border-radius: 25px;
         border-radius: 25px;
    }
     

    border radius

    Harvard College Funding Database

    <link rel="stylesheet" type="text/css" media="all" href="screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
      

    Screen display (screen.css):
    funding database

    Print display (print.css):
    funding print

    media selector

    CSS2 defines a media selector for different media types.

    link

    Incorporate as part of the "link" element:

    <link rel="stylesheet" type="text/css" media="all" href="screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />

    @media selector

    Or, use "@media" selector in style rule:

    @media print {
      body { font-size: 10pt; }
    }
    @media screen {
    	body { font-size: 12pt; }
    }
    @media print {
    	  div.navigation {
        display: none;
      }
      hr {
        page-break-after: always;
      }
    }

    media types

    all
    Suitable for all devices.
    braille
    Intended for braille tactile feedback devices.
    embossed
    Intended for paged braille printers.
    handheld
    Intended for handheld devices (typically small screen, limited bandwidth).
    print
    Intended for paged material and for documents viewed on screen in print preview mode.
    projection
    Intended for projected presentations, for example projectors.
    screen
    Intended primarily for color computer screens.
    speech
    Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose.
    tty
    Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
    tv
    Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

    Print CSS

    CSS Print Profile deals with paged media.

    The book Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos was printed using CSS.

    See A List Apart: Articles: Printing a Book with CSS: Boom!

    Responsive Web Design: CSS Media Query

    Media queries can be used to include style sheets (media attribute) or in CSS rules (@media rule) or @import statement

    Link to stylesheet

    <link rel="stylesheet" type="text/css"
      media="screen and (max-device-width: 480px)"
      href="smallscreen.css" />

    CSS rule

    @media screen and (max-device-width: 480px) {
    	/* rules for small screens */
    	.column { float: none; }
    }

    @import statement

    @import url('smallscreen.css') screen and (max-device-width: 480px);

    responsive wide screen

    responsive medium screen

    responsive small screen

    CSS Browser Compatability


    These tables are from "westciv: tools & resources for web professionals". Westciv also hosts a more general CSS Guide.

    Internet Explorer "Conditional Comments"

    Can target CSS for IE:

    <!--[if IE]>
    <link type="text/css" rel="stylesheet" media="all" href="/css/ie.css" />
    <![endif]-->
    
      

    Or even based upon version:

    <!--[if lt IE 7]>
    <link type="text/css" rel="stylesheet" media="all" href="/css/ie_old.css" />
    <![endif]-->
    
      

    CSS "Hacks"

    Resources


    Examples are used from Tantek Çelik's CSS Examples by permission under a Creative Commons License

    CSS only for "modern" browsers:

    @import "null.css?\"\{"; 
    @import "for_current_browsers.css";

    Modern browsers will import two CSS files:

    Older browsers (Windows IE <= 5.5; Mac IE <5; NS < 6; FF ) will interpret this statement as an import statement (null.css) followed by a style declaration with no selector.

    CSS only for old browsers:

    See the various "filter" mechanisms described in Tantek Çelik's CSS Examples

    CSS "Reset"

    Sometimes it is useful to use a CSS stylesheet to "reset" styling for all elements. This attempts to start your styling with a "blank slate" instead of the browser defaults.


    Basic Markup:
    reset

    With CSS Reset:
    reset

    CSS from Eric Meyer for "Reset"

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    }
    ol, ul {
    	list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" "";
    }

    CSS and Page Layout

    See "Layout" chapter in:
    CSS Mastery
    CSS Mastery: Advanced Web Standards Solutions by Andy Budd and Cameron Mol
    [Harvard Library]

    The CSS properties of min-width and max-width can be useful in liquid and elastic layouts to keep columns from becoming too small or too large.

    CSS for Page Layout: Fixed Width

    Define region widths based upon fixed sizes (pixels).

    Use "div" elements to define areas and CSS to arrange them on the page.

      <div id="wrapper">
      <div id="header"> ... </div>
      <div id="maincontent">
        ...
      </div>
      <div id="navigation">
        ...
      </div>
      <div id="footer"> ... </div>
      </div>

    layout

    layout

    Example 6.33 - CSS Page Layout: Fixed Width - View example by itself (Without Styles)
      
      <div id="wrapper">
      <div id="header">
        <h1>Lorem ipsum dolor sit</h1>
      </div>
      <div id="maincontent">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien.
          Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec
          dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris
          turpis eu purus. </p>
        <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla
          semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit,
          nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim.
          Vestibulum nibh.</p>
        <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet massa
          posuere cursus. Sed vitae justo quis tortor facilisis ultrices. Integer id erat. Donec
          at felis ut erat interdum vestibulum. Quisque et eros. Donec fringilla, est in
          condimentum venenatis, tortor velit vehicula sem, in elementum quam sapien eu lectus.
          In dolor urna, ullamcorper vel, tempor sit amet, semper ut, felis. Praesent nisi. </p>
      </div>
      <div id="navigation">
        <ul>
          <li>Mauris</li>
          <li>Cras</li>
          <li>Proin</li>
          <li>Integer</li>
          <li>Curabitur</li>
          <li>Integer</li>
          <li>Suspendisse</li>
          <li>Quisque</li>
        </ul>
        
      </div>
      <div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum orci in
        lectus. Ut ipsum. In hac habitasse platea dictumst. </div>
      </div>
    

    In style element (<style type="text/css">) within head element:

    #wrapper { 
        width: 750px;
        margin: 0 auto;
        }
    #header { 
        width: 100%; 
        background-color: #ccc; 
        } 
    #footer {
        clear: both; 
        background-color: #ccf; 
        }
    #navigation {
        width: 160px; 
        float: left;
        background-color: #fcc;
        } 
    #maincontent {
        width: 540px;
        float: right;
        background-color: #cfc;
    } 
     

    Liquid Layouts

    Define region width based on percentages (relative to browser window width).

      <div id="wrapper">
      <div id="header"> ... </div>
      <div id="maincontent">
        ...
      </div>
      <div id="navigation">
        ...
      </div>
      <div id="footer"> ... </div>
      </div>

    layout

    Example 6.34 - CSS Page Layout: Liquid - View example by itself (Without Styles)
      
      <div id="wrapper">
      <div id="header">
        <h1>Lorem ipsum dolor sit</h1>
      </div>
      <div id="maincontent">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien.
          Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec
          dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris
          turpis eu purus. </p>
        <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla
          semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit,
          nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim.
          Vestibulum nibh.</p>
        <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet massa
          posuere cursus. Sed vitae justo quis tortor facilisis ultrices. Integer id erat. Donec
          at felis ut erat interdum vestibulum. Quisque et eros. Donec fringilla, est in
          condimentum venenatis, tortor velit vehicula sem, in elementum quam sapien eu lectus.
          In dolor urna, ullamcorper vel, tempor sit amet, semper ut, felis. Praesent nisi. </p>
      </div>
      <div id="navigation">
        <ul>
          <li>Mauris</li>
          <li>Cras</li>
          <li>Proin</li>
          <li>Integer</li>
          <li>Curabitur</li>
          <li>Integer</li>
          <li>Suspendisse</li>
          <li>Quisque</li>
        </ul>
        
      </div>
      <div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum orci in
        lectus. Ut ipsum. In hac habitasse platea dictumst. </div>
      </div>
    

    In style element (<style type="text/css">) within head element:

    #wrapper { 
        width: 90%;
        margin: 0 auto;
        }
    #header { 
        width: 100%; 
        background-color: #ccc; 
        } 
    #footer {
        clear: both; 
        background-color: #ccf; 
        }
    #navigation {
        width: 30%; 
        float: left;
        background-color: #fcc;
        } 
    #maincontent {
        width: 70%;
        float: right;
        background-color: #cfc;
    } 
     

    Elastic Layouts

    Define region widths (and margin and padding) in "em" units (relative to font size).

    layout

    Example 6.35 - CSS Page Layout: Elastic - View example by itself (Without Styles)
      
      <div id="wrapper">
      <div id="header">
        <h1>Lorem ipsum dolor sit</h1>
      </div>
      <div id="maincontent">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien.
          Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec
          dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris
          turpis eu purus. </p>
        <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla
          semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit,
          nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim.
          Vestibulum nibh.</p>
        <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet massa
          posuere cursus. Sed vitae justo quis tortor facilisis ultrices. Integer id erat. Donec
          at felis ut erat interdum vestibulum. Quisque et eros. Donec fringilla, est in
          condimentum venenatis, tortor velit vehicula sem, in elementum quam sapien eu lectus.
          In dolor urna, ullamcorper vel, tempor sit amet, semper ut, felis. Praesent nisi. </p>
      </div>
      <div id="navigation">
        <ul>
          <li>Mauris</li>
          <li>Cras</li>
          <li>Proin</li>
          <li>Integer</li>
          <li>Curabitur</li>
          <li>Integer</li>
          <li>Suspendisse</li>
          <li>Quisque</li>
        </ul> 
      </div>
      <div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum orci in
        lectus. Ut ipsum. In hac habitasse platea dictumst. </div>
      </div>
    

    In style element (<style type="text/css">) within head element:

    body { 
        font-family: Lucida Grande, Verdana, serif;
        }
    #wrapper { 
        width: 45em;
        margin: 0 auto;
        border: medium solid black;
        }
    #header { 
        width: 44em;
        padding: 0.5em;
        background-color: #ccc; 
        } 
    #footer {
        width: 44em;
        padding: 0.5em;
        clear: both; 
        background-color: #ccf; 
        }
    #navigation {
        width: 13em;
        padding: 0.5em; 
        float: left;
        background-color: #fcc;
        } 
    #maincontent {
        width: 30em;
        padding: 0.5em;
        float: right;
        background-color: #cfc;
    } 
     

    More complex layouts

    header, footer, navigation, primary content, secondary content

    layout

    layout

    Example 6.36 - CSS Page Layout: 3 columns - View example by itself (Without Styles)
      
          <div id="wrapper">
            <div id="header">
              <h1>Lorem ipsum dolor sit</h1>
            </div>
            <div id="maincontent">
              <div id="primary">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi
                  at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis
                  sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet
                  neque, non pellentesque mauris turpis eu purus. </p>
                <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla
                  fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus
                  pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis
                  adipiscing diam at enim. Vestibulum nibh.</p>
                <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet
                  massa posuere cursus. Sed vitae justo quis tortor facilisis ultrices.
                  Integer id erat. Donec at felis ut erat interdum vestibulum. Quisque et eros.
                  Donec fringilla, est in condimentum venenatis, tortor velit vehicula sem, in
                  elementum quam sapien eu lectus. In dolor urna, ullamcorper vel, tempor sit
                  amet, semper ut, felis. Praesent nisi. </p>
              </div>
              <div id="secondary">
                <p>Fusce scelerisque viverra quam. Nam urna. Nullam urna libero, euismod at,
                  euismod sit amet, porttitor ac, mauris.</p>
                <p>Vestibulum interdum aliquet lacus. Vestibulum egestas. Fusce adipiscing
                  quam sed metus.</p>
                <p>Nullam dignissim aliquam dui. Proin laoreet, elit sed pulvinar
                  sollicitudin, urna arcu fermentum felis, in rhoncus nunc neque vitae
                  libero.</p>
              </div>
            </div>
            <div id="navigation">
              <ul>
                <li>Mauris</li>
                <li>Cras</li>
                <li>Proin</li>
                <li>Integer</li>
                
                <li>Curabitur</li>
                <li>Integer</li>
                <li>Suspendisse</li>
                <li>Quisque</li>
              </ul>
            </div>
            <div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum
              orci in lectus. Ut ipsum. In hac habitasse platea dictumst. </div>
            
          </div>
      

    In style element (<style type="text/css">) within head element:

    #wrapper { 
        width: 750px;
        margin: 0 auto;
        }
    #header { 
        width: 100%; 
        background-color: #fcf; 
        } 
    #footer {
        clear: both; 
        background-color: #ffc; 
        }
    #navigation {
        width: 160px; 
        float: left;
        background-color: #fcc;
        }
    #maincontent {
        width: 590px;
        float: right;
            }
    #primary {
        width: 400px;
        float: left;
        background-color: #cfc;
    }
    #secondary {
       width: 190px;
       float: right;
       background-color: #cff;       
    }
     

    CSS Frameworks

    Blueprint CSS

    blueprint css
    Blueprint CSS

    Blueprint CSS

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Lorem ipsum dolor sit</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="http://morpheus.dce.harvard.edu/blueprintcss/blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="http://morpheus.dce.harvard.edu/blueprintcss/blueprint/print.css" type="text/css" media="print" />    
        <!--[if IE]><link rel="stylesheet" href="http://morpheus.dce.harvard.edu/blueprintcss/blueprint/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
      </head>
      <body>
        <div class="container">
          <div id="header" class="span-24">
            <!-- header -->
          </div>
          <div class="span-4">
            <!-- navigation -->
          </div>
          <div class="span-15">
            <!-- primary -->
          </div>
          <div class="span-5 last">
            <!-- secondary -->
          </div>
          <div class="span-24">
            <!-- footer -->
          </div>
        </div>
      </body>
    </html>

    960 Grid System

    960 grid system
    960 Grid System

    960 Grid System

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Lorem ipsum dolor sit</title>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
      <link rel="stylesheet" type="text/css" media="all"
        href="http://morpheus.dce.harvard.edu/960gs/code/css/reset.css"/>
      <link rel="stylesheet" type="text/css" media="all"
        href="http://morpheus.dce.harvard.edu/960gs/code/css/text.css"/>
      <link rel="stylesheet" type="text/css" media="all"
        href="http://morpheus.dce.harvard.edu/960gs/code/css/960.css"/>
    </head>
    <body>
      <div class="container_12">
        <div class="grid_9">
          <!-- header -->
        </div>
        <div class="clear">&nbsp;</div>
        <div class="grid_2">
          <!-- navigation -->
        </div>
        <div class="grid_7">
          <div id="primary" class="grid_5 alpha">
            <!-- primary -->
          </div>
          <div id="secondary" class="grid_2 omega">
            <!-- secondary -->
          </div>
        </div>
        <div class="clear">&#160;</div>
        <div class="grid_9" >
          <!-- footer -->
        </div>
      </div>
    </body>
    </html>

    YUI CSS Grid

    yui grid builder
    YUI CSS Grids and YUI Grid Builder

    YUI CSS Grid

    <html>
    <head>
    <title>Lorem ipsum dolor sit</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet"
          href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css"
          type="text/css" />
    </head>
    <body>
    <div id="doc" class="yui-t1">
      <div id="hd">
        <!-- header -->
      </div>
      <div id="bd">
        <div id="yui-main">
          <div class="yui-b">
            <div class="yui-gc">
              <div class="yui-u first">
                <!-- Primary Content -->
              </div>
              <div class="yui-u" id="secondary">
                <!-- Secondary Content -->
              </div>
            </div>
          </div>
        </div>
        <div class="yui-b">
          <!-- navigation -->
        </div>
      </div>
      <div id="ft">
        <!-- footer -->
      </div>
    </div>
    </body>
    </html>
    

    Copyright © 1998-2011 David P. Heitmeyer

    Bookmark and Share