Coding IQ icon

Download
& Install

Welcome!

  1. Atom Editor: http://atom.io
  2. Chrome Browser: https://www.google.ca/chrome

Workshop #2

Intro to HTML & CSS: Building a one-page website

Today’s project

See the whole project here.

final project

Course Outline

CSS colours
& typography

CSS colours

/* These are all the same colour - this is also a CSS comment by the way! */
p {
  background: firebrick;
  background: rgb(178,34,34);
  background: #B22222;
}

CSS colours

Let's take a look at some of these colour resources.

CSS Font Styles

The are quite a few CSS properties for styling text. Here's a few to discuss today. Change some values below to see what happens!

edit me

Just some text to test out the above styles. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni repellat sunt quae fugit illum in aut sed, quis nesciunt totam veritatis, dolores alias modi fuga commodi dicta facilis, consequatur temporibus.

Resource

Sitepoint Typographical Properties

Explain what each property does while updating each example in the code editor. Talk about the difference between using line-height with and without a measurement unit.

Web safe fonts

Web safe refers to pre-installed fonts. Operating systems do not have the same defaults, so use a font stack to provide fallback options.

font-family: Helvetica, Arial, serif;

To see a complete list, check out http://www.cssfontstack.com.

Web Fonts

With the introduction of CSS3, you can now use fonts other than the pre-installed web safe fonts.

There are some free options like Google Fonts or Font Squirrel.

Google fonts provides a more straightforward option since you can link directly to their css files. Let's take a look at how it works.

Class Exercise: Using Google Fonts

  1. Go to Google Fonts.
  2. See Specimen, and Select This Font on the following page to select a font.

  3. Check out popular pairings to preview and compare fonts.
    (The example project uses Open Sans and Bad Script.)
  4. Click on the Family Selected box to get the code.
    (You can change your selections in the next exercise.)

  5. Select font weights. The more you choose, the more it will slow down page load time.
    • The project uses Open Sans Light 300, regular 400 and Bad Script normal 400.
    • The default character set should contain what you need.
  6. Copy the <link> code snippet and add it the <head> of your page, before your styles.css, to reference the Google Font CSS.
    <head>
 <meta charset="UTF-8">
 <title>Laura Ipsum | Designer & Developer</title>
 <link href='http://fonts.googleapis.com/css?family=Bad+Script|Open+Sans:400,300' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="css/styles.css">
</head>

Now you're ready to use the new fonts. Use the font-family name listed in the Google Fonts page.

font-family: 'Open Sans', sans-serif;

Inheritance and Specificity

A strength of CSS is styles can be inherited from parent to child elements. Let's review the family tree structure between the elements.

<body><!-- parent of h1 and p -->
  <h1>My Website</h1><!-- child of body, sibling of p -->
  <p>This is a paragraph.</p><!-- child of body, sibling of h1 -->
</body>

CSS properties in the body selector is inherited by the descendant elements. A more specific selector will override the inherited values.

body {
  color: #222222;
}
h1 {
  color: blue; /* overrides the inherited style */
}

Class Exercise #5: Typography

(Make sure the Google Font stylesheet has been added to your HTML page to use the fonts.)

Let's add the base font to the body element, so all the descendant elements can inherit this style.

Change the font-weight to a thinner or thicker font (optional).

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

Class Exercise #5: Typography (continued)

Let's set a different font for only the headings.

To target multiple selectors at the same time, you can combine selectors with a comma.

h1,
h2 {
  font-family: 'Bad Script', cursive;
}

Your page should now look like exercise 5 in the reference folder.

Optional exercises

Try PhotoResizer, a free image editing app to crop images.

Resources

Class attributes

Remember adding a class attribute to the About & Loves section? They were added to give each section different styles.

<section class="about">
  ...
</section>

<section class="loves">
  ...
</section>

Resource

Note that id attributes can also be used for CSS but can only be used once per page. Some prefer to use only classes for styling because of this rule but it's a personal preference. Read more about it here and here.

Class attributes

Instead of using section as the selector, use the class name.

Class selectors are defined by leading period.

/* applies to any element with the class of about */
.about {
  background: red;
}
/* targets ALL section elements */
section {
  background: blue;
}

Organizing CSS with Comments

Use CSS comments to organize your styles.

It must start with /* and end with */ but can contain any characters in between. Use whichever comment style works for you but here's a few common conventions:

/* CSS Comments */
/*
CSS Comments
*/
/* CSS Comments
----------------*/

Background colours

Adding background colours to sections of the page is not only a design convention, it can also help to visualize the HTML blocks of content.

In the final sample project, the <header> uses a light background colour.

What selector should be used to apply this style?

header {

}

Class Exercise #6 - Background Colours

Let's update our project.

Add comments to block off and organize the CSS file. Use the sample below as reference.

/* PAGE HEADER
-----------------------------------------*/
header {
  background: #CECCCC; /* or use your own colour palette */
}

Color reference: #CECCCC

Class Exercise #6 - Background colours

Next, apply a background colour to just the "Loves" section. (The "About" section is getting a different treatment in a later exercise.)

/* LOVES - things I love
-----------------------------------------*/
.loves {
  background: #9D6381;
}

Color reference: #9D6381

Since there's only one <footer>, we can use that as our selector. Also, change the color of the text, if using a dark background colour.

/* FOOTER - contact info
-----------------------------------------*/
footer {
  background: #0F110C;
  color: #CECCCC;
}

Color reference: background: #0F110C; color: #CECCCC;

Class Exercise #6 - Background colours

Notice the colour of the link didn't change from default blue?

To change the color of the link, select the anchor tag and override the default blue.

a {
  color: #9D6381;
}

Color reference: #9D6381

Not exactly super polished yet but it's getting there. Your page should look similar to exercise-6.html in your reference folder.

The Box Model

The Box Model

The CSS Box Model describes the way CSS determines the size and spacing of HTML elements. To the browser, every HTML element is a rectangular / square box.

In the current project HTML document, the red lines in the example below represent the outlines of all the elements.

Note the spacing between the elements on your page such as the headings and paragraphs. That's the default margin and padding for those elements.

The Box Model

There are 5 CSS properties used to determine size and spacing.

Box Model example

Image source: W3C

Margin and Padding

The values for both margin and padding can be declared using 1 to 4 values, to target different sides of the element. A variety of measurement units (px, %, ems, rems, etc) can be used.

Setting the value to "0" will remove any default space and any positive value will add space.

Margin can also use negative values. Padding cannot.

padding: 2px 10px 2px 10px; /* top, right, bottom, left */
padding: 2px 10px 2px; /* top, right & left, bottom */
padding: 2px 10px; /* top & bottom, right and left */
padding: 2px /* all sides have the same value */
margin: 2px 10px 2px 10px; /* top, right, bottom, left */
margin: 2px 10px 2px; /* top, right & left, bottom */
margin: 2px 10px; /* top & bottom, right and left */
margin: 2px /* all sides have the same value */

Margin and Padding

Both margin and padding can also used the longhand property to target a specific side.

margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;

Practice!

Practice using margin and padding below, using 1 to 4 values.

edit me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt sint beatae dolor dolorum aliquid quis explicabo vitae numquam, quas illo dolore molestiae ratione, perferendis, deleniti nemo ea voluptatibus! Quibusdam.

Notice that the background colour doesn't flow into the space created by margin, since margin adds space around and outside of the element.

Border box: width, padding & border

The relationship between width, padding and border can be confusing.

Let’s try adding one property at a time, and watch how the size of the box changes: (1) set the width to 450px, (2) add 35px of padding, (3) increase the border to 15px.

edit me

Border box example.

Notice how the size of the box gets wider? Let's look at the math.

width + padding left + padding right + border left + border right = total size
450 + 35 + 35 + 15 + 15 = 550px

¯\_(ツ)_/¯

Border Box Fix

Luckily, there's a fix for this. But first let's compare how it looks with and without the fix. Notice that the values are the same in both examples but one appears to be bigger than the other?

edit me

This example does NOT have the border box fix.

edit me

This example DOES have the border box fix.

* { Box-sizing: Border-box }

Add this snippet to your project (and to all future projects) to fix how the width/padding/border size is rendered.

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Add it to the very top of your styles.css file.

See more about The Box Model here.

Class Exercise #7 - Spacing

(Make sure the box model fix from the previous slide has been added to styles.css before proceeding. Also, use the amount of space that looks good to you & use the examples below as a guide.)

Add padding to all the portions of the page so the content is not squished to the edge and has consistent styling.

Combine the selectors to target them all at the same time.

header,
section,
footer {
  padding: 100px 150px;
}

Class Exercise #7 - Spacing

Notice the white space around the edge of the page? That's default space in the body element. Reset it by setting the values to 0.

body {
  margin: 0;
  padding: 0;
}

Use margin to adjust the default space around the <h1> and <h2> tag. (You can inspect the element using the dev tools to see the default margin.)

h1, h2 {
  margin: 0; /* removes default space */
}

Class Exercise #7 - Spacing

The final project also has the content in the "Loves" and footer section centered. How can we target all the content in both of those sections at the same time?

.loves,
footer {
  text-align: center;
}

Your page should now look similar to exercise-7.html.

Class Exercise #8 - Typography

If you want to remove the default bold style of the headings, you can add the font-weight property.

h1, h2 {
  font-weight: normal; /* removes default bold style */
}

Let's also customize some font styles using font-size and line-height.

h1 {
  font-size: 75px;
}
p {
  font-size: 18px;
  line-height: 1.5; /* adjusts space between the lines */
}

Your page should now look similar to exercise-8.html.

Thank you !

The end

1