Github and Website Workshop/HTML CSS review

From OpenHatch wiki

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>


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

Retrieved from "https://wiki.openhatch.org/wiki/Github_and_Website_Workshop/HTML_CSS_review?oldid=15803"