Session 06 - CSS - Specificity, Navigation, Techniques

Harvard Extension School
Fall 2020

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

Topics

Presentation contains 35 slides

Best Practices

HTML Mechanics and Semantics

HTML Mechanics

HTML5. Use HTML5
"Check" HTML code with the Nu Html Checker. It should pass without errors. Warnings are acceptable unless otherwise stated.
Lowercase. Use lowercase for elements and attributes
Best:
<a href="http://extension.harvard.edu/">Harvard Extension School</a>
Avoid:
<A HREF="http://extension.harvard.edu">Harvard Extension School</A>
Quotes. Use quotes around attribute values (typically double quotes)
Best:
<a href="http://extension.harvard.edu/">Harvard Extension School</a>
Avoid:
<a href=http://extension.harvard.edu/>Harvard Extension School</a>

End tags. Use end tags, even if they are optional. They will help with clarity.
Best:

<ul>
  <li>Tea</li>
  <li>Coffee</li>
  <li>Water</li>
</ul>

Avoid:

<ul>
  <li>Tea
  <li>Coffee
  <li>Water
</ul>

Beautify and Prettify. Indent nested block-level tags to help with readability.
Let your editor do this for you -- for example, the Brackets "Beautify" extension by Drew Hamlett works quite well for this.
- An exception to this rule is for production code where you might choose to minify. But for assignments, please "beautify" and "prettify"!
Comment.  Not excessively, but enough so that the person who reads your code will be able to understand the what and why -- you might be that person! We will be that person as we grade.

HTML Semantics

Use h1, h2, etc for headings
Use appropriate elements for grouping content to define page structure and content structure. See MDN: Document and website structure:
- Page Structure:
  - Use main and header and footer as appropriate
  - Use nav for navigation sections on your page
- Content Structure
  - Use article and/or section if appropriate
Use ul and li for lists
Use label for form input elements
Use method="get" or method="post" appropriately for forms
Don't over-usediv and span elements. Same goes for class and id attributes. Use, but don't over-use!

Avoid "div"-itis and "class"-itis and "id"-itis

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>John Calipari</li>
...

why not...

<ul class="basketball">
<li>Mark Few</li>
<li>Roy Williams</li>
<li>John Calipari</li>
...

CSS

CSS - Use semantic "class" and "id" values

You can choose class and id values when authoring your CSS and HTML. 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
pageheader pagefooter globalnav gallery aside callout warn info error	blueborder rightcolumn rightnav thinborder redbold center

Good Class/ID Names

Poor Class Names

pageheader
pagefooter
globalnav
gallery
aside
callout
warn
info
error

blueborder
rightcolumn
rightnav
thinborder
redbold
center

"Sites"

Accessibility

Meet Web Content Accessibility Guidelines (WCAG 2.1)
- Use WAVE Web Accessibility Evaluation Tool to help identify accessibility issues.

File Structure and Organization

Use folders or directories to help organize files. Recommendation is to adopt folder names of styles (for CSS files), scripts (for JavaScript files, and images (for images).
Use index.html filename as appropriate
Prefer filenames that only have lowercase, numeric, underscore or dashes (e.g. avoid spaces, and other things like !@#$%^&*(){}\|?/>

CSS Cascade and Inheritance and Conflicting Rules

Stylesheet Source

author stylesheet
reader (user) stylesheet
browser (user agent) stylesheet

Specificity of Selector

style attribute
count "id" attributes
count number of other attributes ("class")
count element names

Order

last occurence has higher specificity
@import-ed stylesheets come before rules in the importing sheet.

Cascade: Setup

"setup"

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;}
aside { width: 33%; float: right; }
#main { width: 50%; float: left; }

Markup:

<!DOCTYPE html>
 <html>
 <head>
   <title>CSS Test</title>
   <link rel="stylesheet" type="text/css" href="setup.css" />
 </head>
 <body>
   <header>
     <h1>Header: Lorem ipsum</h1>
   </header>
   <nav>
     <h2>Navigation</h2>
     <ul>
       <li><a href="#">Vestibulum</a></li>
       <li><a href="#">condimentum</a></li>
       <li><a href="#">dictum</a></li>
     </ul>
   </nav>
   <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>
   <aside>
     <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>
   </aside>
   <footer>
     <h2>Footer</h2>
     <p>Nulla viverra lectus quis leo tincidunt accumsan.</p>
   </footer>
 </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;}
aside { width: 33%; float: right; }
#main { width: 50%; float: left; }

Markup:

<!DOCTYPE html>
<html>
<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>
 <header>
   <h1>Header: Lorem ipsum</h1>
 </header>
 <nav>
   <h2>Navigation</h2>
   <ul>
     <li><a href="#">Vestibulum</a></li>
     <li><a href="#">condimentum</a></li>
     <li><a href="#">dictum</a></li>
   </ul>
 </nav>
 <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>
 <aside>
   <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>
 </aside>
 <footer>
   <h2>Footer</h2>
   <p>Nulla viverra lectus quis leo tincidunt accumsan.</p>
 </footer>
</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;}
aside { width: 33%; float: right; }
#main { width: 50%; float: left; }
/* below are added rules compared to setup.css */
div p {
   background-color: orange;
   color: white;
}
.summary {
   border: medium solid black;
   color: black;
   background-color: white;
}
aside 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>
<head>
 <title>CSS Test</title>
 <link rel="stylesheet" type="text/css" href="specificity.css" />
</head>
<body>
 <header>
   <h1>Header: Lorem ipsum</h1>
 </header>
 <nav>
   <h2>Navigation</h2>
   <ul>
     <li><a href="#">Vestibulum</a></li>
     <li><a href="#">condimentum</a></li>
     <li><a href="#">dictum</a></li>
   </ul>
 </nav>
 <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>
 <aside>
   <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>
 </aside>
 <footer>
   <h2>Footer</h2>
   <p>Nulla viverra lectus quis leo tincidunt accumsan.</p>
 </footer>
</body>
</html>

CSS "Print" stylesheets

Smashing Magazine: A Guide to the State of Print Stylesheets in 2018

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: 11pt; }
 }
 @media screen {
   body { font-size: medium; }
 }
 @media print {
   body {
     font-size: 12pt;
     color: black;
     background-image: none;
     background-color: white;
   }
   nav {
     display: none;
   }
   hr {
     page-after: page;
   }
}

Navigation Systems

Where am I?
Where can I go?
- What is close by?
- What is further away?

Don't Make Me Think: Navigation

it tells us what's here
it tells us how to use the site
it gives us confidence in the people who built it

Harvard College

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

DMOZ
Bread Crumb Navigation

Harvard Summer School
Breadcrumb Navigation

Construction Projects at FAS, Harvard University
Bread Crumb Navigation

Clamshell navigation

Harvard University
harvard university navigation

Dropdown/Popout Menus

Harvard University
dropdown menu

O'Reilly Books
popup menu

Amazon.com
dropdown menu on Amazon

"Mega" Dropdown Menus

The White House
mega dropdown

Food Network
mega dropdown

Multiple Navigation Modes

Harvard University
harvard university navigation

CSS and Lists for Navigation

Harvard Homepage - lists are outlined in magenta and list items in green. Note that some lists are "horizontal" and some are "vertical" -- exactly how a list is rendered can be controlled by CSS

Top:
harvard home page with lists and list items highlighted

Footer:
harvard home page with lists and list items highlighted

Navigation and Lists

list-style: none
display: inline
display: none
display: block

The "display" property

Common values:

block
inline
none
(flex)

display: inline

list

Key points:

remove list styling
change from "block" to "inline" display

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

Example 6.1 - display: inline; - Example 6.1 (Without Styles)

Markup
Style

 
 <nav>
   <ul>
     <li>Academics
     </li>
     <li>Registration & Admissions
     </li>
     <li>Resources Policies
     </li>
     <li>Blog
     </li>   </ul> </nav>

In style element (<style>) within head element:


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

display: none

Example 6.2 - display: none; - Example 6.2 (Without Styles)

Markup
Style
Screenshot

 
 <nav>
   <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>Houston
             </li>
             <li>Los Angeles
             </li>
             <li>Oakland
             </li>
             <li>Texas
             </li>
             <li>Seattle
             </li>           </ul>
         </li>       </ul>
     </li>   </ul> </nav>

In style element (<style>) within head element:


#ale ul { display: none; }
#alw ul { display: none; }

display

Full list for the American League:
display

Inline Lists

list

Key points:

remove list styling
change from "block" to "inline" display

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

list-style: none

Example 6.3 - list-style: none; - Example 6.3 (Without Styles)

Markup
Style
Screenshot


 <nav>
   <ul id="extglobalnav">
     <li>About
     </li>
     <li>Calendar
     </li>
     <li>For Degree Candidates
     </li>
     <li>Courses
     </li>
     <li>Faculty Directory
     </li>
     <li>Login
     </li>   </ul> </nav>

In style element (<style>) within head element:

ul#extglobalnav {
  list-style: none;
}

list

li {display: inline;}

Example 6.4 - list-style: none; - Example 6.4 (Without Styles)

Markup
Style
Screenshot


 <nav>
   <ul id="extglobalnav">
     <li>About
     </li>
     <li>Calendar
     </li>
     <li>For Degree Candidates
     </li>
     <li>Courses
     </li>
     <li>Faculty Directory
     </li>
     <li>Login
     </li>   </ul> </nav>

In style element (<style>) within head element:

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

list

With Other Styles - TODO

Example 6.5 - list-style: none; - Example 6.5 (Without Styles)

Markup
Style
Screenshot


 <nav>
   <ul id="extglobalnav">
     <li>
       <a href="#">About       </a>
     </li>
     <li>
       <a href="#">Calendar       </a>
     </li>
     <li>
       <a href="#">For Degree Candidates       </a>
     </li>
     <li>
       <a href="#">Courses       </a>
     </li>
     <li>
       <a href="#">Faculty Directory       </a>
     </li>
     <li class="login">
       <a href="#">Login       </a>
     </li>   </ul> </nav>

In style element (<style>) within head element:

#extglobalnav {
 list-style: none;
 padding-left: 0;
 float: right;
 margin-right: 2em;
 font-family: Arial Narrow, sans-serif;
}
#extglobalnav li {
 display: inline;
 padding-left: 2em;
 font-weight: bold;
}
#extglobalnav a:link,
#extglobalnav a:visited,
#extglobalnav a:hover,
#extglobalnav a:active
{
  color: #4d84c4;
  text-decoration: none;
}
#extglobalnav li.login {
  padding: 0.3em 1em;
  border: 3px solid #4d84c4;
  margin-left: 2em;
}

list

Lists as Horizontal Navigation

lists

Key points:

remove list styling
change from "block" to "inline" (or "inline-block") display

Example 6.6 - simple list - Example 6.6

Markup
Display


 <ul>
   <li>Academics
   </li>
   <li>Tuition and Enrollment
   </li>
   <li>Resources and Policies
   </li>
   <li>Inside Extension
   </li> </ul>

Academics
Tuition and Enrollment
Resources and Policies
Inside Extension

Example 6.7 - inline list items - Example 6.7 (Without Styles)

Markup
Style
Screenshot


 <nav>
   <ul id="extnav">
     <li>Academics
     </li>
     <li>Tuition and Enrollment
     </li>
     <li>Resources and Policies
     </li>
     <li>Inside Extension
     </li>   </ul> </nav>

In style element (<style>) within head element:

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

inline list items

Note the labeling of the current area of the site the user is in with the "active" class.

Example 6.8 - Inline List Items - Example 6.8 (Without Styles)

Markup
Style
Screenshot


 <nav>
   <ul id="extnav">
     <li>
       <a href="#">Academics       </a>
     </li>
     <li class="active">
       <a href="#">Tuition and Enrollment       </a>
     </li>
     <li>
       <a href="#">Resources and Policies       </a>
     </li>
     <li>
       <a href="#">Inside Extension       </a>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example8.css"/>

In example8.css

* {
  background-color: white;
}

ul#extnav {
  list-style: none;
  font-weight: bold;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #1e1e1e;
  background-color: white;
  margin-top: 1em;
}

ul#extnav li {
  display: inline;
  margin: 0;
  padding: 0;
}

ul#extnav a {
  padding: 0.5em;
  margin-right: 0;
  background-color: white;
  border-right: 1px solid black;
}
ul#extnav li:last-child a {
  border-style: none;
}
ul#extnav a:link,
ul#extnav a:visited {
  color: black;
  text-decoration: none;
}

ul#extnav a:hover {
  color: #a51c30;
  text-decoration: underline;
}
ul#extnav .active {  background-color: #f5f5f8;}
ul#extnav .active a:link,
ul#extnav .active a:visited,
ul#extnav .active a:hover,
ul#extnav .active a:active {
  background-color: #f5f5f8;
  color: #a51c30;
  text-decoration: none;
}

list

Lists as Side Navigation

Key points:

remove list styling
make "a" element "block" display

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.9 - lists as navigation - Example 6.9 (Without Styles)

Markup
Style
Screenshot


 <nav id="navigation1">
   <ul>
     <li>
       <a href="http://www.baylor.edu/">Baylor       </a>
     </li>
     <li>
       <a href="http://www.iastate.edu/">Iowa State       </a>
     </li>
     <li>
       <a href="http://www.ku.edu/">Kansas       </a>
     </li>
     <li>
       <a href="http://www.ksu.edu/">Kansas State       </a>
     </li>
     <li>
       <a href="http://www.ou.edu/">Oklahoma       </a>
     </li>
     <li>
       <a href="http://www.okstate.edu/">Oklahoma State       </a>
     </li>
     <li>
       <a href="http://www.tcu.edu/">Texas Christian       </a>
     </li>
     <li>
       <a href="http://www.utexas.edu/">Texas       </a>
     </li>
     <li>
       <a href="http://www.ttu.edu/">Texas Tech       </a>
     </li>
     <li>
       <a href="http://www.wvu.edu/">West Virginia       </a>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example9.css"/>

In example9.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: 5px 2px 5px 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

Lists as Navigation

Nested list styled as "clamshell" navigation.

remove list styling
make "a" element "block" display
styles for secondary nested lists (e.g. selector for ul ul a)
display: none for nested lists that you don't want to display

Example 6.10 - Nested lists for 'clamshell' navigation - Example 6.10 (Without Styles)

<nav id="navclam"><ul><li><a href="http://big12sports.collegesports.com/">Big XII</a><ul><li><a href="http://www.baylor.edu/">Baylor</a></li><li><a href="http://www.iastate.edu/">Iowa State</a></li><li><a href="http://www.ku.edu/">Kansas</a></li><li><a href="http://www.ksu.edu/">Kansas State</a></li><li><a href="http://www.ou.edu/">Oklahoma</a></li><li><a href="http://www.okstate.edu/">Oklahoma State</a></li><li><a href="http://www.tcu.edu/">Texas Christian</a></li><li><a href="http://www.utexas.edu/">Texas</a></li><li><a href="http://www.ttu.edu/">Texas Tech</a></li><li><a href="http://www.wvu.edu/">West Virginia</a></li></ul></li><li><a href="http://www.ivyleaguesports.com/">Ivy League</a><ul class="collapse"><li><a href="http://www.brown.edu/">Brown</a></li><li><a href="http://www.columbia.edu/">Columbia</a></li><li><a href="http://www.cornell.edu/">Cornell</a></li><li><a href="http://www.dartmouth.edu/">Dartmouth</a></li><li><a href="http://www.harvard.edu/">Harvard</a></li><li><a href="http://www.upenn.edu/">Penn</a></li><li><a href="http://www.princeton.edu/">Princeton</a></li><li><a href="http://www.yale.edu/">Yale</a></li></ul></li><li><a href="http://www.pac-12.com/">Pac 12</a><ul class="collapse"><li><a href="http://www.arizona.edu/">Arizona</a></li><li><a href="http://www.asu.edu/">Arizona State</a></li><li><a href="http://www.berkeley.edu/">California</a></li><li><a href="http://www.cu.edu/">Colorado</a></li><li><a href="http://www.uoregon.edu/">Oregon</a></li><li><a href="http://www.oregonstate.edu/">Oregon State</a></li><li><a href="http://www.stanford.edu/">Stanford</a></li><li><a href="http://www.ucla.edu/">UCLA</a></li><li><a href="http://www.usc.edu/">USC</a></li><li><a href="http://www.utah.edu/">Utah</a></li><li><a href="http://www.washington.edu/">Washington</a></li><li><a href="http://www.wsu.edu/">Washington State</a></li></ul></li></ul></nav>

#navclam {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  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: 5px 2px 5px 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 {
  list-style: none;
}
#navclam ul ul a {
  padding-left: 1.5em;
  font-size: 90%;
  font-weight: normal;
}
#navclam ul.collapse {
  display: none;
}

Markup
Style
Screenshot


 <nav id="navclam">
   <ul>
     <li>
       <a href="http://big12sports.collegesports.com/">Big XII       </a>
       <ul>
         <li>
           <a href="http://www.baylor.edu/">Baylor           </a>
         </li>
         <li>
           <a href="http://www.iastate.edu/">Iowa State           </a>
         </li>
         <li>
           <a href="http://www.ku.edu/">Kansas           </a>
         </li>
         <li>
           <a href="http://www.ksu.edu/">Kansas State           </a>
         </li>
         <li>
           <a href="http://www.ou.edu/">Oklahoma           </a>
         </li>
         <li>
           <a href="http://www.okstate.edu/">Oklahoma State           </a>
         </li>
         <li>
           <a href="http://www.tcu.edu/">Texas Christian           </a>
         </li>
         <li>
           <a href="http://www.utexas.edu/">Texas           </a>
         </li>
         <li>
           <a href="http://www.ttu.edu/">Texas Tech           </a>
         </li>
         <li>
           <a href="http://www.wvu.edu/">West Virginia           </a>
         </li>       </ul>
     </li>
     <li>
       <a href="http://www.ivyleaguesports.com/">Ivy League       </a>
       <ul class="collapse">
         <li>
           <a href="http://www.brown.edu/">Brown           </a>
         </li>
         <li>
           <a href="http://www.columbia.edu/">Columbia           </a>
         </li>
         <li>
           <a href="http://www.cornell.edu/">Cornell           </a>
         </li>
         <li>
           <a href="http://www.dartmouth.edu/">Dartmouth           </a>
         </li>
         <li>
           <a href="http://www.harvard.edu/">Harvard           </a>
         </li>
         <li>
           <a href="http://www.upenn.edu/">Penn           </a>
         </li>
         <li>
           <a href="http://www.princeton.edu/">Princeton           </a>
         </li>
         <li>
           <a href="http://www.yale.edu/">Yale           </a>
         </li>       </ul>
     </li>
     <li>
       <a href="http://www.pac-12.com/">Pac 12       </a>
       <ul class="collapse">
         <li>
           <a href="http://www.arizona.edu/">Arizona           </a>
         </li>
         <li>
           <a href="http://www.asu.edu/">Arizona State           </a>
         </li>
         <li>
           <a href="http://www.berkeley.edu/">California           </a>
         </li>
         <li>
           <a href="http://www.cu.edu/">Colorado           </a>
         </li>
         <li>
           <a href="http://www.uoregon.edu/">Oregon           </a>
         </li>
         <li>
           <a href="http://www.oregonstate.edu/">Oregon State           </a>
         </li>
         <li>
           <a href="http://www.stanford.edu/">Stanford           </a>
         </li>
         <li>
           <a href="http://www.ucla.edu/">UCLA           </a>
         </li>
         <li>
           <a href="http://www.usc.edu/">USC           </a>
         </li>
         <li>
           <a href="http://www.utah.edu/">Utah           </a>
         </li>
         <li>
           <a href="http://www.washington.edu/">Washington           </a>
         </li>
         <li>
           <a href="http://www.wsu.edu/">Washington State           </a>
         </li>       </ul>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example10.css"/>

In example10.css

#navclam {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  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: 5px 2px 5px 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 {
  list-style: none;
}
#navclam ul ul a {
  padding-left: 1.5em;
  font-size: 90%;
  font-weight: normal;
}
#navclam ul.collapse {
  display: none;
}

lists as navigation

Default styling of nested list:
lists as navigation

Dropdown Menus

Key points:

Make the list 'horizontal'
Hide the secondary lists
Use the CSS ":hover" pseudo-class to change secondary list display property

American League dropdown

Example 6.11 - drop down menu - Example 6.11 (Without Styles)

Markup
Style

 
 <ul id="dropdown1">
   <li>
     <a href="#">AL East     </a>
     <ul>
       <li>
         <a href="#">Baltimore         </a>
       </li>
       <li>
         <a href="#">Boston         </a>
       </li>
       <li>
         <a href="#">New York         </a>
       </li>
       <li>
         <a href="#">Toronto         </a>
       </li>
       <li>
         <a href="#">Tampa Bay         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL Central     </a>
     <ul>
       <li>
         <a href="#">Chicago         </a>
       </li>
       <li>
         <a href="#">Cleveland         </a>
       </li>
       <li>
         <a href="#">Detroit         </a>
       </li>
       <li>
         <a href="#">Kansas City         </a>
       </li>
       <li>
         <a href="#">Minnesota         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL West     </a>
     <ul>
       <li>
         <a href="#">Houston         </a>
       </li>
       <li>
         <a href="#">Los Angeles         </a>
       </li>
       <li>
         <a href="#">Oakland         </a>
       </li>
       <li>
         <a href="#">Texas         </a>
       </li>
       <li>
         <a href="#">Seattle         </a>
       </li>     </ul>
   </li> </ul>

In style element (<style>) 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.12 - drop-down menu - Example 6.12 (Without Styles)

Markup
Style
Screenshot

 
 <ul id="dropdown2">
   <li>
     <a href="#">AL East     </a>
     <ul>
       <li>
         <a href="#">Baltimore         </a>
       </li>
       <li>
         <a href="#">Boston         </a>
       </li>
       <li>
         <a href="#">New York         </a>
       </li>
       <li>
         <a href="#">Toronto         </a>
       </li>
       <li>
         <a href="#">Tampa Bay         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL Central     </a>
     <ul>
       <li>
         <a href="#">Chicago         </a>
       </li>
       <li>
         <a href="#">Cleveland         </a>
       </li>
       <li>
         <a href="#">Detroit         </a>
       </li>
       <li>
         <a href="#">Kansas City         </a>
       </li>
       <li>
         <a href="#">Minnesota         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL West     </a>
     <ul>
       <li>
         <a href="#">Houston         </a>
       </li>
       <li>
         <a href="#">Los Angeles         </a>
       </li>
       <li>
         <a href="#">Oakland         </a>
       </li>
       <li>
         <a href="#">Texas         </a>
       </li>
       <li>
         <a href="#">Seattle         </a>
       </li>     </ul>
   </li> </ul>

In style element (<style>) 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.13 - drop-down/out menu - Example 6.13 (Without Styles)

Markup
Style

 
 <ul id="dropdown3">
   <li>
     <a href="#">AL East     </a>
     <ul>
       <li>
         <a href="#">Baltimore         </a>
       </li>
       <li>
         <a href="#">Boston         </a>
       </li>
       <li>
         <a href="#">New York         </a>
       </li>
       <li>
         <a href="#">Toronto         </a>
       </li>
       <li>
         <a href="#">Tampa Bay         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL Central     </a>
     <ul>
       <li>
         <a href="#">Chicago         </a>
       </li>
       <li>
         <a href="#">Cleveland         </a>
       </li>
       <li>
         <a href="#">Detroit         </a>
       </li>
       <li>
         <a href="#">Kansas City         </a>
       </li>
       <li>
         <a href="#">Minnesota         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL West     </a>
     <ul>
       <li>
         <a href="#">Houston         </a>
       </li>
       <li>
         <a href="#">Los Angeles         </a>
       </li>
       <li>
         <a href="#">Oakland         </a>
       </li>
       <li>
         <a href="#">Texas         </a>
       </li>
       <li>
         <a href="#">Seattle         </a>
       </li>     </ul>
   </li> </ul>

In style element (<style>) 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:

inline display
background image for arrows

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

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.14 - Nested lists for 'breadcrumb' navigation - Example 6.14 (Without Styles)

Markup
Style


 <nav id="breadcrumb">
   <ul>
     <li>
       <a href="#">Top       </a>
       <ul>
         <li>
           <a href="#">Science           </a>
           <ul>
             <li>
               <a href="#">Biology               </a>
               <ul>
                 <li>
                   <a href="#">Genetics                   </a>
                   <ul>
                     <li>
                       <a href="#">Genomics                       </a>
                       <ul>
                         <li>
                           <span>Pharmacogenetics                           </span>
                         </li>                       </ul>
                     </li>                   </ul>
                 </li>               </ul>
             </li>           </ul>
         </li>       </ul>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example14.css"/>

In example14.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;
}

Breadcrumbs with a flat list

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.15 - Nested lists for 'breadcrumb' navigation - Example 6.15 (Without Styles)

Markup
Style


 <nav id="breadcrumbf">
   <ul>
     <li>
       <a href="#">Top       </a>
     </li>
     <li>
       <a href="#">Science       </a>
     </li>
     <li>
       <a href="#">Biology       </a>
     </li>
     <li>
       <a href="#">Genetics       </a>
     </li>
     <li>
       <a href="#">Genomics       </a>
     </li>
     <li>
       <span>Pharmacogenetics       </span>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example15.css"/>

In example15.css

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

CSS Rounded Borders

rounded box

CSS3 border-radius

Example 6.16 - CSS3 border-radius - Example 6.16 (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><div class="box tightrounded"><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><div class="box looserounded"><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>

Markup
Style
Screenshot

 
 <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>
 <div class="box tightrounded">
   <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>
 <div class="box looserounded">
   <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>) within head element:

.box {
    width: 260px;
    padding: 0 40px;
    border: 3px solid #009999;
    background-color: #CCFFFF;
    margin: 1em;
}
.rounded {
     border-radius: 25px;
}
.tightrounded {
     border-radius: 10px;
}
.looserounded {
     border-radius: 50px;
}

border radius

CSS Shadows

shadows
Photo by D Sharon Pruitt

box-shadow

box-shadow (MDN)
box-shadow: x-offset y-offset color

boxshadow

CSS3 box-shadow

Example 6.17 - CSS3 box-shadow - Example 6.17 (Without Styles)

Markup
Style
Screenshot

 
 <div class="box shadow">
   <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>) within head element:

.box {
    width: 260px;
    padding: 0 40px;
    border: 3px solid #009999;
    background-color: #CCFFFF;
}
.shadow {
    box-shadow: 5px 5px #99cccc;
}

box shadow

Text Shadow

textshadow

text-shadow

Example 6.18 - CSS3 text-shadow - Example 6.18 (Without Styles)

Markup
Style
Display
Screenshot


 <div>
   <h3 class="shadow">Only the Shadow Knows   </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>) within head element:

h3.shadow {
  background-color: #eef;
  font-size: 24pt;
  padding: 0.25em;
  color: #900;
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: 3px 4px 4px rgba(150,150,150,0.5)
}

Only the Shadow Knows

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.

text shadow

Opacity - RGBA - red, green, blue, alpha

A = alpha channel, used for opacity.
Values of 0 to 1, where 0 is fully transparent, 1 is fully opaque

demo of opacity

Example 6.19 - CSS3 text-shadow - Example 6.19 (Without Styles)

Markup
Style
Display
Screenshot


 <div class="opacity-demo">
   <p style="color: rgba(0,0,0,1)">Opacity of 1
   </p>
   <p style="color: rgba(0,0,0,0.75)">Opacity of 0.75
   </p>
   <p style="color: rgba(0,0,0,0.5)">Opacity of 0.5
   </p>
   <p style="color: rgba(0,0,0,0.25)">Opacity of 0.25
   </p>
   <p style="color: rgba(0,0,0,0)">Opacity of 0
   </p>
 </div>

In style element (<style>) within head element:

.opacity-demo {
  background-image: url('images/satin.png');
  color: white;
}
.opacity-demo p { font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}

Opacity of 1

Opacity of 0.75

Opacity of 0.5

Opacity of 0.25

Opacity of 0

text shadow

CSS Gradients

linear-gradient
radial-gradient

linear gradient

linear-gradient

linear gradient

linear gradient

Example 6.20 - CSS3 Gradient - Example 6.20 (Without Styles)

<div class="highlight1"><p>linear-gradient(0deg,red,black)<br/>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 class="highlight2"><p>linear-gradient(90deg,red,black)<br/>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 class="highlight3"><p>linear-gradient(45deg,black,yellow)<br/>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 class="highlight4"><p>linear-gradient(90deg,red,white,blue)<br/>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 class="highlight5"><p>linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)<br/>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>

Markup
Style
Screenshot

 
 <div class="highlight1">
   <p>linear-gradient(0deg,red,black)
     <br/>
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 class="highlight2">
   <p>linear-gradient(90deg,red,black)
     <br/>
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 class="highlight3">
   <p>linear-gradient(45deg,black,yellow)
     <br/>
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 class="highlight4">
   <p>linear-gradient(90deg,red,white,blue)
     <br/>
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 class="highlight5">
   <p>linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)
     <br/>
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>) within head element:

.highlight1 {
  background-image: linear-gradient(0deg,red,black);
  color: white;
  line-height: 200%;
}
.highlight2 {
  background-image: linear-gradient(90deg,red,black);
  color: white;
  line-height: 200%;
}
.highlight3 {
  background-image: linear-gradient(45deg,black,yellow);
  color: white;
  line-height: 200%;
}
.highlight4 {
  background-image: linear-gradient(90deg,red,white,blue);
  color: white;
  line-height: 200%;
}
.highlight5 {
  background-image: linear-gradient(90deg, red,orange,yellow,green,blue,indigo,violet);
  color: white;
  line-height: 200%;
}

gradient

radial-gradient

radial gradient

radial gradient

Example 6.21 - CSS3 Gradient - Example 6.21 (Without Styles)

<div class="highlight6"><p>circle, red, black<br/>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 class="highlight7"><p>ellipse red black<br/>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 class="highlight8"><p>circle,red,orange,yellow,green,blue,indigo,violet<br/>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 class="highlight9"><p>ellipse,red,orange,yellow,green,blue,indigo,violet<br/>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>

Markup
Style
Screenshot

 
 <div class="highlight6">
   <p>circle, red, black
     <br/>
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 class="highlight7">
   <p>ellipse red black
     <br/>
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 class="highlight8">
   <p>circle,red,orange,yellow,green,blue,indigo,violet
     <br/>
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 class="highlight9">
   <p>ellipse,red,orange,yellow,green,blue,indigo,violet
     <br/>
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>) within head element:

.highlight6 {
  background-image: radial-gradient(circle,red,blue);
  color: white;
  line-height: 200%;
}
.highlight7 {
  background-image: radial-gradient(ellipse,red,blue);
  color: white;
  line-height: 200%;
}
.highlight8 {
  background-image: radial-gradient(circle,red,yellow,green,blue,indigo,violet);
  color: white;
  line-height: 200%;
}
.highlight9 {
  background-image: radial-gradient(ellipse,red,yellow,green,blue,indigo,violet);
  color: white;
  line-height: 200%;
}

gradient