This document provides an introduction to HTML and CSS terminology, syntax, elements and semantics. It discusses common HTML elements like headings, paragraphs, hyperlinks and how to style them with CSS. It also covers HTML5 structural elements like header, nav, article, section, aside and footer. Finally, it briefly introduces the CSS box model and positioning properties like height and width.

1. CSS/html

2. Terminology, Syntax, &
Introduction
•
•
•
•
Element <a>
tags<a>….<a>
Attributes
<a href="http://www.shayhowe.com/">Shay Howe</a>

3. Selectors
• Type Selectors
HTML
• <p>...</p>
CSS
• p { ... }
• Class selectors
HTML
• <div class="awesome">...</div>
CSS
• .awesome { ... }
• ID Selectors
HTML
• <div id="shayhowe">...</div>
CSS
• #shayhowe { ... }

4. Elements & Semantics
•
•
•
•
•
•
•
•
Headings
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
Headings Demo
This is a Level 1 Heading
This is a Level 2 Heading
This is a Level 3 Heading

5. • Paragraphs
• <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco.</p>
• Paragraphs Demo
• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut
enim ad minim veniam, quis nostrud exercitation ullamco.

6. • Hyperlinks
• <a href="http://shayhowe.com">Shay</a>
• Hyperlinks Demo
• Shay
Email Link
<a
href="mailto:shay@awesome.com?subject=Still%20Awesome&b
ody=This%20is%20awesome">Email Me</a>
• Email Link Demo
• Email Me

7. HTML5 Structural Elements

8. •header
<header>...</header>
• navigation
<nav>
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</nav>

9. •
•
•
•
•
•
•
•
Article
<article>...</article>
Section
<section>...</section>
Aside
<aside>...</aside>
Footer
<footer>...</footer>

10. Box Model & Positioning

11. •
•
•
•
•
•
•
•
CSS Height Property
div {
height: 100px;
}
CSS Width Property
div {
width: 400px;
}