1. Introduction to HTML and
CSS
Lecture 3

2. Goals
CSS ID
CSS Border-box Model
HTML: Tables
Tables
Forms
Navigation Bars
Finish the Web Page

3. CSS IDs
Used for single unique elements
Use the ID attribute of an HTML element to specify
it’s ID
Name the selector by preceding it with a # symbol

4. CSS Box Model
THANKS W3SCHOOLS.COM !!

5. CSS Box Model Cont...
Margin: The area around the outside of the border
Has nothing to do with background color
Border: The border that goes around the padding
and the content
Padding: The area around the inside of the border.
This area separates the border and content.
This is affected by the background color
Content: The content area

6. Box Model Notes
When you define the width and height of an
element you are specifying the size of its content
area
All HTML elements can be considered as boxes
The box model allows us to stylistically space
elements in relation to each other

7. HTML Tables
Used to display tabular data (ONLY!)
Table based layout are in the past people...
Tables are divided into rows and each row is
divided into cells

8. HTML Tables Cont...
<th>: table header wrapped by <tr> tag
These will appear bold
<tr>: table row wraps <th> and <td> tags
<td>: Table data is wrapped by <tr> tag
A data cell

9. HTML Tables Cont...
<table border="1">
<tr>
<td><th>Heading 1</th></td>
<td><th>Heading 2</ht></td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

10. HTML Forms
Used to pass data to a server
Common elements found in forms
Text fields
Checkbox
Radio-buttons
Selection Boxes
Text Areas

11. HTML Forms Example

12. Navigation Bars
Unordered Lists are the standard html structure
used when building a navigation bar
Give the <li> a width and float it left

13. Navigation Example

14. Finish the Web Page

15. Helpful links
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/css/css_id_class.asp
http://www.w3schools.com/css/css_navbar.asp