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, 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

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

Github and Website Workshop/HTML CSS review

Contents