# Session 03 - HTML Forms & Tables, Introduction to CSS

Harvard Extension School
Fall 2021

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

### Topics

1. Markup Recap
2. Accessibility
3. Forms - Basic
4. Accessibility: Label Element
5. HTML5 forms
6. Tables
7. Accessibilty of Tables
8. Presentation - Cascading Style Sheets (CSS)
9. CSS Mechanics - rules and selectors
10. Basic Selectors - elements, class, id
11. CSS Properties and Values
12. Box Model or Block Model
13. display property
14. Tools: Your Browser

Session 03 - HTML Forms & Tables, Introduction to CSS, slide1
Markup Recap, slide2
Components of HTML Elements, slide3
Essential HTML5 Document Structure, slide4
Accessibility, slide5
Forms - Basic, slide6
Forms, slide7
Forms, slide8
form, slide9
HTTP Method: Get vs. Post, slide10
Text Field, slide11
Radio Buttons, slide12
Checkbox, slide13
Textarea, slide14
Select and Option, slide15
Accessibility: Label Element, slide16
Accessibility: Label Element, slide17
Label Element - using id, label, for, slide18
Labels, slide19
fieldset and legend, slide20
optgroup, slide21
HTML5 forms, slide22
HTML5: Placeholder, slide23
HTML5: Autofocus, slide24
HTML5: email and url, slide25
HTML5: number and range, slide26
HTML5: date and time, slide27
submit.php -- it can do more!, slide28
Tables, slide29
A Simple Table, slide30
Adding thead, tfoot, tbody, caption, and summary, slide31
Benefits of Semantics, slide32
Using "col" and "colgroup", slide33
Accessibilty of Tables, slide34
Accessibility using "headers", slide35
What can we do now that relationship is clear?, slide36
Presentation - Cascading Style Sheets (CSS), slide37
Markup, Presentation, Function, slide38
Styles, slide39
Different Styles for The United States Constitution, slide40
Harvard Summer School, slide41
Responsive Web Design, slide42
CSS Recommendations from the W3C, slide43
CSS Mechanics - rules and selectors, slide44
Anatomy of a CSS Rule, slide45
Simple CSS Example, slide46
CSS Mechanics - Binding Styles to Markup, slide47
style attribute, slide48
style element, slide49
link element, slide50
Combining Rules, slide51
Combining Selectors, slide52
Basic Selectors - elements, class, id, slide53
class selectors, slide54
id selectors, slide55
Contextual Selectors, slide56
CSS Properties and Values, slide57
Inheritance, slide58
Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0, slide59
font properties, slide60
font-family, slide61
font-style, slide62
font-variant and font-weight, slide63
font-size, slide64
Font Sizes: Relative vs. Absolute, slide65
font, slide66
text properties, slide67
CSS Values and Units, slide68
Color Units, slide69
Colorpicker, slide70
Box Model or Block Model, slide71
margin, padding, border, slide72
border-style, slide73
TRBL for padding and margin shorthand, slide74
Margin, Padding, Border Example, slide75
display property, slide76
Tools: Your Browser, slide77
Web Browsers and Layout Engines, slide78
Testdrive Your Browser, slide79

Presentation contains 79 slides

- img
- img
- img
- img
- img

## Markup Recap

- HTML5 — Structure / Markup
  - Structure
  - Content
- CSS — Style / Presentation
  - Style
  - Presentation
  - Appearance
- Javascript — Function
  - Actions
  - Manipulations

## Components of HTML Elements

Markup for a Hypertext link:

    <a href="http://www.harvard.edu/">Harvard</a>

How it would render in a web browser:

Start Tag
`<a href="http://www.harvard.edu/">Harvard</a>`

Element Name
`<a href="http://www.harvard.edu/">Harvard</a>`

Attribute
`<a href="http://www.harvard.edu/">Harvard</a>`

Attribute Value
`<a href="http://www.harvard.edu/">Harvard</a>`

Content
`<a href="http://www.harvard.edu/">Harvard</a>`

End Tag
`<a href="http://www.harvard.edu/">Harvard</a>`

## Essential HTML5 Document Structure

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Document Title</title>
      </head>
      <body>
        <header><!-- page header --></header>
        <main><!-- main content of page --></main>
        <footer><!-- page footer --></footer>
      </body>
    </html>

- html
  - head
    - meta
    - title
  - body

## Accessibility

### W3C: Web Accessibility Initiative

Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.

- W3C Web Accessibility Initiative
- Resources for Developers
- WCAG 2.1 Level AA Quick Reference

### WebAIM

- WebAIM
- WAVE Web Accessibility Evaluation Tool

## Forms - Basic

Two elements for forms are in our list of most commonly seen elements:

- `form`
- `input`
- `button`

### Forms

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. The submitted information is passed from the HTTP Server to a server-side program that processes the information and produces a response for the browser.

## Forms

- Text
  - Single line (text input)
  - Password
  - Text area (textarea)
- Choices
  - Choose one
    - radio group
    - option list (menu)
  - Choose multiple
    - checkbox group
- File Upload
- Hidden
- Submit

## Forms

- Text
  - Single line (text input)
  - Password
  - Text area (textarea)
- Choices
  - Choose one
    - radio group
      Yes No Maybe
    - option list (menu)
  - Choose multiple
    - checkbox group
      Baseball Basketball Cricket Football (Soccer)
- File Upload
- Hidden
- Submit

## form

Attributes

- method ("get" or "post")
- action (URL of server-side program to process submitted data/information)

Each element within a form has a name associated with it. When the information is sent back to the server, the CGI program will access the information by name. Thus, the front-end form and the back-end program must use the same names.

While exploring forms, it is useful to use a simple server-side script that simply echo back the name/value information your form submitted (https://cs12.net/form/submit.php).

Example 3.1 - Simple form - Example 3.1<form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><button type="submit"> Submit </button></form>

- Markup
- Display

     <form method="post" action="https://cs12.net/form/submit.php">Email Address:
       <input type="text" name="email"/>

       <br/>

       <button type="submit">Submit   </button>
     </form>

Email Address:

## HTTP Method: Get vs. Post

- Use POST when form action should not be repeated; or when the action "changes the state"
- Use GET when form action is safely repeatable; when the action does not change the state.
  The technical term for this is "idempotent".

get: form information sent from browser to server as part of query string, visible in the URL

- Query String

- `https://host/path?param1=value1&param2=value2&param3=value3`
- Question mark
- Ampersand separated parameter/value pairs
- parameter=value

post: form information sent from browser to server as part of HTTP body; not in URL
Example 3.2 - Simple for using 'get' - Example 3.2<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><button type="submit"> Submit </button></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">Email Address:
       <input type="text" name="email"/>

       <br/>

       <button type="submit">Submit   </button>
     </form>

Email Address:
Example 3.3 - Simple form using 'post' - Example 3.3<form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><button type="submit">Submit</button></form>

- Markup
- Display

     <form method="post" action="https://cs12.net/form/submit.php">Email Address:
       <input type="text" name="email"/>

       <br/>

       <button type="submit">Submit   </button>
     </form>

Email Address:

## Text Field

Example 3.4 - Form: text input - Example 3.4<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email" size="50"/><br/> Year of Birth:<input type="text" name="year_of_birth" maxlength="4"/><br/><button type="submit">Submit Information</button></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">Email Address:
       <input type="text" name="email" size="50"/>

       <br/>
    Year of Birth:
       <input type="text" name="year_of_birth" maxlength="4"/>

       <br/>

       <button type="submit">Submit Information   </button>
     </form>

Email Address:
Year of Birth:

## Radio Buttons

Example 3.5 - Form: radio buttons - Example 3.5<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email" size="50"/><br/> Please send me email updates:<br/><input type="radio" name="sendupdates" value="yes" checked="checked"/>yes<br/><input type="radio" name="sendupdates" value="no"/>no<br/><button type="submit">Submit Information</button></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">Email Address:
       <input type="text" name="email" size="50"/>

       <br/>
    Please send me email updates:
       <br/>

       <input type="radio" name="sendupdates" value="yes" checked="checked"/>
    yes
       <br/>

       <input type="radio" name="sendupdates" value="no"/>
    no
       <br/>

       <button type="submit">Submit Information   </button>
     </form>

Email Address:
Please send me email updates:
yes
no

## Checkbox

Example 3.6 - Form: checkboxes - Example 3.6<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> What ice cream do you like?<br/><input type="checkbox" name="icecream" value="chocolate"/>Chocolate<br/><input type="checkbox" name="icecream" value="chocolate peanut butter"/>Chocolate Peanut Butter<br/><input type="checkbox" name="icecream" value="vanilla"/>Vanilla<br/><input type="checkbox" name="icecream" value="strawberry"/>Strawberry<br/><button type="submit">Submit Information</button></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">What ice cream do you like?
       <br/>

       <input type="checkbox" name="icecream" value="chocolate"/>
    Chocolate
       <br/>

       <input type="checkbox" name="icecream" value="chocolate peanut butter"/>
    Chocolate Peanut Butter
       <br/>

       <input type="checkbox" name="icecream" value="vanilla"/>
    Vanilla
       <br/>

       <input type="checkbox" name="icecream" value="strawberry"/>
    Strawberry
       <br/>

       <button type="submit">Submit Information   </button>
     </form>

What ice cream do you like?
Chocolate
Chocolate Peanut Butter
Vanilla
Strawberry

## Textarea

Example 3.7 - Form: textarea - Example 3.7

- Markup
- Display

     <form method="post" action="https://cs12.net/form/submit.php">
       <strong>Comments   </strong>
       <br/>

       <textarea name="comments" rows="10" cols="50">Please enter comments...   </textarea>
       <br/>

       <button type="submit">Submit Information   </button>
     </form>

Comments
Please enter comments...

## Select and Option

### Pull-down menu

Example 3.8 - Pull-down List - Example 3.8<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><button type="submit">Submit Information</button></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">Select your favorite New England states:
       <br/>

       <select name="state">
         <option value="CT">Connecticut     </option>
         <option value="ME">Maine     </option>
         <option value="MA">Massachusetts     </option>
         <option value="NH">New Hampshire     </option>
         <option value="RI">Rhode Island     </option>
         <option value="VT">Vermont     </option>   </select>
       <br/>

       <button type="submit">Submit Information   </button>
     </form>

Select your favorite New England states:

### Scrollable list ← DON'T DO THIS!

Note: because scrollable lists are difficult for users, they are not typically used.

A scrollable list (`size` attribute) that can have multiple selections (`multiple` attribute):

Example 3.9 - Scrollable List - Example 3.9<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state" size="3" multiple="multiple"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><button type="submit">Submit Information</button></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">Select your favorite New England states:
       <br/>

       <select name="state" size="3" multiple="multiple">
         <option value="CT">Connecticut     </option>
         <option value="ME">Maine     </option>
         <option value="MA">Massachusetts     </option>
         <option value="NH">New Hampshire     </option>
         <option value="RI">Rhode Island     </option>
         <option value="VT">Vermont     </option>   </select>
       <br/>

       <button type="submit">Submit Information   </button>
     </form>

Select your favorite New England states:

## Accessibility: Label Element

Label elements are critical for form accessibility.

label element lets us use markup to associate text with an input element.

Using `label` you can make the association between the text label and the form input explicit, and not just rely on the visual proximity.

### Labels - Why?

- Makes text labels associated wtih input elements explicit
- Helps with screen readers!
- Helps with "clicks" and touch screens!

## Accessibility: Label Element

Example 3.10 - Form Labels - Example 3.10<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><p>Do you like to watch NCAA basketball?</p><label><input type="radio" name="basketball" value="Y"/> Yes</label><br/><label><input type="radio" name="basketball" value="N"/> No</label><br/><button type="submit">Submit</button></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">
       <p>Do you like to watch NCAA basketball?
       </p>
       <label>
         <input type="radio" name="basketball" value="Y"/>
    Yes   </label>
       <br/>

       <label>
         <input type="radio" name="basketball" value="N"/>
    No   </label>
       <br/>

       <button type="submit">Submit   </button>
     </form>

Do you like to watch NCAA basketball?

Yes
No

## Label Element - using id, label, for

- Explicit
  - id attribute for form input
  - label element for input label
  - for attribute in label to link label element with input via the value of id

Example 3.11 - Form Labels - Example 3.11<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><p>Do you like to watch NCAA basketball?</p><input type="radio" name="basketball" id="basketball_y" value="Y"/><label for="basketball_y">Yes</label><br/><input type="radio" name="basketball" id="basketball_n" value="N"/><label for="basketball_n">No</label><br/><input type="submit" value="Submit"/></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">
       <p>Do you like to watch NCAA basketball?
       </p>
       <input type="radio" name="basketball" id="basketball_y" value="Y"/>

       <label for="basketball_y">Yes   </label>
       <br/>

       <input type="radio" name="basketball" id="basketball_n" value="N"/>

       <label for="basketball_n">No   </label>
       <br/>

       <input type="submit" value="Submit"/>

     </form>

Do you like to watch NCAA basketball?

Yes
No

## Labels

Example 3.12 - Form Labels - Example 3.12<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><div> What ice cream do you like? <br/><input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate"/><label for="icecream_chocolate">Chocolate</label><br/><input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut butter"/><label for="icecream_cpb">Chocolate Peanut Butter</label><br/><input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla"/><label for="icecream_vanilla">Vanilla</label><br/><input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"/><label for="icecream_strawberry">Strawberry</label><br/><button type="submit">Submit Information</button></div></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">
       <div>What ice cream do you like?
         <br/>

         <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate"/>

         <label for="icecream_chocolate">Chocolate     </label>
         <br/>

         <input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut butter"/>

         <label for="icecream_cpb">Chocolate Peanut Butter     </label>
         <br/>

         <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla"/>

         <label for="icecream_vanilla">Vanilla     </label>
         <br/>

         <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"/>

         <label for="icecream_strawberry">Strawberry     </label>
         <br/>

         <button type="submit">Submit Information     </button>
       </div>
     </form>

What ice cream do you like?
Chocolate
Chocolate Peanut Butter
Vanilla
Strawberry

## fieldset and legend

Used to group related choices and even sets.

fieldset and legend elements can further help group related input fields.

Example 3.13 - Form fieldset and legend elements - Example 3.13<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><div><fieldset><legend>Name</legend><label for="fname">First Name </label><input type="text" name="fname" id="fname" size="30"/><br/><label for="lname">Last Name </label><input type="text" name="lname" id="lname" size="30"/><br/></fieldset><fieldset><legend>Sports</legend><fieldset><legend>Do you like basketball?</legend><input type="radio" name="basketball" id="basketball_yes" value="Y"/><label for="basketball_yes">Yes</label><br/><input type="radio" name="basketball" id="basketball_no" value="N"/><label for="basketball_no">No</label></fieldset><fieldset><legend>Do you like baseball?</legend><input type="radio" name="baseball" id="baseball_yes" value="Y"/><label for="baseball_yes">Yes</label><br/><input type="radio" name="baseball" id="baseball_no" value="N"/><label for="baseball_no">No</label></fieldset></fieldset><input type="submit" value="Submit"/></div></form>

- Markup
- Display

     <form method="get" action="https://cs12.net/form/submit.php">
       <div>
         <fieldset>
           <legend>Name       </legend>
           <label for="fname">First Name       </label>
           <input type="text" name="fname" id="fname" size="30"/>

           <br/>

           <label for="lname">Last Name       </label>
           <input type="text" name="lname" id="lname" size="30"/>

           <br/>
         </fieldset>
         <fieldset>
           <legend>Sports       </legend>
           <fieldset>
             <legend>Do you like basketball?         </legend>
             <input type="radio" name="basketball" id="basketball_yes" value="Y"/>

             <label for="basketball_yes">Yes         </label>
             <br/>

             <input type="radio" name="basketball" id="basketball_no" value="N"/>

             <label for="basketball_no">No         </label>       </fieldset>
           <fieldset>
             <legend>Do you like baseball?         </legend>
             <input type="radio" name="baseball" id="baseball_yes" value="Y"/>

             <label for="baseball_yes">Yes         </label>
             <br/>

             <input type="radio" name="baseball" id="baseball_no" value="N"/>

             <label for="baseball_no">No         </label>       </fieldset>     </fieldset>
         <input type="submit" value="Submit"/>

       </div>
     </form>

Name First Name
Last Name
Sports
Do you like basketball?Yes
No
Do you like baseball?Yes
No

## optgroup

The optgroup element allows you to group a long select list.

Example 3.14 - Form: optgroup in pull-down menus - Example 3.14<p>Select a school:</p><form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><select name="school"><optgroup label="ACC"><option>Boston College</option><option>Clemson</option><option>Duke</option><option>Florida State</option><option>Georgia Tech</option><option>Louiville</option><option>Miami</option><option>North Carolina</option><option>North Carolina State</option><option>Notre Dame</option><option>Pitt</option><option>Syracuse</option><option>Virginia</option><option>Virginia Tech</option><option>Wake Forest</option></optgroup><optgroup label="Big 10"><option>Illinois</option><option>Indiana</option><option>Iowa</option><option>Maryland</option><option>Michigan</option><option>Michigan State</option><option>Minnesota</option><option>Nebraska</option><option>Northwestern</option><option>Ohio State</option><option>Penn State</option><option>Purdue</option><option>Rutgers</option><option>Wisconsin</option></optgroup><optgroup label="Big XII"><option>Baylor</option><option>Iowa State</option><option>Kansas</option><option>Kansas State</option><option>Oklahoma</option><option>Oklahoma State</option><option>Texas</option><option>Texas Christian</option><option>Texas Tech</option><option>West Virginia</option></optgroup><optgroup label="Ivy League"><option>Brown</option><option>Columbia</option><option>Cornell</option><option>Dartmouth</option><option>Harvard</option><option>Penn </option><option>Princeton</option><option>Yale</option></optgroup><optgroup label="Pac 12"><option>Arizona</option><option>Arizona State</option><option>California</option><option>Colorado</option><option>Oregon</option><option>Oregon State</option><option>Stanford</option><option>UCLA</option><option>USC</option><option>Utah</option><option>Washington</option><option>Washington State</option></optgroup></select><div><button type="submit">Submit</button></div></form>

- Markup
- Display
- Screenshot

     <p>Select a school:
     </p>
     <form method="get" action="https://cs12.net/form/submit.php">
       <select name="school">
         <optgroup label="ACC">
           <option>Boston College       </option>
           <option>Clemson       </option>
           <option>Duke       </option>
           <option>Florida State       </option>
           <option>Georgia Tech       </option>
           <option>Louiville       </option>
           <option>Miami       </option>
           <option>North Carolina       </option>
           <option>North Carolina State       </option>
           <option>Notre Dame       </option>
           <option>Pitt       </option>
           <option>Syracuse       </option>
           <option>Virginia       </option>
           <option>Virginia Tech       </option>
           <option>Wake Forest       </option>     </optgroup>
         <optgroup label="Big 10">
           <option>Illinois       </option>
           <option>Indiana       </option>
           <option>Iowa       </option>
           <option>Maryland       </option>
           <option>Michigan       </option>
           <option>Michigan State       </option>
           <option>Minnesota       </option>
           <option>Nebraska       </option>
           <option>Northwestern       </option>
           <option>Ohio State       </option>
           <option>Penn State       </option>
           <option>Purdue       </option>
           <option>Rutgers       </option>
           <option>Wisconsin       </option>     </optgroup>
         <optgroup label="Big XII">
           <option>Baylor       </option>
           <option>Iowa State       </option>
           <option>Kansas       </option>
           <option>Kansas State       </option>
           <option>Oklahoma       </option>
           <option>Oklahoma State       </option>
           <option>Texas       </option>
           <option>Texas Christian       </option>
           <option>Texas Tech       </option>
           <option>West Virginia       </option>     </optgroup>
         <optgroup label="Ivy League">
           <option>Brown       </option>
           <option>Columbia       </option>
           <option>Cornell       </option>
           <option>Dartmouth       </option>
           <option>Harvard       </option>
           <option>Penn       </option>
           <option>Princeton       </option>
           <option>Yale       </option>     </optgroup>
         <optgroup label="Pac 12">
           <option>Arizona       </option>
           <option>Arizona State       </option>
           <option>California       </option>
           <option>Colorado       </option>
           <option>Oregon       </option>
           <option>Oregon State       </option>
           <option>Stanford       </option>
           <option>UCLA       </option>
           <option>USC       </option>
           <option>Utah       </option>
           <option>Washington       </option>
           <option>Washington State       </option>     </optgroup>   </select>
       <div>
         <button type="submit">Submit     </button>
       </div>
     </form>

Select a school:

## HTML5 forms

- HTML5 - Forms (HTML Living Standard)
- MDN: The form <input> element

### HTML5 forms - placeholder, autofocus, and specific input types

- HTML5 Form Example
- placeholder text
- autofocus
- input types for
  - email
  - url
  - number
  - range
  - date and time

## HTML5: Placeholder

Placeholder text can:

- Provide instructions
- Show format

Example 3.15 - Input text placeholder - Example 3.15<h4>Placeholder Text</h4><p>Used to give instructions:</p><form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><input size="30" name="search" type="text" placeholder="What can we help you find?"/><input class="searchSubmit" value="Search" type="submit"/></form><hr/><p>Used to show format:</p><form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><p><label for="expiration">Expiration:</label><input id="expiration" name="expiration" type="text" placeholder="MMYY"/><br/><button type="submit">Submit</button></p></form>input.searchSubmit { background: url('http://cscie12.dce.harvard.edu/resources/./images/magnifier12.png') no-repeat; width: 16px; height: 16px; border: none; margin-left: 2px; text-indent: -9999em;}

- Markup
- Style
- Display

     <h4>Placeholder Text </h4>
     <p>Used to give instructions:
     </p>
     <form action="https://cs12.net/form/submit.php" method="post">
       <input size="30" name="search" type="text" placeholder="What can we help you find?"/>

       <input class="searchSubmit" value="Search" type="submit"/>

     </form>
     <hr/>

     <p>Used to show format:
     </p>
     <form action="https://cs12.net/form/submit.php" method="post">
       <p>
         <label for="expiration">Expiration:     </label>
         <input id="expiration" name="expiration" type="text" placeholder="MMYY"/>

         <br/>

         <button type="submit">Submit     </button>
       </p>
     </form>

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

    input.searchSubmit {
        background: url('./images/magnifier12.png') no-repeat;
        width: 16px;
        height: 16px;
        border: none;
        margin-left: 2px;
        text-indent: -9999em;}

#### Placeholder Text

Used to give instructions:

Used to show format:

Expiration:

Magnifier icon made by SimpleIcon from www.flaticon.com is licensed by CC BY 3.0

## HTML5: Autofocus

Autofocus will bring the "focus" of the cursor to that field when the page loads. Typically, you would bring focus to the first input field of the form.

    <input type="text" autofocus name="q">

Example 3.16 - Input autofocus property - Example 3.16 | Example 3.16 JSFiddle

- Markup
- Screenshot

     <form action="https://cs12.net/form/submit.php" method="post">
       <fieldset>
         <legend>Autofocus     </legend>
         <p>The following field should "autofocus":
         </p>
         <p>Name:
           <input size="50" name="name" type="text" autofocus="autofocus"/>

         </p>   </fieldset>
       <p>
         <button type="submit">Submit     </button>
       </p>
     </form>

## HTML5: email and url

On handheld devices, screen keyboard is optimized for input.

### type="email"

Example 3.17 - text input for email - Example 3.17<form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>Email</legend><p>Email: <input type="email" name="email_address" size="50"/></p></fieldset><p><button type="submit">Submit</button></p></form>

- Markup
- Display
- Screenshot

     <form action="https://cs12.net/form/submit.php" method="post">
       <fieldset>
         <legend>Email     </legend>
         <p>Email:
           <input type="email" name="email_address" size="50"/>

         </p>   </fieldset>
       <p>
         <button type="submit">Submit     </button>
       </p>
     </form>

Email

Email:

### type="url"

Example 3.18 - text input for URLs - Example 3.18<form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>URL</legend><p>URL: <input type="url" name="url" size="50"/></p></fieldset><p><button type="submit">Submit</button></p></form>

- Markup
- Display
- Screenshot

     <form action="https://cs12.net/form/submit.php" method="post">
       <fieldset>
         <legend>URL     </legend>
         <p>URL:
           <input type="url" name="url" size="50"/>

         </p>   </fieldset>
       <p>
         <button type="submit">Submit     </button>
       </p>
     </form>

URL

URL:

## HTML5: number and range

Example 3.19 - HTML5 input type='number' and type='range' - Example 3.19<form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><p>Number:<br/><input type="number" name="n"/></p><p>Range from 1 to 10, increments of 1:<br/><input type="range" min="1" max="10" step="1" name="r"/></p><p><button type="submit">Submit</button></p></form>

- Markup
- Display
- Screenshot

     <form action="https://cs12.net/form/submit.php" method="post">
       <p>Number:
         <br/>

         <input type="number" name="n"/>

       </p>
       <p>Range from 1 to 10, increments of 1:
         <br/>

         <input type="range" min="1" max="10" step="1" name="r"/>

       </p>
       <p>
         <button type="submit">Submit     </button>
       </p>
     </form>

Number:

Range from 1 to 10, increments of 1:

## HTML5: date and time

Example 3.20 - HTML5 input types for date and time - Example 3.20 | Example 3.20 JSFiddle

- Markup
- Display
- Screenshot

     <form action="https://cs12.net/form/submit.php" method="post">
       <fieldset>
         <legend>Date and Time     </legend>
         <p>Date
         </p>
         <p>
           <input type="date" name="my_date"/>

         </p>
         <p>Datetime-local
         </p>
         <p>
           <input type="datetime-local" name="my_datetime"/>

         </p>
         <p>Time
         </p>
         <p>15 minute steps:
           <input type="time" name="my_time_15" step="900" value="12:00"/>

         </p>
         <p>1 minute steps:
           <input type="time" name="my_time_1" step="60" value="12:00"/>

         </p>
         <p>1 second steps:
           <input type="time" name="my_time_1s" step="1" value="12:00"/>

         </p>   </fieldset>
       <p>
         <button type="submit">Submit     </button>
       </p>
     </form>

Date and Time

Date

Datetime-local

Time

15 minute steps:

1 minute steps:

1 second steps:

## submit.php -- it can do more!

- Form Submit Script

## Tables

See: Tabular Data from HTML5 Specification

### Uses of Tables

- Data
- Layout

### Table Elements

`table` , `caption` , `colgroup` , `col` , `tbody` , `thead` , `tfoot` , `tr` , `td` , `th`

Example 3.21 - Table - Example 3.21 | Example 3.21 JSFiddle

- Markup
- Display

     <table>
       <caption>A table   </caption>
       <tr>
         <th>Column 1     </th>
         <th>Column 2     </th>
         <th>Column 3     </th>   </tr>
       <tr>
         <td>row 1 column 1     </td>
         <td>row 1 column 2     </td>
         <td>row 1 column 3     </td>   </tr>
       <tr>
         <td>row 2 column 1     </td>
         <td>row 2 column 2     </td>
         <td>row 2 column 3     </td>   </tr>
       <tr>
         <td>row 3 column 1     </td>
         <td>row 3 column 2     </td>
         <td>row 3 column 3     </td>   </tr>
     </table>

A table
Column 1 | Column 2 | Column 3
--- | --- | ---
row 1 column 1 | row 1 column 2 | row 1 column 3
row 2 column 1 | row 2 column 2 | row 2 column 3
row 3 column 1 | row 3 column 2 | row 3 column 3

## A Simple Table

Data from the US Census Bureau

Example 3.22 - Simple data table - Example 3.22 | Example 3.22 JSFiddle

- Markup
- Display

     <p>United States Urban and Rural Populations
     </p>
     <table>
       <tr>
         <td>Year     </td>
         <td>Percent Urban     </td>
         <td>Percent Rural     </td>   </tr>
       <tr>
         <th>2010     </th>
         <td>80.3     </td>
         <td>19.7     </td>   </tr>
       <tr>
         <th>2000     </th>
         <td>79.2     </td>
         <td>20.8     </td>   </tr>
       <tr>
         <th>1950     </th>
         <td>64.0     </td>
         <td>36.0     </td>   </tr>
       <tr>
         <th>1900     </th>
         <td>39.6     </td>
         <td>60.4     </td>   </tr>
       <tr>
         <th>1850     </th>
         <td>15.4     </td>
         <td>84.6     </td>   </tr>
       <tr>
         <th>1800     </th>
         <td>6.1     </td>
         <td>93.9     </td>   </tr>
     </table>
     <p>Data from
       <a href="http://www.census.gov/">United States Census Bureau   </a>
     </p>

United States Urban and Rural Populations

Year | Percent Urban | Percent Rural
2010 | 80.3 | 19.7
2000 | 79.2 | 20.8
1950 | 64.0 | 36.0
1900 | 39.6 | 60.4
1850 | 15.4 | 84.6
1800 | 6.1 | 93.9

Data from United States Census Bureau

## Adding thead, tfoot, tbody, caption, and summary

Example 3.23 - Advanced Table - Example 3.23 | Example 3.23 JSFiddle

- Markup
- Display

     <table summary="This table shows the percentage of the United States population that lived in urban and rural areas from 1800 to 2000.">
       <caption>United States Urban and Rural Populations   </caption>
       <thead>
         <tr>
           <th>Year       </th>
           <th>Percent Urban       </th>
           <th>Percent Rural       </th>     </tr>   </thead>
       <tfoot>
         <tr>
           <td colspan="3">Data from
             <a href="http://www.census.gov/">United States Census Bureau         </a>       </td>     </tr>   </tfoot>
       <tbody>
         <tr>
           <th>2010       </th>
           <td>80.3       </td>
           <td>19.7       </td>     </tr>
         <tr>
           <th>2000       </th>
           <td>79.2       </td>
           <td>20.8       </td>     </tr>
         <tr>
           <th>1950       </th>
           <td>64.0       </td>
           <td>36.0       </td>     </tr>
         <tr>
           <th>1900       </th>
           <td>39.6       </td>
           <td>60.4       </td>     </tr>
         <tr>
           <th>1850       </th>
           <td>15.4       </td>
           <td>84.6       </td>     </tr>
         <tr>
           <th>1800       </th>
           <td>6.1       </td>
           <td>93.9       </td>     </tr>   </tbody>
     </table>

United States Urban and Rural Populations
Year | Percent Urban | Percent Rural
--- | --- | ---
Data from United States Census Bureau
2010 | 80.3 | 19.7
2000 | 79.2 | 20.8
1950 | 64.0 | 36.0
1900 | 39.6 | 60.4
1850 | 15.4 | 84.6
1800 | 6.1 | 93.9

## Benefits of Semantics

Semantics lets us selectively manipulate parts of the table -- whether for style or function.

## Using "col" and "colgroup"

`col` and `colgroup` elements can be used to as a way to apply styles (style or class attribute) to columns.

Example 3.24 - 'colgroup' element - Example 3.24 | Example 3.24 JSFiddle

- Markup
- Display

     <table>
       <caption>United States Urban and Rural Populations   </caption>
       <colgroup span="1">
         <col span="1" style="background-color: lightsalmon;"/>

         <col span="2" style="background-color: wheat;"/>
       </colgroup>
       <thead>
         <tr>
           <th scope="col">Year       </th>
           <th scope="col">Percent Urban       </th>
           <th scope="col">Percent Rural       </th>     </tr>   </thead>
       <tbody>
         <tr>
           <th scope="row">2010       </th>
           <td>80.3       </td>
           <td>19.7       </td>     </tr>
         <tr>
           <th scope="row">2000       </th>
           <td>79.2       </td>
           <td>20.8       </td>     </tr>
         <tr>
           <th scope="row">1950       </th>
           <td>64.0       </td>
           <td>36.0       </td>     </tr>
         <tr>
           <th scope="row">1900       </th>
           <td>39.6       </td>
           <td>60.4       </td>     </tr>
         <tr>
           <th scope="row">1850       </th>
           <td>15.4       </td>
           <td>84.6       </td>     </tr>
         <tr>
           <th scope="row">1800       </th>
           <td>6.1       </td>
           <td>93.9       </td>     </tr>   </tbody>
     </table>

United States Urban and Rural Populations
Year | Percent Urban | Percent Rural
--- | --- | ---
2010 | 80.3 | 19.7
2000 | 79.2 | 20.8
1950 | 64.0 | 36.0
1900 | 39.6 | 60.4
1850 | 15.4 | 84.6
1800 | 6.1 | 93.9

## Accessibilty of Tables

### Using "scope"

The "scope" attribute can be used to associate header information with columns and rows (and also column groups and row groups).

Example 3.25 - Table with 'scope' attribute - Example 3.25 | Example 3.25 JSFiddle

- Markup
- Display

     <table>
       <caption>United States Urban and Rural Populations   </caption>
       <thead>
         <tr>
           <th scope="col">Year       </th>
           <th scope="col">Percent Urban       </th>
           <th scope="col">Percent Rural       </th>     </tr>   </thead>
       <tfoot>
         <tr>
           <td colspan="3">Data from
             <a href="http://www.census.gov/">United States Census Bureau         </a>       </td>     </tr>   </tfoot>
       <tbody>
         <tr>
           <th scope="row">2010       </th>
           <td>80.3       </td>
           <td>19.7       </td>     </tr>
         <tr>
           <th scope="row">2000       </th>
           <td>79.2       </td>
           <td>20.8       </td>     </tr>
         <tr>
           <th scope="row">1950       </th>
           <td>64.0       </td>
           <td>36.0       </td>     </tr>
         <tr>
           <th scope="row">1900       </th>
           <td>39.6       </td>
           <td>60.4       </td>     </tr>
         <tr>
           <th scope="row">1850       </th>
           <td>15.4       </td>
           <td>84.6       </td>     </tr>
         <tr>
           <th scope="row">1800       </th>
           <td>6.1       </td>
           <td>93.9       </td>     </tr>   </tbody>
     </table>

United States Urban and Rural Populations
Year | Percent Urban | Percent Rural
--- | --- | ---
Data from United States Census Bureau
2010 | 80.3 | 19.7
2000 | 79.2 | 20.8
1950 | 64.0 | 36.0
1900 | 39.6 | 60.4
1850 | 15.4 | 84.6
1800 | 6.1 | 93.9

## Accessibility using "headers"

The "headers" attribute can also be used to associate header information with columns and rows. This is typically used in more complicated tables.

id attribute. Note the use of the "id" attribute. This is an attribute that can be applied to most any HTML element. Values for "id" must be unique throughout the document.

The value of "headers" is a space-separated list of IDREFS (references to "id" names in the document).

Example 3.26 - Table with 'headers' attribute - Example 3.26<table><caption>United States Urban and Rural Populations</caption><thead><tr><th id="year" rowspan="1" colspan="1">Year</th><th id="urban" rowspan="1" colspan="1">Percent Urban</th><th id="rural" rowspan="1" colspan="1">Percent Rural</th></tr></thead><tfoot><tr><td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/">United States Census Bureau</a></td></tr></tfoot><tbody><tr><th id="y2010" headers="year" rowspan="1" colspan="1">2010</th><td headers="y2010 urban" rowspan="1" colspan="1">80.3</td><td headers="y2010 rural" rowspan="1" colspan="1">19.7</td></tr><tr><th id="y2000" headers="year" rowspan="1" colspan="1">2000</th><td headers="y2000 urban" rowspan="1" colspan="1">79.2</td><td headers="y2000 rural" rowspan="1" colspan="1">20.8</td></tr><tr><th id="y1950" headers="year" rowspan="1" colspan="1">1950</th><td headers="y1950 urban" rowspan="1" colspan="1">64.0</td><td headers="y1950 ruran" rowspan="1" colspan="1">36.0</td></tr><tr><th id="y1900" headers="year" rowspan="1" colspan="1">1900</th><td headers="y1900 urban" rowspan="1" colspan="1">39.6</td><td headers="y1900 rural" rowspan="1" colspan="1">60.4</td></tr><tr><th id="y1850" headers="year" rowspan="1" colspan="1">1850</th><td headers="y1850 urban" rowspan="1" colspan="1">15.4</td><td headers="y1850 rural" rowspan="1" colspan="1">84.6</td></tr><tr><th id="y1800" headers="year" rowspan="1" colspan="1">1800</th><td headers="y1800 urban" rowspan="1" colspan="1">6.1</td><td headers="y1800 rural" rowspan="1" colspan="1">93.9</td></tr></tbody></table>

- Markup
- Display

     <table>
       <caption>United States Urban and Rural Populations   </caption>
       <thead>
         <tr>
           <th id="year">Year       </th>
           <th id="urban">Percent Urban       </th>
           <th id="rural">Percent Rural       </th>     </tr>   </thead>
       <tfoot>
         <tr>
           <td colspan="3">Data from
             <a href="http://www.census.gov/">United States Census Bureau         </a>       </td>     </tr>   </tfoot>
       <tbody>
         <tr>
           <th id="y2010" headers="year">2010       </th>
           <td headers="y2010 urban">80.3       </td>
           <td headers="y2010 rural">19.7       </td>     </tr>
         <tr>
           <th id="y2000" headers="year">2000       </th>
           <td headers="y2000 urban">79.2       </td>
           <td headers="y2000 rural">20.8       </td>     </tr>
         <tr>
           <th id="y1950" headers="year">1950       </th>
           <td headers="y1950 urban">64.0       </td>
           <td headers="y1950 ruran">36.0       </td>     </tr>
         <tr>
           <th id="y1900" headers="year">1900       </th>
           <td headers="y1900 urban">39.6       </td>
           <td headers="y1900 rural">60.4       </td>     </tr>
         <tr>
           <th id="y1850" headers="year">1850       </th>
           <td headers="y1850 urban">15.4       </td>
           <td headers="y1850 rural">84.6       </td>     </tr>
         <tr>
           <th id="y1800" headers="year">1800       </th>
           <td headers="y1800 urban">6.1       </td>
           <td headers="y1800 rural">93.9       </td>     </tr>   </tbody>
     </table>

United States Urban and Rural Populations
Year | Percent Urban | Percent Rural
--- | --- | ---
Data from United States Census Bureau
2010 | 80.3 | 19.7
2000 | 79.2 | 20.8
1950 | 64.0 | 36.0
1900 | 39.6 | 60.4
1850 | 15.4 | 84.6
1800 | 6.1 | 93.9

## What can we do now that relationship is clear?

Once semantic markup is in place, adding function with JavaScript becomes much easier. For example, we can write some JavaScript to highlight the column/row headings based on the presence of `scope` or `headers` attributes.

Live Example of Table Highlighting

## Presentation - Cascading Style Sheets (CSS)

## Markup, Presentation, Function

### Markup

solarsystem-markup.html

### Styles

solarsystem-style.html

### Scripts

solarsystem.html

Files:

- solarsystem.css
- jquery-1.4.2.min.js
- jquery.mousewheel-3.0.2.pack.js
- jquery.fancybox-1.3.1.js
- jquery.fancybox-1.3.1.css
- fancybox.png
- fancybox-x.png
- fancybox-y.png
- blank.gif

## Styles

The markup page references an external stylesheet document.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Our Solar System</title>
        <!-- the link element is used to reference a stylesheet -->
        <link rel="stylesheet" href="styles/solarsystem.css" />
        ...cut...

The CSS file contains style rules for the document (solarsystem.css)

Contents of the CSS file:

    body {
      margin-left: 5%;
      margin-top: 2em;
      margin-right: 5%;
      background-image: linear-gradient(white, #ffffdd);
      background-color: #ffffdd;
      font-family: Calibri, Arial, sans-serif;
      height: 100vh;
    }

    h1 {
      font-family: Calibri, Arial, sans-serif;
      color: #333333;
      border-bottom: 3px solid #333333;
    }

    ul.gallery {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    ul.gallery li {
      margin-top: 1em;
      font-size: 1.25em;
      height: 250px;
      width: 220px;
      flex-basis: 1 0 auto;
      text-align: center;
      border: thin dotted #333333;
      margin: 10px;
      padding: 10px;
    }

    ul.gallery li img {
      border: none;
    }

    footer {
      clear: both;
      margin-top: 2rem;
      padding: 1em;
      font-size: smaller;
    }

    a:link, a:visited {
      text-decoration: none;
      color: blue;
    }

    a:hover {
      text-decoration: underline;
    }

    a:active {
      border: none;
      text-decoration: none;
    }

## Different Styles for The United States Constitution

- United States Constitution (no external stylesheet)

W3C Core Styles applied to the US Constitution.

- Chocolate Stylesheet
- Midnight Stylesheet
- Modernist Stylesheet
- Oldstyle Stylesheet
- Steely Stylesheet
- Swiss Stylesheet
- Traditional Stylesheet
- Ultramarine Stylesheet

## Harvard Summer School

Harvard Summer School | With CSS disabled:

## Responsive Web Design

- Responsive Web Design by Ethan Marcotte on A List Apart
- Live Example or Responsive Design

## CSS Recommendations from the W3C

### Current CSS

- CSS Current Work (CSS level 3)

### CSS Validator

W3C CSS Validation Service
`http://jigsaw.w3.org/css-validator/`

### Historical

- CSS 1, December 1996; Revised January 1999)
- CSS 2, May 1998
- CSS 2.1, June 2011
- CSS 2.2, September 2015

## CSS Mechanics - rules and selectors

- Rules
- Selectors

## Anatomy of a CSS Rule

### CSS Rule

### Selector and Declarations

### Properties and Values

## Simple CSS Example

Example 3.27 - Simple CSS Example - Example 3.27<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>p { color: red; background-color: blue; }

- Markup
- Style
- Screenshot

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

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

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

## CSS Mechanics - Binding Styles to Markup

Three ways to bind CSS rules to HTML markup:

- `style` attribute in element
- `<style>` element in HTML head
- External CSS document, through the `<link>` element in HTML head

## style attribute

Example 3.28 - style attribute - Example 3.28<p style="color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>

- Markup
- Display
- Screenshot

     <p style="color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
     </p>

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.

## style element

Example 3.29 - style element - Example 3.29<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>p { color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em; }

- Markup
- Style
- Screenshot

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

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

    p {
        color: black;
        background-color: teal;
        padding: 1em;
        font-family: helvetica, sans-serif;
        text-align: justify;
        margin: 2em;
      }

So the full page looks like:

     <html>
       <head>
         <title>CSCIE-12 CSS Example</title>
         <style>
          p {
             color: black;
             background-color: teal;
             padding: 1em;
             font-family: helvetica, sans-serif;
             text-align: justify;
             margin: 2em;
          }
         </style>
       </head>
       <body>
         <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec
          facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit.
          Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante
          sit amet urna. Maecenas condimentum hendrerit turpis.
         </p>
      </body>
    </html>

## link element

The link element can reference an external stylesheet.
Example 3.30 - link element for stylesheets - Example 3.30<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>p { color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em; }

- Markup
- Style
- Screenshot

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

In `head` element:

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

In example30.css

    p {
        color: black;
        background-color: teal;
        padding: 1em;
        font-family: helvetica, sans-serif;
        text-align: justify;
        margin: 2em;
      }

The full source:

    <html>
       <head>
         <title>CSCIE-12 CSS Example</title>
         <link href="example37.css" rel="stylesheet"/>
       </head>
       <body>
         <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec
          facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit.
          Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante
          sit amet urna. Maecenas condimentum hendrerit turpis.
         </p>
      </body>
    </html>

## Combining Rules

Rules can be combined. The following two sets of style rules would produce identical results. Rules can be listed separately:

    p {color: black;}
    p {background-color: teal;}
    p {padding: 1em;}
    p {margin: 1em;}
    p {font-family: helvetica, sans-serif;}
    p {text-align: justify;}

Or, rules can be grouped. Property:Value pairs need to be separated by a semicolon.

    p {
         color: black;
         background-color: teal;
         padding: 1em;
         margin: 1em;
         font-family: helvetica, sans-serif;
         text-align: justify;
    }

## Combining Selectors

Selectors can be combined into comma-separated groups.

    h1 { color: maroon; }
    h2 { color: maroon; }
    h3 { color: maroon; }
    h4 { color: maroon; }
    h5 { color: maroon; }
    h6 { color: maroon; }

We combine the selectors so that a single declaration applies to multiple selectors.

    h1, h2, h3, h4, h5, h6 { color: maroon; }

## Basic Selectors - elements, class, id

- elements
- class/id

### element selectors

    p {
      background-color: white;
      color: maroon;
    }

    ul {
      border: medium solid green;
    }

    li {
      background-color: lightsalmon;
    }

    h1,
    h2,
    h3 {
      background-color: black;
      color: white;
    }

CSS element selector example

## class selectors

The class and id attributes of HTML elements can be used in conjunction with styles.

Class names are referenced in CSS as `.classname`, and may or may not have an element name preceding the period (`.classname` or `element.classname`.

Likewise, id names are referenced in CSS as `#idref`, and may or may not have an element name preceding the period (`#idref` or `element#idref`.

Example 3.31 - classes - Example 3.31<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div class="withstyle">Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</div><div class="warn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div>Lorem ipsum dolor sit amet, <span class="warn">consectetuer adipiscing elit</span>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div id="legalese">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div>div { background-color: white; color: black; font-family: times; margin: 0.5em; padding: 0.5em; } div.withstyle { background-color: olive; color: navy; font-family: sans-serif; margin: 0.5em; padding: 0.5em; } .warn { background-color: yellow; color: red; font-weight: bold; } #legalese { color: #cccccc; font-size: 0.6em; }

- Markup
- Style
- Screenshot

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

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

    div
    {
      background-color: white;
      color: black;
      font-family: times;
      margin: 0.5em;
      padding: 0.5em;
    }
    div.withstyle
    {
      background-color: olive;
      color: navy;
      font-family: sans-serif;
      margin: 0.5em;
      padding: 0.5em;
    }
    .warn
    {
      background-color: yellow;
      color: red;
      font-weight: bold;
    }
    #legalese
    {
      color: #cccccc;
      font-size: 0.6em;
    }

## id selectors

id names are referenced in CSS as `#idref`, and may or may not have an element name preceding the period (`#idref` or `element#idref`.

Example 3.32 - id selectors - Example 3.32<header><h1>Lorem Ipsum</h1></header><main><!-- main content --><section id="bigidea">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. </section><section> Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. </section></main><footer> Maecenas condimentum hendrerit turpis. </footer> h1 { text-align: center; } section { margin: 1rem; } footer { margin: 1rem; padding: 1rem; border-top: thin solid black; background-color: #f0f0f0; } #bigidea { background-color: blue; color: white; border-color: green; border-width: thick; border-style: solid; line-height: 1.5; padding: 1rem; }

- Markup
- Style

     <header>
       <h1>Lorem Ipsum   </h1> </header>
     <main><!-- main content -->
       <section id="bigidea">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.   </section>
       <section>Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna.   </section> </main>
     <footer>Maecenas condimentum hendrerit turpis. </footer>

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

        h1 { text-align: center; }
        section { margin: 1rem; }
        footer { margin: 1rem;
          padding: 1rem;
          border-top: thin solid black;
          background-color: #f0f0f0;
        }
        #bigidea {
                background-color: blue;
                color: white;
                border-color: green;
                border-width: thick;
                border-style: solid;
                line-height: 1.5;
                padding: 1rem;
        }

## Contextual Selectors

`selector1 selector2 { ...rules... }`

Example 3.33 - contextual selectors - Example 3.33<div><em>Emphasized text</em> outside of <strong>li</strong> appear "normal". <ul><li><em>Emphasized text</em> within <strong>li</strong> have a different style. </li></ul></div> li em { color: red; background-color: navy;}

- Markup
- Style
- Screenshot

     <div>
       <em>Emphasized text   </em>outside of
       <strong>li   </strong>appear "normal".
       <ul>
         <li>
           <em>Emphasized text       </em>within
           <strong>li       </strong>have a different style.
         </li>   </ul>
     </div>

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

    li em { color: red; background-color: navy;}

## CSS Properties and Values

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

- font
- color
- text
- boxes (border, padding, margins)
- classification (inline, block, list)

CSS Level 2.1 lists 115 properties.

### CSS Properties

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

## Inheritance

Properties are typically inherited by children elements.
Example 3.34 - Styles and inheritance - Example 3.34<div> Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. <ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</p><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul>body { color: navy; } em { color: red; } div { color: green; }

- Markup
- Style
- Screenshot

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

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

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

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

UA = User-Agent = HTTP Client = Web Browser

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

- Sample style sheet for HTML 2.0 [Local copy]
- Default style sheet for HTML 4.0 [Local copy]

### HTML 4 Sample default CSS

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

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

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

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

### HTML 2 Sample default CSS

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

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

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

    LI { display: list-item }

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

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

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

    PRE { white-space: pre }

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

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

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

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

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

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

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

## font properties

- font-family
- font-style
- font-variant
- font-weight
- font-size
- font

## font-family

    body {
      font-family: garamond, times, serif;
    }

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

- Markup
- Display
- Screenshot

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

Garamond, Times, or serif (generic family)
Calibri, Arial, Helvetica or sans-serif (generic family)
Lucida Console, Courier or monospace (generic family)
Fantasy (generic family)
Cursive (generic family)

## font-style

    em {
      font-style: italic;
    }

Example 3.36 - font-style - Example 3.36<div style="font-style: normal;">Normal font-style</div><div style="font-style: italic;">Italic font-style</div><div style="font-style: oblique;">Oblique font-style</div>

- Markup
- Display

     <div style="font-style: normal;">Normal font-style
     </div>
     <div style="font-style: italic;">Italic font-style
     </div>
     <div style="font-style: oblique;">Oblique font-style
     </div>

Normal font-style
Italic font-style
Oblique font-style

## font-variant and font-weight

### font-variant

Example 3.37 - font-weight and font-variant - Example 3.37<div style="font-variant: small-caps;">This should be rendered in small-caps. <div style="font-variant: normal;">Here we revert to "normal". </div></div>

- Markup
- Display

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

This should be rendered in small-caps.
Here we revert to "normal".

### font-weight

    strong {
      font-weight: bold;
    }

values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Example 3.38 - font-weight - Example 3.38<div> font-weight can be used to make <span style="font-weight: bold">text appear bold</span>. </div>

- Markup
- Display

     <div>font-weight can be used to make
       <span style="font-weight: bold">text appear bold   </span>.
     </div>

font-weight can be used to make text appear bold.

## font-size

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

- Markup
- Display
- Screenshot

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

## Font Sizes: Relative vs. Absolute

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

- Relative
  - Relative to UA settings:
    `xx-small | x-small | small | medium | large | x-large | xx-large`
  - `rem` - relative to the html em (root em)
  - Relative to context:
    `larger | smaller`
  - Percentage (%)
  - "em" units
  - "rem" units
- Absolute
  - "pt" sizes (8pt, 10pt, 12pt)

## font

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

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

Example 3.40 - font shorthand - Example 3.40<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>body { font: normal normal normal x-large/200% arial, helvetica, sans-serif; }

- Markup
- Style
- Screenshot

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

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

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

## text properties

- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- text-align
- text-indent
- line-height

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

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

- Markup
- Display
- Screenshot

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

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

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

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

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

## CSS Values and Units

- Length
  em, pt, ex, mm, cm, in, px
  e.g. `1.0em`
- Percentage
  e.g.`10%`
- URL
  url(url goes here)
  e.g. `url('../images/banner.png')`
- Color
  name, hexadecimal, rgb value
  e.g.
  - name
    - `aqua`
  - hexadecimal
    - `#ffffdd`
    - `#60ae9f`
  - rgb (percent or numeric)
    - `rgb(24,50,255)`
    - `rgb(5%,20%,75%)`

## Color Units

Wikipedia Web Colors

### Name

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

### RGB Color Space

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

- decimal numbers (0 to 255)
- hexadecimal numbers (00 to ff)
- percentages (0 to 100%)

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

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

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

- Markup
- Display

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

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)

## Colorpicker

- HTML Color Picker from W3Schools
- DIY - `<input type="color" />`
Color Picker

Select Color:
Hex value:

## Box Model or Block Model

- margin
- border
- padding
- content

### A more detailed look:

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

### In your browser

## margin, padding, border

- margin
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
  - margin (shorthand)
- padding
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left
  - padding (shorthand)
- border
  - border-top-width
  - border-right-width
  - border-bottom-width
  - border-left-width
  - border-width
  - border-color
  - border-style
  - border-top
  - border-right
  - border-bottom
  - border-left
  - border

## border-style

Example 3.43 - Border Styles - Example 3.43<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>body { font-family: tahoma,arial,sans-serif; font-size: small; } p { margin: 1em; padding: 1em; width: 50%; } .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; }

- Markup
- Style
- Screenshot

     <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;
    width: 50%;
    }
    .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;
    }

## 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:

- `padding: 1px 2px 3px 4px`
  T = 1px; R = 2px; B = 3px; L = 4px
- `padding: 1px 2px 3px`
  T = 1px; R = L = 2px; B = 3px;
- `padding: 1px 2px`
  T = B = 1px; R = L = 2px;
- `padding: 1px`
  T = R = B = L = 1px

## Margin, Padding, Border Example

Example 3.44 - Margin, Padding, Border - Example 3.44<aside> 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.</aside><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>aside { text-align: left; font-size: 1.1rem; color: #003300; background-color: rgb(250,250,200); padding: 1rem; margin: 0.5rem; border-width: 2px; border-style: dashed; border-color: #990000; } p { font-size: large; line-height: 1.5; }

- Markup
- Style

     <aside>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. </aside>
     <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:

    aside {
          text-align: left;
          font-size: 1.1rem;
          color: #003300;
          background-color: rgb(250,250,200);
          padding: 1rem;
          margin: 0.5rem;
          border-width: 2px;
          border-style: dashed;
          border-color: #990000;
         }
    p {
         font-size: large;
         line-height: 1.5;
       }

## display property

You can make "inline" elements into "block" by setting the display property!

    label {
      display: block;
    }

Example 3.45 - Form - Example 3.45<form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><label>Name: <input type="text" name="name"/></label><label>Email Address: <input type="email" name="email"/></label><button type="submit"> Submit </button></form> label { display: block; margin-top: 1rem;} input { display: block;} button { display: block; margin-top: 1rem;}

- Markup
- Style
- Display

     <form method="post" action="https://cs12.net/form/submit.php">
       <label>Name:
         <input type="text" name="name"/>
       </label>
       <label>Email Address:
         <input type="email" name="email"/>
       </label>
       <button type="submit">Submit   </button>
     </form>

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

      label { display: block; margin-top: 1rem;}
      input { display: block;}
      button { display: block; margin-top: 1rem;}

Name: Email Address:

## Tools: Your Browser

And a few that aren't listed at BrowseHappy.com:

- Brave
- Firefox Quantum (Developer Edition)
- Vivaldi
- Maxthon

## Web Browsers and Layout Engines

Web Browser | Layout Engine
--- | ---
Google Chrome | Blink (fork of Webkit)
Apple Safari | Webkit
Mozilla Firefox | Gecko
Microsoft Edge | Chromium
Opera | Blink (fork of Webkit)

## Testdrive Your Browser

Example 3.46 - Test Drive Your Browser - Example 3.46<h1>Lorem Ipsum Dolor</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul>body { background-color: silver; font-family: calibri, arial, helvetica, sans-serif; } p { line-height: 200%; border: thin solid black; padding: 1em; margin: 2em; background-color: teal; } ul { border: medium dotted red; background-color: yellow; font-family: Times New Roman, Times, serif; } h1 { color: purple; background-color: white; font-variant: small-caps; }

- Markup
- Style

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

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

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