Presentation - Cascading Style Sheets

CSS

February 24, 2014

Harvard University
Division of Continuing Education
Extension School

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

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

This Lecture's Topics

Web Browsers

What is Webkit, Gecko, and Trident (MSHTML)?

A mostly internal-facing Harvard site

browser

Your Browser as a Web Development Tool

browse happy

Firebug for Firefox

Firebug: Web Development Evolved
firebug

Google Chrome: Developer Tools

Google Chrome Developer Tools

Internet Explorer: Developer Tools

IE Developer Tools

Testdrive Your Browser

Example 4.1 - Firebug Testdrive - View example by itself (Without Styles)

<h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec
  facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit.
  Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante
  sit amet urna. Maecenas condimentum hendrerit turpis. </p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>

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

body { 
  background-color: silver; 
  font-family: calibri, arial, helvetica, sans-serif;   
}
p {
  line-height: 200%;
  border: thin solid black;
  padding: 1em; 
  margin: 2em;
  background-color: teal;  
  }
ul {
  border: medium dotted red;
  background-color: yellow;
  font-family: Times New Roman, Times, serif;  
}
h1 { 
  color: purple; 
  background-color: white;
  font-variant: small-caps;
}
 

Client-side Web Parts: Markup, Style, Function

web parts

Anatomy of a CSS Rule

CSS Rule

css rule


Selector and Declarations

css selector and declarations


Properties and Values

css property and value
Example 4.2 - View example by itself (Without Styles)

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec
  facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit.
  Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante
  sit amet urna. Maecenas condimentum hendrerit turpis. </p>

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

p { 
    color: red; 
    background-color: blue; 
  }
 

Screenshot

Binding Styles to Markup

Three ways to bind CSS rules to XHTML/HTML markup:

Properties

CSS Level 1 lists 53 properties that let you style properties of:

CSS Level 2.1 lists 115 properties.

CSS Properties

CSS Level 1 lists 53 properties.

  • Font Properites
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size
    • font
  • Color and Background Properties
    • color
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    • background
  • Text Properties
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • text-align
    • text-indent
    • line-height
  • Box Properties
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
    • margin
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    • padding
    • border-top-width
    • border-right-width
    • border-bottom-width
    • border-left-width
    • border-width
    • border-color
    • border-style
    • border-top
    • border-right
    • border-bottom
    • border-left
    • border
    • width
    • height
    • float
    • clear
    • display
  • Classification Properties
    • white-space
    • list-style-type
    • list-style-image
    • list-style-position
    • list-style

CSS Level 2.1 lists 115 properties .

  • azimuth
  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • caption-side
  • clear
  • clip
  • color
  • content
  • counter-increment
  • counter-reset
  • cue
  • cue-after
  • cue-before
  • cursor
  • direction
  • display
  • elevation
  • empty-cells
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • orphans
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • pause
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • play-during
  • position
  • quotes
  • richness
  • right
  • speak
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • table-layout
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • top
  • unicode-bidi
  • vertical-align
  • visibility
  • voice-family
  • volume
  • white-space
  • widows
  • width
  • word-spacing
  • z-index

Inheritance

Properties are typically inherited by children elements.
Example 4.3 - View example by itself (Without Styles)

<div>
Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</p>
  <ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>

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

body { color: navy; }
em { color: red; }
div { color: green; }
 

Screenshot

Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0

UA = User-Agent = HTTP Client = Web Browser

Take a look at the sample default stylesheets for HTML 2.0 and HTML 4.0 listed in the Appendices of the CSS1 and CSS2 Recommendations.

HTML 4 Sample default CSS

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px; line-height: 1.12 }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, pre,
input, object, 
select          { display:inline-block; }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A" }
:before, :after { white-space: pre-line }
center          { text-align: center }
abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}    
  

HTML 2 Sample default CSS

BODY { 
  margin: 1em;
  font-family: serif;
  line-height: 1.1;
  background: white;
  color: black; 
}

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL { 
  display: block }

B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 
IMG, SPAN { display: inline }

LI { display: list-item }

H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }

H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }

B, STRONG { font-weight: bolder }  /* relative to the parent */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }

PRE { white-space: pre }

ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 }              /* tight formatting */
LI { margin-left: 3em }

DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }

HR { border-top: solid }        /* 'border-bottom' could also have been used */

A:link { color: blue }          /* unvisited link */
A:visited { color: red }        /* visited links */
A:active { color: lime }        /* active links */

/* setting the anchor border around IMG elements
   requires contextual selectors */

A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }    
  

font properties

font-family

body {
  font-family: garamond, times, serif;
}
Example 4.4 - View example by itself
<div style="font-family: garamond, times, serif;">Garamond, Times, or serif (generic family)</div>
<div style="font-family: calibri, arial, helvetica, sans-serif;">Calibri, Arial, Helvetica or sans-serif (generic family)</div>
<div style="font-family: lucida console, courier, monospace;">Lucida Console, Courier or monospace (generic family)</div>
<div style="font-family: fantasy;">Fantasy (generic family)</div>
<div style="font-family: cursive;">Cursive (generic family)</div>
Garamond, Times, or serif (generic family)
Calibri, Arial, Helvetica or sans-serif (generic family)
Lucida Console, Courier or monospace (generic family)
Fantasy (generic family)
Cursive (generic family)
 

Screenshot

font-style

typophile.com:

em {
  font-style: italic;
}
Example 4.5 - View example by itself
<div style="font-style: normal;">Normal font-style</div>
<div style="font-style: italic;">Italic font-style</div>
<div style="font-style: oblique;">Oblique font-style</div>
Normal font-style
Italic font-style
Oblique font-style
 

font-variant and font-weight

font-variant

Example 4.6 - View example by itself
<div style="font-variant: small-caps;">This should be rendered in small-caps.
<div style="font-variant: normal;">Here we revert to "normal".
</div>
</div>
This should be rendered in small-caps.
Here we revert to "normal".
 

font-weight

strong {
  font-weight: bold;
}
values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Example 4.7 - View example by itself
<div>
font-weight can be used to make things 
<span style="font-weight: bold">bold</span>.
</div>
font-weight can be used to make things bold.
 

font-size

Example 4.8 - View example by itself
<div style="font-size: 8pt;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
  velit at orci.</div>
<div style="font-size: 120%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
  velit at orci.</div>
<div style="font-size: 1.5em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
  velit at orci.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
 

Screenshot

Font Sizes: Relative vs. Absolute

As a general guideline with CSS, relative measurements are better than absolute measurements.

font

In CSS, there are various shorthand properties; these allow you to define several properties in a single place.

The font shorthand property allows you to set:
[font-style | font-variant | font-weight ]? font-size[/line-height]? font-family

Example 4.9 - View example by itself (Without Styles)

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec
  facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit.
  Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante
  sit amet urna. Maecenas condimentum hendrerit turpis. </div>

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

body { 
      font: normal normal normal x-large/200% arial, helvetica, sans-serif; 
}
 

Screenshot

Computed Valued

Using "font-size: 80%;"

Example 4.10 - Computed font-size with nested lists - View example by itself (Without Styles)

<p>A nested list:</p>
<ul>
<li>Item 1
  <ul>
    <li>Sub-item a
      <ul>  
        <li>Sub-sub-item i</li>
        <li>Sub-sub-item ii</li>
        <li>Sub-sub-item iii</li>
      </ul>
    </li>
    <li>Sub-item b</li>
    <li>Sub-item c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

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

ul ul { 
     font-size: 80%; 
}

A nested list:

  • Item 1
    • Sub-item a
      • Sub-sub-item i
      • Sub-sub-item ii
      • Sub-sub-item iii
    • Sub-item b
    • Sub-item c
  • Item 2
  • Item 3
 

Screenshot

Using "font-size: smaller;"

Example 4.11 - Computed font-size with nested lists - View example by itself (Without Styles)

<p>A nested list:</p>
<ul>
<li>Item 1
  <ul>
    <li>Sub-item a
      <ul>  
        <li>Sub-sub-item i</li>
        <li>Sub-sub-item ii</li>
        <li>Sub-sub-item iii</li>
      </ul>
    </li>
    <li>Sub-item b</li>
    <li>Sub-item c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

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

ul ul { 
     font-size: smaller; 
}

A nested list:

  • Item 1
    • Sub-item a
      • Sub-sub-item i
      • Sub-sub-item ii
      • Sub-sub-item iii
    • Sub-item b
    • Sub-item c
  • Item 2
  • Item 3
 

text properties

Align blocks of text left, right, center, and justified.

Example 4.12 - View example by itself
<div style="margin-left: 30%; margin-right: 30%;">
  <p style="text-align: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
    velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo
    vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit
    turpis. </p>
  <p style="text-align: center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
    velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo
    vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit
    turpis. </p>
  <p style="text-align: right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
    velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo
    vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit
    turpis. </p>
  <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut
    sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non,
    commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum
    hendrerit turpis. </p>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

 

Screenshot

CSS Values and Units

Color Units

prism light refraction

Wikipedia Web Colors

Name

As defined in HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

RGB Color Space

256 colors in each channel (Red, Green, Blue). Values can be

The following are all equivalent ways of defining a shade of orange:

  • rgb(100%,66%,33%)
  • rgb(255,168,84)
  • #ffa854
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
rgb(100%,66%,33%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
#ffa854
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
rgb(255,168,84)

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

margin, padding, border

border-style

Example 4.13 - Border Styles - View example by itself (Without Styles)

<div>
  <h4>Dotted</h4>
  <p class="border1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
    feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices
    volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy
    egestas. </p>
  <h4>Dashed</h4>
  <p class="border2"> Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer
    sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet
    pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non,
    faucibus venenatis, tortor.</p>
  <h4>Outset</h4>
  <p class="border3"> Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu.
    Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra
    lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit
    dui ac massa. </p>
  <h4>Solid</h4>
  <p class="border4"> Etiam rhoncus. Praesent id neque et odio dictum varius. Integer
    imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy
    metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor.
    </p>
  <h4>Double</h4>
  <p class="border5"> Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis
    mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem.
    Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper
    nisl. Pellentesque tincidunt. </p>
  <h4>Groove</h4>
  <p class="border6"> Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac
    est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat
    arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere
    ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam.  </p>
  <h4>Ridge</h4>
  <p class="border7"> Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor,
    ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh.
    Nunc mattis ipsum eu lectus. Nam pharetra mattis massa. </p>
  <h4>Inset</h4>
  <p class="border8"> Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt
    erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a,
    arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper
    iaculis augue turpis eu neque. </p>
</div>

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

body {
	font-family: tahoma,arial,sans-serif;
	font-size: small;
}
p {
	margin: 1em;
	padding: 1em;
}
p {
	width: 30%;
}
.border1 {
	border: thin dotted #900;
}
.border2 {
	border: medium dashed #090;
}
.border3 {
	border: thick outset #009;
}
.border4 {
	border: 3px solid #999;
}
.border5 {
	border: 5px double #000;
}
.border6 {
	border: 10px groove black;
}
.border7 {
	border: 15px ridge black;
}
.border8 {
	border: 20px inset #900;
}
 

Screenshot

Margin, Padding, Border Example

Example 4.14 - Margin, Padding, Border - View example by itself (Without Styles)

<p 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.</p>
<p> 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. </p>

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

.about {
        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;
     }
 

Screenshot

TRBL for padding and margin shorthand

Stay out of "TRBL" (top right bottom left) for padding and margin shorthand.

Values that are present are used to fill in for values that are not:

Float

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

Example 4.15 - 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 4.16 - 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 4.17 - 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 4.18 - 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 4.19 - 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 4.20 - 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 4.21 - 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 4.22 - 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 4.23 - 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

Float and Clear!

Float and Clear

How to get image to be contained in box?

Or, how to avoid something like:
float and clear

Example 4.24 - 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

How to get image to be contained in box?

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

<p 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.<br class="clearme"/></p>
<p 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.<br class="clearme"/></p>
<p 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. <br class="clearme"/></p>

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

p.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;
}
br.clearme { 
  clear: both; 
  padding: 0; 
  margin: 0; 
  visibility: hidden; 
  display: block
}
 

clear

Float Opposite

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

Example 4.26 - 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 4.27 - 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 4.28 - 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 { background-color: #ffff99;}
p.first { 
  float: left; 
  width: 30%;
  font-size: x-small;
  background-color: #9999ff;
}
p.second { 
  float: right; 
  width: 30%;
  font-size: x-small;
  background-color: #ff9999;
}
 

float margin

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

Example 4.29 - 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;
  background-color: #9999ff;
}
p.second { 
  float: right; 
  width: 30%;
  font-size: x-small;
  background-color: #ff9999;
}
p.third {
  margin-left: 35%;
  margin-right: 35%; 
  background-color: #ffff99;
}
 

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 4.30 - 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 4.31 - 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

Backgrounds

Background Image with CSS

A background image with CSS:

Example 4.32 - Background Image with CSS - View example by itself (Without Styles)

<div style="margin-left: 45%; margin-right: 45%;"> Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna
  porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus
  vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas
  condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
  velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae,
  felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>

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

body { background-image: url(images/shield-background.gif);}
 

background

Repeat

Repeat on y-axis only:

Example 4.33 - background-repeat: repeat-y - View example by itself (Without Styles)

<div style="margin-left: 45%; margin-right: 45%;"> Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna
  porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus
  vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas
  condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim
  velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae,
  felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>

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

body { 
    background-image: url(images/shield-background.gif);
    background-repeat: repeat-y;
    }
 

background

Center and Fix

Center, Don't Repeat and Fix position:

Example 4.34 - no-repeat and fixed - View example by itself (Without Styles)

<div style="margin-left: 45%; margin-right: 45%;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. 
</div>

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

body { 
    background-image: url(images/shield-background.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    }
 

background

Backgrounds

Here we use the following images as backgrounds in div elements.

wood.jpg
wood
marble.jpg
marble
water.jpg
water
Example 4.35 - background images - View example by itself (Without Styles)
<div class="wood"> Wood
  <div class="marble"> Marble
    <div class="water"> Water </div> </div> </div>

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

body { 
  font-size: 18pt; 
  font-weight: bold; 
  color: white;
}
div.wood {
  padding: 1em;
  background-image: url(images/wood.jpg);
}
div.marble {
  background-image: url(images/marble.jpg);
  padding: 1em;
}
div.water {
  background-image: url(images/water.jpg);
  padding: 1em;
}
 

backgrounds

Backgrounds - Icons

Use small images as backgrounds in links to display visual icons or cues.

Web Content Management

Example 4.36 - Web Content Management - View example by itself

				<ul class="topic-header-menu">
					<li><a class="icon-replace act-edit" title="Edit this Topic Box" href="..." shape="rect">Edit</a></li>
					<li><a class="icon-replace act-maximize" title="Maximize this Topic Box" href="..." shape="rect">Maximize</a></li>
					<li><a class="icon-replace act-print" title="Print-friendly view of this Topic Box" href="..." shape="rect">Print</a></li>
				</ul>
				
 

Background Icons

External Links

Example 4.37 - External Hyperlnks - View example by itself (Without Styles)
  
    <p>A bonus of attending <a href="http://www.summer.harvard.edu/" shape="rect">Harvard Summer School</a> is being able to enjoy <a href="http://www.harvardsquare.com/" class="external" shape="rect">Harvard Square</a> in <a href="http://www.cambridgema.gov/" class="external" shape="rect">Cambridge</a>, <a href="http://www.mass.gov" class="external" shape="rect">Massachusetts</a>. </p>

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

a.external  {
  padding: 0 25px 0px 0px;
  display:inline;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url(images/external.png);
}

A bonus of attending Harvard Summer School is being able to enjoy Harvard Square in Cambridge, Massachusetts.

 

Backgrounds

Instead of having an img element within the XHTML, we can include design images in the CSS. This example displays the flag.png with the h1 of the markup.

background image

Example 4.38 - background images - View example by itself (Without Styles)
<h1 id="ustitle">United States Constitution</h1>
<div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et libero.
  Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum
  vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae pharetra
  turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla
  dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facilisi.
  Integer euismod cursus erat. </div>

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

#ustitle { 
  height: 80px;
  background: #ddd url(images/flag-small.png) left center no-repeat;
  margin-bottom: 0.5em;
}
#ustitle  { 
  padding-top: 0.5em; 
  text-align: center;
  font-family: tahoma,arial,helvetica,sans-serif; 
  }
 

background image

Image Replacement Techniques

Use an image for the header of the page, but have a text equivalent.

Harvard University Extension School
Image is 50×900 px.

Kellum Technique

Example 4.39 - Kellum Technique - View example by itself (Without Styles)
  
      <h1 id="header1">Harvard University Extension School</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien.
      Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. </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. 
      Vestibulum nibh.</p>
      
      

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

    #header1 {
      text-indent: 100%;
      overflow: hidden;
      white-space: nowrap;

      background-image: url(images/dce_masthead.png);
      background-repeat: no-repeat;
      background-color: black;
      height: 50px;
    }
 

Screenshot

Leahy/Langridge Image Replacement (LIR)

Example 4.40 - Leahy/Langridge Image Replacement (LIR) - View example by itself (Without Styles)
  
      <h1 id="header2">Harvard University Extension School</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien.
      Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. </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. 
      Vestibulum nibh.</p>
      
      

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

    #header2 {
      padding-top: 50px;
      overflow: hidden;
      background-image: url(images/dce_masthead.png);
      background-repeat: no-repeat;
      height: 0px;
    }
 

Screenshot

image replacement

image replacement

image replacement

image replacement

The Rundle/Phark Technique for Image Replacement

Example 4.41 - Rundle/Phark Image Replacement - View example by itself (Without Styles)
  
      <h1 id="header3">Harvard University Extension School</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien.
      Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. </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. 
      Vestibulum nibh.</p>
      

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

    #header3 {
      height: 50px;
      background-image: url(images/dce_masthead.png);
      background-repeat: no-repeat;
      text-indent: -5000px;
    }
 

Screenshot

image replacement

image replacement

image replacement

Backgrounds: use tiling and image size

The image (5px × 150px; 254 bytes):
blue gradient

"Normal" size:
background image

"font-size set to 300%":
background image


Example 4.42 - tiling and image size - View example by itself (Without Styles)


<table id="stats">
<thead>
<tr><th rowspan="1" colspan="1">Year</th><th rowspan="1" colspan="1">Championship game</th><th rowspan="1" colspan="1">Score</th></tr>
</thead>
<tbody>
<tr><td rowspan="1" colspan="1">2013</td><td rowspan="1" colspan="1">Louisville def. Michigan<td rowspan="1" colspan="1">82-76</td></td></tr>
<tr><td rowspan="1" colspan="1">2012</td><td rowspan="1" colspan="1">Kentucky def. Kansas<td rowspan="1" colspan="1">67-59</td></td></tr>
<tr><td rowspan="1" colspan="1">2011</td><td rowspan="1" colspan="1">Connecticut def. Butler<td rowspan="1" colspan="1">53-41</td></td></tr>
<tr><td rowspan="1" colspan="1">2010</td><td rowspan="1" colspan="1">Duke def. Butler</td><td rowspan="1" colspan="1">61-59</td></tr>
<tr><td rowspan="1" colspan="1">2009</td><td rowspan="1" colspan="1">UNC def. Michigan St</td><td rowspan="1" colspan="1">89-72</td></tr>
<tr><td rowspan="1" colspan="1">2008</td><td rowspan="1" colspan="1">Kansas def. Memphis</td><td rowspan="1" colspan="1">75-68</td></tr>
<tr><td rowspan="1" colspan="1">2007</td><td rowspan="1" colspan="1">Florida def. Ohio State</td><td rowspan="1" colspan="1">84-75</td></tr>
<tr><td rowspan="1" colspan="1">2006</td><td rowspan="1" colspan="1">Florida def. UCLA</td><td rowspan="1" colspan="1">73-57</td></tr>
<tr><td rowspan="1" colspan="1">2005</td><td rowspan="1" colspan="1">UNC def. Illinois</td><td rowspan="1" colspan="1">75-70</td></tr>
<tr><td rowspan="1" colspan="1">2004</td><td rowspan="1" colspan="1">UConn def. Georgia Tech</td><td rowspan="1" colspan="1">82-73</td></tr>
<tr><td rowspan="1" colspan="1">2003</td><td rowspan="1" colspan="1">Syracuse def. Kansas</td><td rowspan="1" colspan="1">81-78</td></tr>
<tr><td rowspan="1" colspan="1">2002</td><td rowspan="1" colspan="1">Maryland def. Indiana</td><td rowspan="1" colspan="1">64-52</td></tr>
<tr><td rowspan="1" colspan="1">2001</td><td rowspan="1" colspan="1">Duke def. Arizona</td><td rowspan="1" colspan="1">82-72</td></tr>
<tr><td rowspan="1" colspan="1">2000</td><td rowspan="1" colspan="1">Michigan State def. Florida</td><td rowspan="1" colspan="1">89-76</td></tr>
<tr><td rowspan="1" colspan="1">1999</td><td rowspan="1" colspan="1">UConn def. Duke</td><td rowspan="1" colspan="1">77-74</td></tr>
<tr><td rowspan="1" colspan="1">1998</td><td rowspan="1" colspan="1">Kentucky def. Utah</td><td rowspan="1" colspan="1">78-69  </td></tr>
</tbody>
</table>          
  

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

#stats thead tr th { 
  background-image: url(images/gradient-blue.png);
  background-repeat: repeat-x; 
  background-position: bottom;
  padding: 0.25em;
}
#stats tbody td {
  border-bottom: thin dotted black;
  padding: 0.25em;
}
table {  
  border-collapse: collapse; 
  border: thin solid black;
  margin: 10px;
}
 

Backgrounds: use tiling and image size

The image (5px × 150px; 254 bytes):
blue gradient

"Normal" size:
background image

"font-size set to 300%":
background image


Example 4.43 - tiling and image size - View example by itself (Without Styles)


<table id="stats">
<thead>
<tr><th rowspan="1" colspan="1">Year</th><th rowspan="1" colspan="1">Championship game</th><th rowspan="1" colspan="1">Score</th></tr>
</thead>
<tbody>
<tr><td rowspan="1" colspan="1">2012</td><td rowspan="1" colspan="1">Kentucky def. Kansas<td rowspan="1" colspan="1">67-59</td></td></tr>
<tr><td rowspan="1" colspan="1">2011</td><td rowspan="1" colspan="1">Connecticut def. Butler<td rowspan="1" colspan="1">53-41</td></td></tr>
<tr><td rowspan="1" colspan="1">2010</td><td rowspan="1" colspan="1">Duke def. Butler</td><td rowspan="1" colspan="1">61-59</td></tr>
<tr><td rowspan="1" colspan="1">2009</td><td rowspan="1" colspan="1">UNC def. Michigan St</td><td rowspan="1" colspan="1">89-72</td></tr>
<tr><td rowspan="1" colspan="1">2008</td><td rowspan="1" colspan="1">Kansas def. Memphis</td><td rowspan="1" colspan="1">75-68</td></tr>
<tr><td rowspan="1" colspan="1">2007</td><td rowspan="1" colspan="1">Florida def. Ohio State</td><td rowspan="1" colspan="1">84-75</td></tr>
<tr><td rowspan="1" colspan="1">2006</td><td rowspan="1" colspan="1">Florida def. UCLA</td><td rowspan="1" colspan="1">73-57</td></tr>
<tr><td rowspan="1" colspan="1">2005</td><td rowspan="1" colspan="1">UNC def. Illinois</td><td rowspan="1" colspan="1">75-70</td></tr>
<tr><td rowspan="1" colspan="1">2004</td><td rowspan="1" colspan="1">UConn def. Georgia Tech</td><td rowspan="1" colspan="1">82-73</td></tr>
<tr><td rowspan="1" colspan="1">2003</td><td rowspan="1" colspan="1">Syracuse def. Kansas</td><td rowspan="1" colspan="1">81-78</td></tr>
<tr><td rowspan="1" colspan="1">2002</td><td rowspan="1" colspan="1">Maryland def. Indiana</td><td rowspan="1" colspan="1">64-52</td></tr>
<tr><td rowspan="1" colspan="1">2001</td><td rowspan="1" colspan="1">Duke def. Arizona</td><td rowspan="1" colspan="1">82-72</td></tr>
<tr><td rowspan="1" colspan="1">2000</td><td rowspan="1" colspan="1">Michigan State def. Florida</td><td rowspan="1" colspan="1">89-76</td></tr>
<tr><td rowspan="1" colspan="1">1999</td><td rowspan="1" colspan="1">UConn def. Duke</td><td rowspan="1" colspan="1">77-74</td></tr>
<tr><td rowspan="1" colspan="1">1998</td><td rowspan="1" colspan="1">Kentucky def. Utah</td><td rowspan="1" colspan="1">78-69  </td></tr>
</tbody>
</table>          
  

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

#stats thead tr th { 
  background-image: url(images/gradient-blue.png);
  background-repeat: repeat-x; 
  background-position: bottom;
  padding: 0.25em;
}
#stats tbody td {
  border-bottom: thin dotted black;
  padding: 0.25em;
}
table {  
  border-collapse: collapse; 
  border: thin solid black;
  margin: 10px;
}
 

Lists

Ordered List

An ordered list:

Example 4.44 - Ordered List: default - View example by itself
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong>
<ol>
  <li>Mark Few</li>
  <li>Roy Williams</li>
  <li>Thad Matta</li>
  <li>Mike Krzyzewski</li>
  <li>John Calipari</li>  
  <li>Dave Rose</li>
  <li>Bo Ryan</li>
  <li>Bill Self</li>
  <li>Jamie Dixon</li>
  <li>Jim Boeheim</li>
</ol>
Winningest Active Coaches, Division I NCAA Men's Basketball
  1. Mark Few
  2. Roy Williams
  3. Thad Matta
  4. Mike Krzyzewski
  5. John Calipari
  6. Dave Rose
  7. Bo Ryan
  8. Bill Self
  9. Jamie Dixon
  10. Jim Boeheim
 

Ordered List

An ordered list:

Example 4.45 - 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>Mark Few</li>
  <li>Roy Williams</li>
  <li>Thad Matta</li>
  <li>Mike Krzyzewski</li>
  <li>John Calipari</li>  
  <li>Dave Rose</li>
  <li>Bo Ryan</li>
  <li>Bill Self</li>
  <li>Jamie Dixon</li>
  <li>Jim Boeheim</li>
</ol>

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

ol.basketball {
   list-style: upper-roman;
}
Winningest Active Coaches, Division I NCAA Men's Basketball
  1. Mark Few
  2. Roy Williams
  3. Thad Matta
  4. Mike Krzyzewski
  5. John Calipari
  6. Dave Rose
  7. Bo Ryan
  8. Bill Self
  9. Jamie Dixon
  10. Jim Boeheim
 

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 4.46 - List with images as bullets - View example by itself (Without Styles)

<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong>
<ul class="basketball">
  <li>Mark Few</li>
  <li>Roy Williams</li>
  <li>Thad Matta</li>
  <li>Mike Krzyzewski</li>
  <li>John Calipari</li>  
  <li>Dave Rose</li>
  <li>Bo Ryan</li>
  <li>Bill Self</li>
  <li>Jamie Dixon</li>
  <li>Jim Boeheim</li>
</ul>

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

ul.basketball {
    list-style-image: url(images/basketball.gif);
}
Winningest Active Coaches, Division I NCAA Men's Basketball
  • Mark Few
  • Roy Williams
  • Thad Matta
  • Mike Krzyzewski
  • John Calipari
  • Dave Rose
  • Bo Ryan
  • Bill Self
  • Jamie Dixon
  • Jim Boeheim
 

Lists that don't look like lists

list

Key points:

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

list-style: none

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

<ul id="extglobalnav">
  <li>calendar</li>
  <li>forms</li>
  <li>help</li>
  <li>search</li>
  <li>login</li>
</ul>

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

ul#extglobalnav {
  list-style: none;
}
 

list

li {display: inline;}

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

<ul id="extglobalnav">
  <li>calendar</li>
  <li>forms</li>
  <li>help</li>
  <li>search</li>
  <li>login</li>
</ul>

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

ul#extglobalnav {
  list-style: none;
  padding-left: 0;
}
ul#extglobalnav li {
  display: inline;
  padding-left: 2em;
}
 

list

Another look at Selectors

css 2.1 selectors

Pseudo-Classes and Elements

CSS 2.1 defines pseudo-classes and pseudo-elements. Examples are p:first-line, li:first-child, and input:focus

Pseudo-Classes Pseudo-Elements
  • first-child
  • link
  • visited
  • hover
  • active
  • focus
  • lang
  • first-line
  • first-letter
  • before
  • after

Link Pseudo Classes

Use the "link-visited-hover-active" or "LVHA" ordering (some like to remember this by "LoVe HAte").

Example 4.49 - a pseudo-classes (link, visited, hover, active)) - View example by itself (Without Styles)




<ul>
<li><a href="http://www.extension.harvard.edu/about-us" shape="rect">About Us</a></li>
<li><a href="http://www.extension.harvard.edu/courses" shape="rect">Courses</a></li>
<li><a href="http://www.extension.harvard.edu/registration" shape="rect">Registration</a></li>
<li><a href="http://www.extension.harvard.edu/degrees-certificates" shape="rect">Degrees & Certificates</a></li>
<li><a href="http://www.extension.harvard.edu/distance-education" shape="rect">Distance Education</a></li>
<li><a href="http://www.extension.harvard.edu/exams-grades-policies" shape="rect">Exams, Grades, & Policies</a></li>
<li><a href="http://www.extension.harvard.edu/resources" shape="rect">Resources</a></li>
<li><a href="http://www.extension.harvard.edu/hub" shape="rect">News Hub</a></li>
</ul>

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

a:link { 
    text-decoration: none; 
    color: blue;
    background-color: white;
    }
a:visited {
    text-decoration: none;
    color: #66f;            /* lighter blue */
    background-color: #ccc; /* grey */
}
a:hover {
    text-decoration: none;
    color: white;
    background-color: blue;
}
a:active { 
    text-decoration: underline;
    color: red;
    background-color: yellow;
}
/** 
	Some tweaks to make the list 
    look more like a sidebar 
    navigation.  Not important for
    to illustrate the 
    a pseudo classes
*/
ul { font-family: sans-serif; font-weight: bold; width: 25%; list-style: none;}
a {margin: 0.25em; padding: 0.25em; display: block;}
 

a pseudo classes default

a:hover

a:active

input:focus

Example 4.50 - input:focus pseudo-class - View example by itself (Without Styles)
      

<p>Form illustrating input:focus</p>
<form method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded">
  First name: <input type="firstname"/><br/>
  Last name: <input type="lastname"/><br/>
  Email:  <input type="email"/><br/>
  <input type="submit"/>
</form>
      

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

input:focus { 
  background-color: #ffc; 
  border: medium solid orange;
}
 

inputfocus

inputfocus

Multiple Stylesheets

Multiple <link /> Elements

multiple css files through link elements

@import

multiple css files through @import

The Cascade and Specificity

See: CSS 2.1: Assigning property values, Cascading, and Inheritance

cascade
Image from Flickr user Cayusa, used under Creative Commons license.

Stylesheet Origin

Specificity of Selector

Order


Cascade: Setting the Table

CSS:

body {
    font-family: calibri,verdana,tahoma,arial,helvetica,sans-serif;
    margin: 0px 5%;
    background-color: #ccc;
    color: #000;
}
h1, h2, h3, h4, h5, h6 { color: white; background-color: green; }
ul { background-color: yellow; }
p {
    color: white;
    background-color: crimson;
    padding: 0.5em;
}
#header { width: 100%; }
#footer { width: 100%; clear: both;}
#nav { width: 15%; float: left; padding-right: 10px;}
#sidebar { width: 33%; float: right; }
#main { width: 50%; float: left; }

Markup:

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS Test</title>
  <link rel="stylesheet" type="text/css" href="setup.css" />
</head>
<body>
  <div id="header">
    <h1>Header: Lorem ipsum</h1>
  </div>
  <div id="nav">
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Vestibulum</a></li>
      <li><a href="#">condimentum</a></li>
      <li><a href="#">dictum</a></li>
    </ul>
  </div>
  <div id="main">
    <h2>Main</h2>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales sollicitudin felis eu suscipit. Nunc faucibus pulvinar molestie. Nunc ut leo arcu, vitae sagittis massa. Sed consequat sollicitudin purus, eu commodo velit adipiscing et. Aenean at commodo felis.</p>
    <p>Pellentesque sodales, lacus sit amet consequat aliquet, purus tellus egestas enim, non bibendum odio sapien eu justo. Etiam aliquet lobortis velit, id sagittis dui scelerisque eu. Vestibulum in hendrerit tellus. Proin odio augue, tincidunt eget cursus at, laoreet quis nisl.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>In egestas sollicitudin dui, vitae faucibus elit accumsan et.</li>
    </ul>
    <p>Fusce ac tellus enim. Morbi sodales nibh vel orci pharetra dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sapien velit, ullamcorper eget ullamcorper id, tempus et libero. Duis gravida dapibus mauris vel placerat. Vivamus ornare tempus auctor.</p>
  </div>
  <div id="sidebar">
    <h2>Sidebar</h2>
    <p class="summary">Duis tincidunt tempor leo. Nulla facilisi. Vivamus faucibus fringilla ultricies. Aliquam mollis sapien eu quam euismod facilisis.</p>
    <ul>
      <li>Vestibulum feugiat tristique arcu, consequat volutpat urna bibendum vitae.</li>
      <li>Nunc sagittis metus at odio posuere quis imperdiet leo consectetur.</li>
    </ul>
    <p>Phasellus a tortor sit amet dolor congue tristique in sed nulla. Suspendisse potenti. Quisque rutrum leo id dolor ultrices a auctor ligula varius.</p>
  </div>
  <div id="footer">
    <h2>Footer</h2>
    <p>Nulla viverra lectus quis leo tincidunt accumsan.</p>
  </div>
</body>
</html>

Cascade: Stylesheet Origin

CSS:

body {
    font-family: calibri,verdana,tahoma,arial,helvetica,sans-serif;
    margin: 0px 5%;
    background-color: #ccc;
    color: #000;
}
h1, h2, h3, h4, h5, h6 { color: white; background-color: green; }
ul { background-color: yellow; }
p {
    color: white;
    background-color: crimson;
    padding: 0.5em;
}
#header { width: 100%; }
#footer { width: 100%; clear: both;}
#nav { width: 15%; float: left; padding-right: 10px;}
#sidebar { width: 33%; float: right; }
#main { width: 50%; float: left; }

Markup:

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS Test</title>
  <link rel="stylesheet" type="text/css" href="origin.css" />
  <style type="text/css">
  p {
    border: thick dotted blue;
    background-color: orange;
  }
  </style>
</head>
<body>
  <div id="header">
    <h1>Header: Lorem ipsum</h1>
  </div>
  <div id="nav">
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Vestibulum</a></li>
      <li><a href="#">condimentum</a></li>
      <li><a href="#">dictum</a></li>
    </ul>
  </div>
  <div id="main">
    <h2>Main</h2>
    <p class="summary" style="background-color: blue; border-color: red;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales sollicitudin felis eu suscipit. Nunc faucibus pulvinar molestie. Nunc ut leo arcu, vitae sagittis massa. Sed consequat sollicitudin purus, eu commodo velit adipiscing et. Aenean at commodo felis.</p>
    <p>Pellentesque sodales, lacus sit amet consequat aliquet, purus tellus egestas enim, non bibendum odio sapien eu justo. Etiam aliquet lobortis velit, id sagittis dui scelerisque eu. Vestibulum in hendrerit tellus. Proin odio augue, tincidunt eget cursus at, laoreet quis nisl.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>In egestas sollicitudin dui, vitae faucibus elit accumsan et.</li>
    </ul>
    <p>Fusce ac tellus enim. Morbi sodales nibh vel orci pharetra dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sapien velit, ullamcorper eget ullamcorper id, tempus et libero. Duis gravida dapibus mauris vel placerat. Vivamus ornare tempus auctor.</p>
  </div>
  <div id="sidebar">
    <h2>Sidebar</h2>
    <p class="summary">Duis tincidunt tempor leo. Nulla facilisi. Vivamus faucibus fringilla ultricies. Aliquam mollis sapien eu quam euismod facilisis.</p>
    <ul>
      <li>Vestibulum feugiat tristique arcu, consequat volutpat urna bibendum vitae.</li>
      <li>Nunc sagittis metus at odio posuere quis imperdiet leo consectetur.</li>
    </ul>
    <p>Phasellus a tortor sit amet dolor congue tristique in sed nulla. Suspendisse potenti. Quisque rutrum leo id dolor ultrices a auctor ligula varius.</p>
  </div>
  <div id="footer">
    <h2>Footer</h2>
    <p>Nulla viverra lectus quis leo tincidunt accumsan.</p>
  </div>
</body>
</html>

Cascade: Specificity

CSS:

body {
    font-family: calibri,verdana,tahoma,arial,helvetica,sans-serif;
    margin: 0px 5%;
    background-color: #ccc;
    color: #000;
}
h1, h2, h3, h4, h5, h6 { color: white; background-color: green; }
ul { background-color: yellow; }
p {
    color: white;
    background-color: crimson;
    padding: 0.5em;
}
#header { width: 100%; }
#footer { width: 100%; clear: both;}
#nav { width: 15%; float: left; padding-right: 10px;}
#sidebar { width: 33%; float: right; }
#main { width: 50%; float: left; }

div p {
    background-color: orange;
    color: white;
}
.summary {
    border: medium solid black;
    color: black;
    background-color: white;
}
#sidebar p {
    background-color: purple;
    color: white;
}
#footer {
    background-color: #fff;
    color: #ccc;
    font-size: small;
    text-align: center;
}
h2 { display: none; }
#main h2 {display: block; }

Markup:

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS Test</title>
  <link rel="stylesheet" type="text/css" href="setup.css" />
</head>
<body>
  <div id="header">
    <h1>Header: Lorem ipsum</h1>
  </div>
  <div id="nav">
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Vestibulum</a></li>
      <li><a href="#">condimentum</a></li>
      <li><a href="#">dictum</a></li>
    </ul>
  </div>
  <div id="main">
    <h2>Main</h2>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales sollicitudin felis eu suscipit. Nunc faucibus pulvinar molestie. Nunc ut leo arcu, vitae sagittis massa. Sed consequat sollicitudin purus, eu commodo velit adipiscing et. Aenean at commodo felis.</p>
    <p>Pellentesque sodales, lacus sit amet consequat aliquet, purus tellus egestas enim, non bibendum odio sapien eu justo. Etiam aliquet lobortis velit, id sagittis dui scelerisque eu. Vestibulum in hendrerit tellus. Proin odio augue, tincidunt eget cursus at, laoreet quis nisl.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>In egestas sollicitudin dui, vitae faucibus elit accumsan et.</li>
    </ul>
    <p>Fusce ac tellus enim. Morbi sodales nibh vel orci pharetra dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sapien velit, ullamcorper eget ullamcorper id, tempus et libero. Duis gravida dapibus mauris vel placerat. Vivamus ornare tempus auctor.</p>
  </div>
  <div id="sidebar">
    <h2>Sidebar</h2>
    <p class="summary">Duis tincidunt tempor leo. Nulla facilisi. Vivamus faucibus fringilla ultricies. Aliquam mollis sapien eu quam euismod facilisis.</p>
    <ul>
      <li>Vestibulum feugiat tristique arcu, consequat volutpat urna bibendum vitae.</li>
      <li>Nunc sagittis metus at odio posuere quis imperdiet leo consectetur.</li>
    </ul>
    <p>Phasellus a tortor sit amet dolor congue tristique in sed nulla. Suspendisse potenti. Quisque rutrum leo id dolor ultrices a auctor ligula varius.</p>
  </div>
  <div id="footer">
    <h2>Footer</h2>
    <p>Nulla viverra lectus quis leo tincidunt accumsan.</p>
  </div>
</body>
</html>

Use semantic "class" and "id" values

You can choose class and id values when authoring your CSS and XHTML. A good rule is to create "logical" class and id values and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Good Class/ID Names Poor Class Names
  • header
  • footer
  • navigation
  • gallery
  • imgcaption
  • aside
  • callout
  • warn
  • info
  • pagetop
  • rightcolumn
  • rightnav
  • thinborder
  • redbold
  • center

Choosing class and id names appropriately will help with:

Beware of Divitis and Classitis

divitis
An unhealthy markup condition characterized by the profligate use of the "div" element
classitis
An unhealthy markup condition characterized by the profligate use of "class" attributes

divitis  divitis

Avoid Divitis, Classitis, Tagitis, etc.

Instead of...
<div class="header">Our Solar System</div>

or even

<div class="header"><h1>Our Solar System</h1></div>
why not...
<h1>Our Solar System</h1>

Instead of...
<div class="basketball">
  <ul>
    <li>Mark Few</li>
    <li>Roy Williams</li>
    <li>Thad Matta</li>
    ...
  
why not...
<ul class="basketball">
    <li>Mark Few</li>
    <li>Roy Williams</li>
    <li>Thad Matta</li>
    ...

Copyright © 1998-2014 David P. Heitmeyer