This document introduces basic HTML and CSS terminology, syntax, and elements. It discusses HTML tags like <a> for links and <p> for paragraphs. It also covers CSS selectors for styling tags by type, class, or ID. Common semantic elements are described, including headings, paragraphs, links, and new HTML5 structural elements like header, nav, article, section, aside, and footer. Examples are provided for each element to demonstrate their use.

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>