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:

<!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <title>Welcome to my website!</title>
       <link rel="stylesheet" type="text/css" href="template.css">
   </head> 
   <body>
        Hello world!
   </body>
</html>

Head

Contains information about the HTML page (ex. <title>, <meta>)

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

<p>Paragraphs</p>
<h1>Heading 1</h1> and headings with higher numbers are smaller
<a href="http://www.website.ca">Links</a>
<img src="http://web-images.com/img/insert-picture-from-url.jpg"/>
<img src="/my-project/image-from-file-path.jpg"/>
unordered lists

<ul>
  <li>Make cool things</li>
  <li>Solve problems</li>
  <li>Etc.<li>
 </ul>

ordered lists

 <ol>
   <li>Step 1</li>
   <li>Step 2</li>
   <li>Step 3<li>
 </ol>

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

<a href="http://www.google.ca">
  <img src="http://angelgao.com/img/About/2.jpg"/>
</a>

To provide structure, use containers
- <div> for block level elements
- <span> 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 <head> tag (remember to have the href equal the name of your stylesheet)
- note this tag closes itself - no opening and closing tag

<link type="text/css" rel="stylesheet" href="style.css"/>

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 <body>
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)
[1] 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

body{
    background-color: <COLOUR CODE>;
    width: 100%;
    height: 100%;
}

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

<div class="love">
  <h1 id="cs">I love CS</hi>
</div>

To style IDs in the style-sheet use a hash sign

#cs {
  ….
}

To style classes in the style-sheet use a period

.love { 
   …  
}

Hover

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

#navbar a:hover {  
   color: #000099; /* blue */ 
}

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