Github and Website Workshop/HTML CSS review

This is an HTML/CSS reference for the Github and Website Workshop.

Below you can find some of the foundational concepts of how HTML and CSS work, which we expect you to have a general understanding of for this workshop.

The Big Picture of a Website

 * HTML - Markup language to transfer data
 * CSS - Adding styles to the content
 * Javascript - Dynamic interactions with the web page (not a part of this workshop)

= HTML=
 * Content is written as elements in tags
 * Things in <> called tags, usually have opening and closing
 * HTML contains the static content of your page which do not change

HTML Skeleton
Start with the following format:

Head
 * Contains information about the HTML page (ex., )

Body
 * The actual content of your page (ex. images, text, links)
 * Contains a:
 * header tag (for header bar)
 * main tag (where the main stuff goes)
 * footer tag

In the main tab, Information can be organized with headings, and paragraphs, which help organize blocks of text

Helpful tags

 * Paragraphs
 * Heading 1 and headings with higher numbers are smaller
 * Links
 * 
 * 
 * unordered lists
 * ordered lists


 * Remember - Tags can exist within other tags! For example - an image that links to a page


 * To provide structure, use containers
 * for block level elements
 * for inline level elements

=CSS=
 * CSS = Cascading Style Sheets
 * CSS makes HTML pretty by styling it
 * we tell our html file to use our stylesheet "style.css" by including this line in the tag (remember to have the href equal the name of your stylesheet)
 * note this tag closes itself - no opening and closing tag

Style elements you can change with CSS

 * background-color (remember american spelling)
 * width, https://developer.mozilla.org/en-US/docs/Web/CSS/height height] (in a fixed measurement or in %)
 * font-size (use em not px)
 * font can be used to apply a bunch of font styling - see the live example in the link
 * color (text colour)
 * margin - the space that exists around the element
 * margin: 0 auto; has two values after margin - the first (0) applies to top and bottom, the second (autho) applies to left and right
 * auto left/right centers the div horizontally, which is good for your
 * position determines how your element is positioned on your page - relative to other elements or not
 * z-index - by default HTML elements have a z-index of 1, and elements with higher z-indices will overlap those with lower z-indices
 * display - determines whether or not you can see the element, and its rendering box (e.g. block like div, or inline like span)
 * can round corners or make circular elements

Often, in the beginning, CSS can be learned by wanting something to look a certain way and Googling which CSS properties to use. So feel free to look up stuff you'd like to do, or ask a mentor!

You can add style by referring to the HTML tag
 * we call this tag (in the following example it's body) a selector

Don't forget the curly brackets for each selector, and to put semi-colons after each line with a property-value pair!

Selectors: IDs and Classes

 * What if you want to style only one div, and not all of them?
 * div is a selector, but we can select certain elements in HTML to style by giving them classes or IDs
 * IDs should only label a single html element (e.g. the navbar), but classes can be applied to multiple elements (e.g. certain groups of text that you want a different colour)
 * These should be specified in the tag
 * To style IDs in the style-sheet use a hash sign
 * To style classes in the style-sheet use a period

Hover
You can also change the way something looks when you hover over it. For example:

we’re styling  tags inside #navbar in the case when the mouse is hovering