Session 04 - CSS

Harvard Extension School  
Fall 2020

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

Topics

  1. Anatomy of a CSS Rule
  2. Box Model or Block Model
  3. Float
  4. Display: block, inline
  5. Backgrounds
  6. Lists
  7. CSS Selectors
  8. CSS Colors
  9. Fonts
  10. CSS Best Practices
  11. CSS Rules and Specificity

Session 04 - CSS, slide1
Anatomy of a CSS Rule, slide2
CSS Mechanics - Binding Styles to Markup, slide3
Box Model or Block Model, slide4
margin, padding, border, slide5
border-style, slide6
Margin, Padding, Border Example, slide7
TRBL for padding and margin shorthand, slide8
Float, slide9
Float, slide10
Float and Clear, slide11
Float and Clear, slide12
Float and Clear!, slide13
How to get image to be contained in box?, slide14
Float Opposite, slide15
Float and an adapable table-like presentation, slide16
Float adapable table-like presentation, slide17
Display: block, inline, slide18
Backgrounds, slide19
Backgrounds, slide20
Backgrounds - Icons, slide21
Backgrounds, slide22
Lists, slide23
Lists with Image, slide24
Lists that don't look like lists, slide25
CSS Selectors, slide26
Pseudo-Classes and Elements, slide27
Link Pseudo Classes, slide28
input:focus, slide29
CSS Colors, slide30
Colorpicker, slide31
Colors, slide32
Fonts, slide33
Font - @font-face, slide34
Font - Include through link element, slide35
Font - Include through JavaScript, slide36
Fonts, slide37
CSS Best Practices, slide38
Beware of Divitis and Classitis, slide39
Avoid Divitis, Classitis, Tagitis, etc., slide40
CSS Rules and Specificity, slide41
Cascade: Setup, slide42
Cascade: Stylesheet Origin, slide43
Cascade: Specificity, slide44

Presentation contains 44 slides

Anatomy of a CSS Rule

CSS Rule

css rule

Selector and Declarations

css selector and declarations

Properties and Values

css property and value

CSS Mechanics - Binding Styles to Markup

Three ways to bind CSS rules to HTML markup:

Box Model or Block Model

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

A more detailed look:

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

In your browser

box model in chrome

box model in firefox

margin, padding, border

border-style

Example 4.1 - Border Styles - Example 4.1 (Without Styles)
 
 <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>

In style element (<style>) 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.2 - Margin, Padding, Border - Example 4.2 (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>) 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.3 - float: none; - Example 4.3 (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>) within head element: 

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

float none

Example 4.4 - float: right; - Example 4.4 (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>) within head element: 

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

float none

Float

Float: right

Example 4.5 - float: right; - Example 4.5 (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>) 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.6 - float: left; - Example 4.6 (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>) 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.7 - float: right; clear: none; - Example 4.7 (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>) 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.8 - float: right; clear: right; - Example 4.8 (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>) 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.9 - float: right; clear: left; - Example 4.9 (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>) 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.10 - clear: none; - Example 4.10 (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>) 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.11 - clear: right; - Example 4.11 (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>) 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.12 - overflow: auto; - Example 4.12 (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.
 </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.
 </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.
 </p>

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

p.airplane {
  clear: right;
  line-height: 1.5em;
  padding: 1em;
  margin: 1em;
  border: medium solid blue;
  overflow: auto;
}
.airplane img {
  float: right;
  border: thin dotted black;
  padding: 5px;
}
 

clear

Float Opposite

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

Example 4.13 - float left and right - Example 4.13 (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>
 <footer>
   <nav class="course">
     <a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home     </a>|
     <a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu     </a>   </nav>
   <nav class="global">
     <a href="http://www.harvard.edu/">Harvard University     </a>|
     <a href="http://www.extension.harvard.edu/">Extension School     </a>   </nav> </footer>

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

footer {
  background-color: #fcf;
  border-top: thin solid #333;
}
footer nav.course { float: left; }
footer nav.global { float: right; }
footer nav {
  padding: 0.25em 0.5em 0.25em 0.5em;
  font-size: 0.8rem;
  font-family: helvetica, sans-serif;
}
footer nav a:link,
footer nav a:visited,
footer nav a:hover,
footer nav a:active {
  text-decoration: none;
  color: navy;
  font-weight: bold;
  padding: 0.25em;
}
footer nav a:hover {
  color: #fff;
  background-color: navy;
}
 

float opposite

The background color of the parent footer did not display. The p elements within the footer have been "floated," therefore they have been removed from the calculation of the box model of the footer. The parent footer size is null.

Solutions:

Example 4.14 - float left and right and parent footer - Example 4.14 (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>
 <footer>
   <nav class="course">
     <a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home     </a>|
     <a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu     </a>   </nav>
   <nav class="global">
     <a href="http://www.harvard.edu/">Harvard University     </a>|
     <a href="http://www.extension.harvard.edu/">Extension School     </a>   </nav> </footer>

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

footer {
    background-color: #fcf;
    border-top: thin solid #333;
    overflow: auto;
  }
  footer nav.course { float: left; }
  footer nav.global { float: right; }
  footer nav {
    padding: 0.25em 0.5em 0.25em 0.5em;
    font-size: 0.8rem;
    font-family: helvetica, sans-serif;
  }
  footer nav a:link,
  footer nav a:visited,
  footer nav a:hover,
  footer nav a:active {
    text-decoration: none;
    color: navy;
    font-weight: bold;
    padding: 0.25em;
  }
  footer nav a:hover {
    color: #fff;
    background-color: navy;
  }
 

float opposite

Float and an adapable table-like presentation

Here each "person" is div (or p or li), which contains a thumbnail and a caption. The containing 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.

Congress

floatfloat

Solar System

markup

Float adapable table-like presentation

It is important to set height and width!

Example 4.15 - Making a grid: setting width but not height - Example 4.15 (Without Styles)

 <ul class="gallery">
   <li>
     <img src="images/777-t-1.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-2.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-3.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-4.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-5.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-6.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/787-t-1.jpg" alt="777"/>

     <br/>
Boeing 787 Dreamliner
   </li>
   <li>
     <img src="images/787-t-2.jpg" alt="777"/>

     <br/>
Boeing 787 Dreamliner
   </li>
   <li>
     <img src="images/bbj-t-1.jpg" alt="777"/>

     <br/>
Boeing Business Jet
   </li> </ul>

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

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

float

Example 4.16 - Making a grid: setting height and width - Example 4.16 (Without Styles)

 <ul class="gallery">
   <li>
     <img src="images/777-t-1.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-2.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-3.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-4.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-5.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/777-t-6.jpg" alt="777"/>

     <br/>
Boeing 777
   </li>
   <li>
     <img src="images/787-t-1.jpg" alt="777"/>

     <br/>
Boeing 787 Dreamliner
   </li>
   <li>
     <img src="images/787-t-2.jpg" alt="777"/>

     <br/>
Boeing 787 Dreamliner
   </li>
   <li>
     <img src="images/bbj-t-1.jpg" alt="777"/>

     <br/>
Boeing Business Jet
   </li> </ul>

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

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

float

Display: block, inline

display property can be set to "block" or "inline"

Example 4.17 - label as inline - Example 4.17

 <form method="post" action="https://cscie12.dce.harvard.edu/echo">
   <label>Name
     <input type="text" name="name"/>
   </label>
   <label>Email
     <input type="email" name="email"/>
   </label>
   <input type="submit" value="Submit"/>

 </form>
 
Example 4.18 - label as inline - Example 4.18 (Without Styles)
 
 <form method="post" action="https://cscie12.dce.harvard.edu/echo">
   <label>Name
     <input type="text" name="name"/>
   </label>
   <label>Email
     <input type="email" name="email"/>
   </label>
   <input type="submit" value="Submit"/>

 </form>

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

label { display: block;
margin: 1em;}
input { display: block; }
input[type=submit] { margin: 1em;}
 

Backgrounds

Background Image with CSS

A background image with CSS:

Example 4.19 - Background Image with CSS - Example 4.19 (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>) within head element: 

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

background

Repeat

Repeat on y-axis only:

Example 4.20 - background-repeat: repeat-y - Example 4.20 (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>) 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.21 - no-repeat and fixed - Example 4.21 (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>) 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.22 - background images - Example 4.22 (Without Styles)

 <div class="wood">Wood
   <div class="marble">Marble
     <div class="water">Water
     </div>
   </div>
 </div>

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

Social Media

social media icons as background images

<ul class="list-social-links list-clean">
  <li>
    <a href="http://facebook.com/harvard" class="social-link social-link--facebook">
      <span class="is-visually-hidden">
        Facebook
      </span>
    </a>
  </li>
  <li>
    <a href="http://twitter.com/harvard" class="social-link social-link--twitter">
      <span class="is-visually-hidden">
        Twitter
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.instagram.com/harvard" class="social-link social-link--instagram">
      <span class="is-visually-hidden">
        Instagram
      </span>
    </a>
  </li>
  <li>
    <a href="http://youtube.com/harvard" class="social-link social-link--youtube">
      <span class="is-visually-hidden">
        YouTube
      </span>
    </a>
  </li>
  <li>
    <a href="https://soundcloud.com/harvard" class="social-link social-link--soundcloud">
      <span class="is-visually-hidden">
        SoundCloud
      </span>
    </a>
  </li>
  <li>
    <a href="http://plus.google.com/+harvard" class="social-link social-link--google-plus">
      <span class="is-visually-hidden">
        Google Plus
      </span>
    </a>
  </li>
  <li>
    <a href="https://www.linkedin.com/edu/school?id=18483" class="social-link social-link--linkedin">
      <span class="is-visually-hidden">
        LinkedIn
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.harvard.edu/itunes" class="social-link social-link--itunes">
      <span class="is-visually-hidden">
        iTunes
      </span>
    </a>
  </li>
</ul>

Web Content Management

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

Background Icons

External Links

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

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

a.external  {
  padding: 2px 25px 2px 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 HTML, we can include design images in the CSS. This example displays the flag.png with the h1 of the markup.

background image

Example 4.25 - background images - Example 4.25 (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>) 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

Lists

Ordered List

An ordered list (data from: http://fs.ncaa.org/Docs/stats/m_basketball_RB/2019/Coaching.pdf):

Example 4.26 - Ordered List: default - Example 4.26

 <strong>Winningest Active Coaches, Division I NCAA Men's Basketball </strong>
 <ol>
   <li>Mark Few
   </li>
   <li>Roy Williams
   </li>
   <li>John Calipari
   </li>
   <li>Mike Krzyzewski
     <br/>
Bill Self
   </li>
   <li>Sean Miller
   </li>
   <li>Brad Underwood
   </li>
   <li>Dave Rose
   </li>
   <li>Gregg Marshall
   </li>
   <li>Ray Harper
   </li>
 </ol>
Winningest Active Coaches, Division I NCAA Men's Basketball
  1. Mark Few
  2. Roy Williams
  3. John Calipari
  4. Mike Krzyzewski
    Bill Self
  5. Sean Miller
  6. Brad Underwood
  7. Dave Rose
  8. Gregg Marshall
  9. Ray Harper
 

Ordered List

An ordered list:

Example 4.27 - Ordered List: upper-roman - Example 4.27 (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>John Calipari
   </li>
   <li>Mike Krzyzewski
     <br/>
Bill Self
   </li>
   <li>Sean Miller
   </li>
   <li>Brad Underwood
   </li>
   <li>Dave Rose
   </li>
   <li>Gregg Marshall
   </li>
   <li>Ray Harper
   </li>
 </ol>

In style element (<style>) 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. John Calipari
  4. Mike Krzyzewski
    Bill Self
  5. Sean Miller
  6. Brad Underwood
  7. Dave Rose
  8. Gregg Marshall
  9. Ray Harper
 

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.28 - List with images as bullets - Example 4.28 (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>John Calipari
   </li>
   <li>Mike Krzyzewski
     <br/>
Bill Self
   </li>
   <li>Sean Miller
   </li>
   <li>Brad Underwood
   </li>
   <li>Dave Rose
   </li>
   <li>Gregg Marshall
   </li>
   <li>Ray Harper
   </li> </ul>

In style element (<style>) 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
  • John Calipari
  • Mike Krzyzewski
    Bill Self
  • Sean Miller
  • Brad Underwood
  • Dave Rose
  • Gregg Marshall
  • Ray Harper
 

See: Men's Basketball Coaching Records

Lists that don't look like lists

list

Key points:

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

list-style: none

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

 <ul id="extglobalnav">
   <li>About
   </li>
   <li>Calendar
   </li>
   <li>Courses
   </li>
   <li>Contact Us
   </li>
   <li>Faculty Directory
   </li>
   <li>Login
   </li> </ul>

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

ul#extglobalnav {
  list-style: none;
}
 

list

li {display: inline;}

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

 <ul id="extglobalnav">
   <li>About
   </li>
   <li>Calendar
   </li>
   <li>Courses
   </li>
   <li>Contact Us
   </li>
   <li>Faculty Directory
   </li>
   <li>Login
   </li> </ul>

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

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

list

CSS Selectors

css 2.1 selectors

CSS Comments

Note the use of comments in CSS -- they start with /* and end with */. Comments can be on a single line or multi-line.

p.vibrate {
  /* These paragraphs will vibrate off the page! */
  color: red;
  background-color: blue;
}
p.subtle {
  /* These paragraphs will
     be subtle and
     probably hard to read */
  color: white;
  background-color: gray;
}

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-ClassesPseudo-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.31 - a pseudo-classes (link, visited, hover, active)) - Example 4.31 (Without Styles)
   
 <ul>
   <li>
     <a href="#about-us">About Us     </a>
   </li>
   <li>
     <a href="#courses">Courses     </a>
   </li>
   <li>
     <a href="#registration">Registration     </a>
   </li>
   <li>
     <a href="#degrees-certificates">Degrees & Certificates     </a>
   </li>
   <li>
     <a href="#distance-education">Distance Education     </a>
   </li>
   <li>
     <a href="#exams-grades-policies">Exams, Grades, & Policies     </a>
   </li>
   <li>
     <a href="#resources">Resources     </a>
   </li>
   <li>
     <a href="#news-hub">News Hub     </a>
   </li> </ul>

In style element (<style>) 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.32 - input:focus pseudo-class - Example 4.32 (Without Styles)
 
 <p>Form illustrating
   <code>input:focus   </code>
 </p>
 <form method="post" action="http://cscie12.dce.harvard.edu/echo">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>) within head element: 

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

inputfocus

inputfocus

CSS Colors

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

There are also Extended Color Keywords for CSS3, which are the same as SVG 1.0 colors (SVG is a type of image file format).

RGB Color Space

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

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

  • rgb(100%,66%,33%)
  • rgb(255,168,84)
  • #ffa854
 

HSL Color Space

Hue, Saturation, Lightness (HSL) is another way to specify color value. It is based on a cylindrical model of color. Fore more information see:

In CSS3, you can use HSL values (e.g. hsl(29,100%,66%))

Same Color, Expressed differently

Example 4.33 - Background Color - Example 4.33

 <div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <br/>
rgb(100%,66%,33%)
 </div>
 <div style="background-color: #ffa854; padding: 1em; margin: 1em; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <br/>
#ffa854
 </div>
 <div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <br/>
rgb(255,168,84)
 </div>
 <div style="background-color: hsl(29,100%,66%); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <br/>
hsl(29,100%,66%)
 </div>
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)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
hsl(29,100%,66%)
 

Colorpicker

Select Color:

Hex value:

Colors

Exploring Colors

Color Themes

Fonts

Two ways to deal with fonts:

Note:

More resources:

Font - @font-face

Typically used for fonts that are served from your web server.

@font-face {
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap');
}

h1,h2,h3,h4,h5,h6 {
font-family:Montserrat, sans-serif;
}

h1 {
font-size:5em;
}

h2 {
font-size:3em;
}

body {
font-family:Georgia, serif;
}

Font - Include through link element

Using a link element to include CSS with @font-face definitions is how some font hosting services recommend including their fonts. Google Fonts does this.

The server delivering the fonts does browser detection and delivers the CSS file with the appropriate font format.

Note that we are having using two Google Fonts -- Cabin Sketch and Cabin.

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Cabin+Sketch|Cabin" />

Our CSS:

h1,h2,h3,h4,h5,h6 {
font-family:"Cabin Sketch", sans-serif;
}

h1 {
font-size:3em;
}

h2 {
font-size:2em;
}

body {
font-family: Cabin, serif;
}

web font

Note that nothing magical is going on here -- Google is simply returning CSS that uses @font-face with the font format appropriate for the browser making the request.

/* latin */
@font-face {
font-family: 'Cabin';
font-style: normal;
font-weight: 400;
src: local('Cabin Regular'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v8/4VMQLG5UaE3m5rr_emmAqaCWcynf_cDxXwCLxiixG1c.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
src: local('Cabin Sketch Regular'), local('CabinSketch-Regular'), url(https://fonts.gstatic.com/s/cabinsketch/v8/d9fijO34zQajqQvl3YHRCRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Font - Include through JavaScript

This is how some font hosting services have you include their fonts, including Adobe Edge Web Fonts.

The JavaScript does browser detection and then inserts the needed Markup/CSS into the page to include the fonts.

script element to include JavaScript:

<script src="//use.edgefonts.net/stencil-std.js"> </script>

Our CSS:

h1,h2,h3,h4,h5,h6 {
font-weight:400;
font-family:"stencil-std", sans-serif;
}

h1 {
font-size:3em;
}

h2 {
font-size:2em;
}

body {
font-family: Georgia, serif;
}

web font

Fonts

Free

Licensed

CSS Best Practices

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 NamesPoor Class Names
  • pageheader
  • pagefooter
  • globalnav
  • gallery
  • aside
  • callout
  • warn
  • info
  • error
  • blueborder
  • 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>John Calipari</li>
    ...
why not...
<ul class="basketball">
    <li>Mark Few</li>
    <li>Roy Williams</li>
    <li>John Calipari</li>
    ...

CSS Rules 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: 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>