This workshop focuses on the fundamentals of HTML and CSS, it is intended for people new to HTML and/or CSS, or who just need a refresher on the basic principles.
HTML5 is introduced toward the end of the HTML section of the workshop, and some CSS3 concepts are discussed toward the end of the CSS section.
## HTML
* HTML stands for HyperText Markup Language
* HTML "[tags](http://www.w3schools.com/tags/)" describe the page content
* Tags normally come in pairs, the closing tag contains a forward slash: <strong></strong>
* HTML5 is the most recent version of the HTML language
* An opening tag, any content within, and the closing tag are sometimes collectively called an HTML "element".
* HTML elements within a single page can arranged in a hierarchy (nested)
* All tags should be lowercase.
* A tag can have various attributes. For example, "href" is an attribute of the "a" tag (see example 2 below). Attribute values should always be in quotes.
* Common tag attributes include: class, id, and style.
* Most HTML elements are either "block" or "inline" level elements. Block-level elements usually start on a new line. Inline elements do not.
* XHTML is a more strict (and proper) version of HTML, with mandatory closing tags, mandatory HTML sections (html, head, title, body), mandatory proper nesting, tag and attribute capitalization, etc...
* HTML5 is the latest HTML standard, designed to be device independent, [less dependence on browser plugins](http://www.w3schools.com/html/html5_video.asp), [more semantic tags](http://www.w3schools.com/html/html5_semantic_elements.asp) (article, footer, header, nav, section, aside, video, source, etc...), [new input types](http://www.w3schools.com/html/html5_form_input_types.asp) (date, color, email, etc...)
* Use the [HTML5 Shiv](https://github.com/aFarkas/html5shiv) or other solution to enable older browsers to be able to render HTML5 semantic elements.
* Tutorial/Documentation available at [w3schools.com](http://www.w3schools.com/html)
### DOCTYPE
* Helps browsers understand the version of HTML being used
* HTML5: <!DOCTYPE html>
### Examples
* Example 1: Headings and paragraphs (h1-h6, p)
* Example 2: Links ([a](http://www.w3schools.com/tags/tag_a.asp))
* Example 3: Images ([img](http://www.w3schools.com/tags/tag_img.asp))
* Example 4: Line breaks (br)
* Example 5: Comments and horizontal lines (<!-- -->, hr)
* Example 6: Common text formatting tags (b, strong, i, em, blockquote)
* Example 7: HTML header (head, title, link, style, script, meta)
* Example 8: Tables (table, thead, tbody, tfoot, tr, th, td)
* Example 9: Lists (ol, ul, li)
* Example 10: <div> elements - block level element used as a container for other elements or page content. Commonly used to help define layout for groups of elements.
* Example 11: <span> elements - inline element used as a container for other elements or page content.
* Example 12: HTML [forms](http://www.w3schools.com/html/html_forms.asp) (form, input)
* Example 13: HTML5 - same as example 10, but with HTML5 semantic elements.
## CSS
* CSS stands for Cascading Style Sheets.
* CSS helps the browser determine how to display HTML elements.
* HTML tags define the content of a page, CSS defines the style of the page.
* A single CSS rule has three parts: a selector, a property, and a value.
* A CSS selector can be an HTML element, an "id" attribute, a "class" attribute, or a combination of these (there are also more advanced selectors that generally aren't used all that often).
* CSS properites include color, font-size, width, height, etc...
* CSS values are dependent on the property being set.
* Comments can be added to CSS: /* This is a comment. */
* Like HTML tags, everything CSS is required to be lowercase.
* Tutorial/Documentation available at [w3schools.com](http://www.w3schools.com/css)
### Examples
* Example 1: Inline in HTML tags as "style" attributes
* Example 2: As an internal stylesheet the top of an HTML page using the <style> element
* Example 3: As an external stylesheet linked to an HTML page using the <link> tag
* Example 4: Using the "id" attribute as a CSS selector
* Example 5: Using the "class" attribute as a CSS selector
* Example 6: Combining CSS selectors
* Example 7: Multiple CSS selectors
* Example 8: Cascading styles with identical selectors
* Example 9: Cascading styles with identical selectors in different files
* Example 10: Cascading styles with more specific selectors
* Example 11: Cascading styles combined
* Example 12: Commonly-used properties
* Example 13: Styling links
* Example 14: [CSS box model](http://www.w3schools.com/css/css_boxmodel.asp)
* Example 15: [CSS Floats](http://www.w3schools.com/css/css_float.asp)
* Example 16: [CSS Positioning](http://www.w3schools.com/css/css_positioning.asp)
## Additional Resources
* [w3schools.com](http://www.w3schools.com/)
* [Dash](https://dash.generalassemb.ly/)
* [Codecademy](http://www.codecademy.com/)
* [Codeschool](https://www.codeschool.com/paths/html-css)
* [CSS Tricks](http://css-tricks.com/)
* [CSS Zen Garden](http://www.csszengarden.com/)
