# Session 03 - HTML, Introduction to CSS

Harvard Extension School
Spring 2021

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

### Topics

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

Session 03 - HTML, Introduction to CSS, slide1
Markup Recap, slide2
Components of HTML Elements, slide3
Essential HTML5 Document Structure, slide4
Section-level elements, slide5
Parts of a Page, slide6
Forms - Basic, slide7
Forms, slide8
Forms, slide9
form, slide10
HTTP Method: Get vs. Post, slide11
Text Field, slide12
Radio Buttons, slide13
Checkbox, slide14
Textarea, slide15
Select and Option, slide16
Accessibility: Label Element, slide17
Accessibility: Label Element, slide18
Label Element - using id, label, for, slide19
Labels, slide20
fieldset and legend, slide21
optgroup, slide22
HTML5 forms, slide23
HTML5: Placeholder, slide24
HTML5: Autofocus, slide25
HTML5: email and url, slide26
HTML5: number and range, slide27
HTML5: date and time, 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
Tools: Your Browser, slide71
Web Browsers and Layout Engines, slide72
Firefox Developer Tools, slide73
Google Chrome: Developer Tools, slide74
Safari: Web Inspector, slide75
Testdrive Your Browser, slide76
Tools: JS Fiddle, slide77
Workflow, slide78

Presentation contains 78 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>
        <!-- content goes here -->
      </body>
    </html>

- html
  - head
    - meta
    - title
  - body

## Section-level elements

HTML5 defines elements that can be used to represent sections:

- `body` - represents the content of the document
- `h1`, `h2`, `h3`, `h4`, `h5`, `h6` - headings for sections
- Section-level elements in HTML5
  - `main` - represents the main content on the page
  - `header` - represents a group of introductory or navigational aids
  - `footer` - represents a footer for its section
  - `nav` - represents a section with navigation links
  - `aside` - tangentially related (analagous to a sidebar for printed material)
  - `article` - represents a self-contained composition within a document
  - `section` - a generic section of a document

See: Usage Summary for Section Elements

## Parts of a Page

- `body`
- `header`
- `footer`
- `nav`
- `main`

### header

### footer

### nav

## Forms - Basic

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

- `form`
- `input`

### 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 "echo" program, which will simply echo back the name/value information your form submitted (https://cscie12.dce.harvard.edu/echo).

Example 3.1 - Simple form - Example 3.1<form method="post" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><input type="submit"/></form>

- Markup
- Display

     <form method="post" action="https://cscie12.dce.harvard.edu/echo">Email Address:
       <input type="text" name="email"/>

       <br/>

       <input type="submit"/>

     </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://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><input type="submit"/></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">Email Address:
       <input type="text" name="email"/>

       <br/>

       <input type="submit"/>

     </form>

Email Address:
Example 3.3 - Simple form using 'post' - Example 3.3<form method="post" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><input type="submit"/></form>

- Markup
- Display

     <form method="post" action="https://cscie12.dce.harvard.edu/echo">Email Address:
       <input type="text" name="email"/>

       <br/>

       <input type="submit"/>

     </form>

Email Address:

## Text Field

Example 3.4 - Form: text input - Example 3.4<form method="get" action="https://cscie12.dce.harvard.edu/echo" 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/><input type="submit" name="action" value="Proceed"/></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">Email Address:
       <input type="text" name="email" size="50"/>

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

       <br/>

       <input type="submit" name="action" value="Proceed"/>

     </form>

Email Address:
Year of Birth:

## Radio Buttons

Example 3.5 - Form: radio buttons - Example 3.5<form method="get" action="https://cscie12.dce.harvard.edu/echo" 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/><input type="submit" name="action" value="Proceed"/></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">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/>

       <input type="submit" name="action" value="Proceed"/>

     </form>

Email Address:
Please send me email updates:
yes
no

## Checkbox

Example 3.6 - Form: checkboxes - Example 3.6<form method="get" action="https://cscie12.dce.harvard.edu/echo" 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/><input type="submit" name="action" value="Proceed"/></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">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/>

       <input type="submit" name="action" value="Proceed"/>

     </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://cscie12.dce.harvard.edu/echo">
       <strong>Comments   </strong>
       <br/>

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

       <input type="submit" name="action" value="Proceed"/>

     </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://cscie12.dce.harvard.edu/echo" 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/><input type="submit" name="action" value="Proceed"/></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">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/>

       <input type="submit" name="action" value="Proceed"/>

     </form>

Select your favorite New England states:

### Scrollable list

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://cscie12.dce.harvard.edu/echo" 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/><input type="submit" name="action" value="Proceed"/></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">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/>

       <input type="submit" name="action" value="Proceed"/>

     </form>

Select your favorite New England states:

## Accessibility: Label Element

Labels are important for accessible forms.

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://cscie12.dce.harvard.edu/echo" 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/><input type="submit"/></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">
       <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/>

       <input type="submit"/>

     </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://cscie12.dce.harvard.edu/echo" 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://cscie12.dce.harvard.edu/echo">
       <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://cscie12.dce.harvard.edu/echo" 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/><input type="submit" name="action" value="Proceed"/></div></form>

- Markup
- Display

     <form method="get" action="https://cscie12.dce.harvard.edu/echo">
       <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/>

         <input type="submit" name="action" value="Proceed"/>

       </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://cscie12.dce.harvard.edu/echo" 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://cscie12.dce.harvard.edu/echo">
       <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://cscie12.dce.harvard.edu/echo" 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><input type="submit"/></div></form>

- Markup
- Display
- Screenshot

     <p>Select a school:
     </p>
     <form method="get" action="https://cscie12.dce.harvard.edu/echo">
       <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>
         <input type="submit"/>

       </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 (Without Styles)<h4>Placeholder Text</h4><p>Used to give instructions:</p><form action="https://cscie12.dce.harvard.edu/echo" 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://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><p><label for="expiration">Expiration:</label><input id="expiration" name="expiration" type="text" placeholder="MMYY"/><br/><input type="submit"/></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://cscie12.dce.harvard.edu/echo" 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://cscie12.dce.harvard.edu/echo" method="post">
       <p>
         <label for="expiration">Expiration:     </label>
         <input id="expiration" name="expiration" type="text" placeholder="MMYY"/>

         <br/>

         <input type="submit"/>

       </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://cscie12.dce.harvard.edu/echo" 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>
         <input type="submit"/>

       </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://cscie12.dce.harvard.edu/echo" 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><input type="submit"/></p></form>

- Markup
- Display
- Screenshot

     <form action="https://cscie12.dce.harvard.edu/echo" method="post">
       <fieldset>
         <legend>Email     </legend>
         <p>Email:
           <input type="email" name="email_address" size="50"/>

         </p>   </fieldset>
       <p>
         <input type="submit"/>

       </p>
     </form>

Email

Email:

### type="url"

Example 3.18 - text input for URLs - Example 3.18<form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>URL</legend><p>URL: <input type="url" name="url" size="50"/></p></fieldset><p><input type="submit"/></p></form>

- Markup
- Display
- Screenshot

     <form action="https://cscie12.dce.harvard.edu/echo" method="post">
       <fieldset>
         <legend>URL     </legend>
         <p>URL:
           <input type="url" name="url" size="50"/>

         </p>   </fieldset>
       <p>
         <input type="submit"/>

       </p>
     </form>

URL

URL:

## HTML5: number and range

Example 3.19 - HTML5 input type='number' and type='range' - Example 3.19<form action="https://cscie12.dce.harvard.edu/echo" 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><input type="submit"/></p></form>

- Markup
- Display
- Screenshot

     <form action="https://cscie12.dce.harvard.edu/echo" 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>
         <input type="submit"/>

       </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://cscie12.dce.harvard.edu/echo" 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>
         <input type="submit"/>

       </p>
     </form>

Date and Time

Date

Datetime-local

Time

15 minute steps:

1 minute steps:

1 second steps:

## 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;
    }
    h1 {
      font-family: Calibri,Arial, sans-serif;
      color: #333333;
      border-bottom: 3px solid #333333;
    }
    ul.gallery {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul.gallery li {
      margin-top: 1em;
      font-size: 1.25em;
      height: 250px;
      width: 220px;
      float: left;
      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 2011 | 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

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

### CSS Validator

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

## 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 (Without Styles)<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>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 (Without Styles)<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>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 (Without Styles)<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>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 (Without Styles)<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</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 (Without Styles)<div id="header"> put in header information here </div><div id="main"><!-- main content --> 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><div id="footer"> put in footer information here </div> #main { background-color: blue; color: white; border-color: green; border-width: thick; border-style: solid; }

- Markup
- Style
- Screenshot

     <div id="header">put in header information here
     </div>
     <div id="main"><!-- main content -->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>
     <div id="footer">put in footer information here
     </div>

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

        #main {
                background-color: blue;
                color: white;
                border-color: green;
                border-width: thick;
                border-style: solid;
        }

## Contextual Selectors

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

Example 3.33 - contextual selectors - Example 3.33 (Without Styles)<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 (Without Styles)<div> Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. <ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</p><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul>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 (Without Styles)<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>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:

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

### A mostly internal-facing Harvard site

## Firefox Developer Tools

## Google Chrome: Developer Tools

## Safari: Web Inspector

Safari Web Inspector - Getting Started
Safari → Preferences → Advanced → Show Develop menu in menu bar

## Testdrive Your Browser

Example 3.43 - Test Drive Your Browser - Example 3.43 (Without Styles)<h1>Lorem Ipsum Dolor</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul>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;
    }

## Tools: JS Fiddle

JS Fiddle Example

jsfiddle.net

## Workflow

(Edit, Save, Browser Check, Validation Check) x repeat

### Assignments

1. Download ZIP, unzip or extract, move to designated work area
2. (Edit, Save, Browser Check, Validation Check) x repeat
3. Decide when you are finished and ready to submit
   1. Publish to course web server: Cyberduck, connect, navigate to public_html/[YOUR OBSCURE FOLDER] , copy local assignment folder to server, check in browser (https://cs12students.dce.harvard.edu/~[Username]/[Your Obscure Folder]/[assignment path]/)
      1. From your browser, copy the URL of the assignment folder that you just published and submit in Canvas
   2. Submit ZIP file
      1. ZIP assignment folder up
      2. Submit ZIP file in Canvas