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, height (in a fixed measurement or in %)
 * font-size (use em not px)
 * color
 * position on the page, font styling, margins and padding around the object, and MUCH more! We will be discussing these things in more depth in this workshop.

Often, in the beginning, CSS can be learned by wanting something to look a certain way and Googling which CSS properties to use.

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