Introduction to HTML & CSS

Your instructors

heather payne

Heather Payne

heather [at] heatherpayne.ca
heatherpayne.ca // @heatherpayne

pearl chen

Tessa Thornton

tessa [at] thephuse.com
tessathornton.com // @tessthornton

( Interactive code slides thanks to CoderDeck. Also, thanks to Pearl Chen and Mark Reale for creating the foundation for today's content. )

Today's Project

Click here to see the whole project

Course Outline

Morning

Afternoon

Let's get set up

You should have already downloaded the following:

Opening HTML files in your browser

First, what is a browser?

The browser's main functionality is to present the "web resource" you choose, by requesting it from the server and displaying it in the browser window. The "web resource" is usually an HTML document, but may also be a PDF, image, or other type.

What is an HTML document?

We'll get into this in more detail shortly. For now, let's check out an example. Go to http://ladieslearningcode.com. Right-click and select "View Page Source". That's HTML.

We'll learn to write our own HTML today. For now, let's learn to open an HTML document (like the ones we'll create later) in our browser.

  1. Open Sublime Text and go to "File -> Open".
  2. Navigate to the folder called "Project" in the folder you downloaded with today's slides.
  3. With the entire folder selected (not just one file within it), click "Open".
  4. Now that the folder is open in Sublime, click on "blank.html" so that it fills the screen. Now, right click and select "Open in Browser". (If your default browser isn't set to Chrome, here are the instructions.)

You should see something like this:

Now, let's make a change to our file and re-open it in our browser.

Dive back in to Sublime Text...

  1. Change something. For example, change the text within the <p> and </p> tags.
  2. Save your file (CMD + S or CONTROL + S)
  3. Right click and select "Open in Browser".
  4. Change something else and open it in your browser again, just to make sure you've got it!
  5. After saving, you can also just refresh your browser to see the changes (rather than opening your file in a new tab every time!)

A note: don't be scared about breaking anything or doing something wrong. The stuff we're doing today is what computers were designed to do! Feel free to play around, take risks and make mistakes. That's the best way to learn.

What are HTML & CSS?

Let's start with HTML...

It's the content layer

HTML (HyperText Markup Language) is what webpages are made out of.

We use HTML to describe each part of a webpage is to the browser, so that our content is displayed properly. We help our browsers to understand how we want things displayed by using tags. Here are a few examples of tags that you've probably seen before:

To create an HTML file, you need to have .html at the end (sort of like how you need .pdf at the end of PDF documents).

Quick exercise: Let's save a new file as an HTML file

  1. In Sublime Text, click "File -> New File"
  2. By default, the file type is "Plain Text" not HTML
  3. You have two choices for saving this file as an HTML file:
    • On the bottom right corner, you should see the words "Plain Text". Click the words, and select HTML from the list. Save the file by clicking CMD + S or CONTROL + S. Call it anything, save it anywhere. We won't be using it for anything else.
    • Click on "File -> Save As". Give your file a name and add .html at the end (for example, "puppydog.html"). Click save. You can save it anywhere - we won't be using this file for anything else.

The Nuts and Bolts of HTML

When we write HTML, we create HTML Elements by wrapping our content in tags. These tags describe the content that is inside of them, NOT what they look like. We use different kinds of tags to create multiple elements and all together they make up something called our HTML Document.

It is important to understand that HTML has very little to do with the style of your website or the look of the content - that is what CSS is for.

Tags that you should no longer use!

It’s very important to create semantic, clean and valid markup before doing anything else. When we write HTML, we are only describing the content - not defining how out website looks (that's what CSS is for).

Here are a few examples of tags you should NEVER use:

Please don't use any of these tags ever again!

Speaking of CSS...

It's what makes the web look nice.

What is CSS?

CSS (Cascading Style Sheets) is what makes websites look nice.

While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like.

For example, p means paragraph in HTML. If we wanted to make all of our paragraphs red and underlined, we'd do something like:


p {
  color: red;
  text-decoration: underline;
}

Let's add this to our HTML document

To indicate that we're adding CSS to blank.html, we need to find the opening and closing <style> tags between our opening and closing <head> tags.


  <!doctype html>
    <head>
      <title>Ladies Learning Code HTML and CSS</title>
      <style>
        p {
        color: red;
        text-decoration: underline;
        }
      </style>
    </head>
    <body>
      <p>This is a paragraph</p>
    </body>
  </html>
      

Ta-da!

You just created your first website.

HTML + CSS = website

A note about HTML and CSS...

HTML and CSS are sort of like languages, but they're DIFFERENT languages. Just like French or Italian, they each have their own set of rules. It takes time to learn these languages. Don't worry if you don't get it all right away.

Websites without CSS...

This:

Websites without CSS...

Becomes this:

Why is that again?

Because HTML defines content, and CSS defines the look and layout (it makes the web look nice).

Let's focus on HTML for now

Time to start writing some HTML (which is also called "markup")

You can remove what we added between <style> and </style> for now. Keep <style> and </style> there!

HTML tags

The structure of a webpage is defined by HTML tags. Angled brackets denote tags, like this:

<tag>

Think about HTML tags like the beams of a house.
It's what holds up a webpage.

house beam

HTML tags

Tags typically come in pairs -- an opening tag and a closing tag with a forward slash:

<tag></tag>

Some examples that you've already seen:


<!DOCTYPE html>
<html>
  <head>
    <title> </title>
  </head>
  <body>
  </body>
</html>

HTML tags

Tags can be "nested" within other tags, like this:

<tag><tag></tag></tag>

(This relationship is often referred to using the terms "parent" node and "child" nodes.)


In the example below:

<!DOCTYPE html>
<html>
  <head>
    <title> </title>
  </head>
  <body>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title> </title>
  </head>
  <body>
  </body>
</html>

What goes in the <head> and what goes in the <body>?

Things that you put in the <body> of your HTML document will show up on your webpage. Things that you put in the <head> of your HTML document won't show up. You can think of the <head> as a place to write secret notes to your browser. For example, our styles go in the head. We don't want our styles to show up on our page, but we do want our browser to apply the styles.

Exercise: Open the file "blank.html" in Sublime Text

  1. Change the content within the opening and closing <title> tags, and observe the change in your browser.
  2. Add an additional paragraph.
  3. Add a few headers to the page, above each paragraph. Hint: you'll need to use some or all of the following tags: <h1> and </h1>, <h2> and </h2>, and you can even try using h3, h4, h5 and h6, if you like.
  4. Try adding three links. The code for a link looks like this:
    <a href="http://link.com">Click here</a>

Don't worry too much about WHERE you're putting things for now. Just write some code!

Don't forget to save and refresh your browser to see your code in action!

A note about attributes

Attributes are another important part of HTML markup.

An HTML attribute is a modifier of an HTML element. HTML attributes generally appear as name-value pairs, separated by "=", and are written within the start tag of an element, after the element's name:

<tag attribute="value">(content to be modified by the tag)</tag>

Where "tag" names the HTML element and "attribute" is the name of the attribute.

Here's an example of an attribute that we've already seen today:

<a href="link.com">Click here</a>

In this case, "a" is the tag, "href" is the attribute and "http://link.com" is the value.

Exercise: Let's write the markup for our final project

The output (what you'll see in your browser) of this exercise is on the next slide. Write the HTML.

Write the HTML that will output this:

Hint: You'll want to use <h1> and </h1> once, <h2> and </h2> three times and <h3> and </h3> once.

You can generate your own placeholder text at http://www.lipsum.com. Or, you can try Cupcake Ipsum or Bacon Ipsum, for something new.

Adding images

Let's learn to add images to our webpages. Note that image tags are unique in that they are "self-closing" - there is no closing tag.

Let's start by adding an image that is hosted online. Here's the code:


        <img src="http://placekitten.com/g/200/200">
      

Try copying and pasting that line of code into your project, right under the opening <body> tag.

Next, try finding a different image online and replacing the kitten photo.

Adding images, Part 2

You can add images another way - rather than linking to images hosted online, you can link to images in a folder on your computer.

In the Project folder, at the same level as "blank.html", there's an image called "logo.png". To include this image on our website, we'll need the following code:


        <img src="logo.png">
      

Try copying and pasting that line of code into your project, right under the opening <body> tag.

Next, try replacing that image with one of the images in the Project "images" folder. Hint: it will look similar, but with "images/" in front of the image name. (This is because "images" is the name of the folder - we have to tell our browser where to look.)

Exercise: Add a logo and profile image to your project

The output (what you'll see in your browser) of this exercise is on the next slide. Write the HTML.

Hint: the logo image is called "logo.png", and the placeholder profile image is called "profile.jpg". Both can be found inside the "images" folder.

Write the HTML that will output this:

A quick note about image types:

There are three main image types: jpg, png and gif. Here's a general rule of thumb:

Exercise: Add a few more images

Your output should look like what's on the following slide.

Write the HTML that will output this:

And that's it!

We've written all of the HTML that we'll need for today's project! Your markup should look like this:

A note about organization

Did you see how the markup in the previous slide was really clean and easy to read? It's because everything is indented properly.

Take a few moments now to clean up your code and make it look like the previous slide. Once we get into CSS, you'll be grateful!

And now, on to CSS!

CSS basics

CSS is closely paired with HTML

CSS doesn't do anything on its own, it's the presentation layer on top of a content base

If HTML is the beams of the house, CSS is the layout, paint, and decorations

CSS Syntax

CSS is made up of rules that refer to HTML elements (like <p> and <ul>), and define what those elements should look like.

A CSS rule is made up of a selector and one or more declarations

A selector tells the browser what element(s) we are styling.

It looks like this:

h2 {}

The above selector will select all <h2> elements and apply our styles to them. Our styles will go between the curly brackets.

CSS Syntax

A declaration tells the browser what style we want to apply to our element

A declaration is always made up of two parts: a property and a value

A property tells the browser what we are modifying (ex. font, colour, size)

A value tells the browser how to modify the property (ex. Arial, green, small)

A declaration looks like this:

background-color: green;

CSS Syntax

background-color: green;

The value (the part after the colon) is specific to the property type

Ex. size-related properties like height, width, or font-size are usually specified in px (pixels), while colour-related properties are specified with a colour name or code

It's very important that you write the syntax correctly, with a colon after the property name and a semi-colon after the value.

Adding CSS to HTML

You write CSS rules in a set of <style></style> tags

You add the style tags to the <head> of your HTML document like this:


<html>
  <head>
    <style>
      h2 {
        background-color: green;
      }
    </style>
  </head>
  <body>
    
  </body>
</html>

CSS Syntax

When we put selectors and declarations together, they make a CSS rule, which looks like this:


h2 {
  background-color: green;
}

This rule will select all <h2> elements and change their background colour to green.

Try copying and pasting the above code in between the <style> tags and refreshing the page in your browser.

CSS Syntax

We can add multiple declarations (property: value; sets) to one selector to modify multiple properties:


  h2 {
    background-color: green;
    font-weight: bold;
    font-size: 28px;
  }

Make sure you always end each declaration with a semi-colon

Try replacing the previous rule for <h2> with this one and refreshing your browser

Next, clear out all the code you added between the <style> tags. We're adding more soon!

Exercise: First CSS Rule

All the text on the page is now blue: this is because the <body> tag is the highest-level tag we can see on the page, so the color property applies to the body AND all its children, including every heading, paragraph, and list item.

Using Hex Codes

Let's change the text to a colour that's easier to read.

We're going to use a hex code, which is a 6-character code that specifies a colour.

You don't have to understand how they work, just remember that they start with a # sign. It might help you to know the Hex codes for some of the basic colours:

The code for a nice dark grey is #444444. Let's add it.


body {
  color: #444444;
}

Check outhttp://colorpicker.com for more awesome colours!

Styling Type with CSS

There are lots of CSS properties which let us style the text in our HTML:

Styling Type with CSS, Part 2

Let's change the font to a sans-serif like Helvetica:


  body {
    color: #444444;
    font-family: Helvetica, Arial, sans-serif;    
  }

The font-family property accepts a list of font names: the first font is your first-choice font, the next ones are fallbacks in case that font is not available. Not all fonts are commonly available, so try to stick to 'web-safe' fonts like:

Changing Font Sizes

If we want to make our <h1> and <h2> tags a bit bigger:


h1 {
  font-size: 48px;
}
h2 {
  font-size: 32px;
}

Changing Line Height

We can change the line height (or leading) with the line-height property to make it easier to read

line-height is specified as a multiple of the size of the font: so a value of 1.4 means the lines will be 1.4x as tall as the text.


p {
  line-height: 1.4;
}

Styling Images

Let's add a dark border around the profile image. Start by writing a selector to pick out the <img> tag.


img {}

The border property has 3 parts: the width, the style, and the colour. So, if we want a 1px wide, solid, grey border, we use:


img {
  border: 1px solid grey;
}

Being More Specific

Our border is now applying to all images on the page, including our logo. We don't want that, so we need a way to target only the profile image.

HTML gives us a way to attach extra identifying information to HTML elements so that we can target them. We call these "classes".

Classes are attributes that you add on to tags.


<p class="classname"></p>

Targeting an Element with a Class

We can write a selector in our css to target the element we added a class to using a .


p.classname {}

And then apply the styles we want to only the item with the class:


p.classname {
  color: red;
}

Exercise: Style Profile Image

Solution: Style Profile Image

Your HTML should look something like this:


<img class="profile" src="images/profile.jpg"> 

And your CSS should look something like this:


img.profile {
  border: 1px solid grey;
  width: 200px;
  height:200px;  
}  

Adding More Classes

We can do the same thing to style our "favourite things" images.

Since we probably want all four images to have the same styles, we can add the same class to each.

Add a class of "favourite" to each of the four images.


<img class="favourite" src="images/kitten.jpg" >

Add some styles to your images, using things like width, height, and border.

More Stuff You Can Do

Don't worry if it seems like there are a lot of CSS properties to remember. Keep looking them up on the internet and they'll sink in eventually. Even the pros have to look things up every once in a while :)

The Box Model

This is the trickiest part of CSS, don't worry if it seems confusing at first!

The CSS "Box Model" describes the way CSS styles the size and spacing of HTML elements.

To understand the box model, we need to understand how the browser "sees" HTML elements.

To the browser, every HTML element is a rectangular box.

If we show the outlines of all the elements in an HTML document, it looks a bit like the next slide:

The Box Model

CSS uses 5 properties to determine the size and spacing of these boxes:

Margin and Padding

Margins

There are two CSS properties for adding space around our elements: margin, and padding

The margin property adds space around the element, outside of the border:


h2 {
  margin: 40px;
}  

This code adds 40px of space on every side of the element.

Padding

If we want to add some space inside the border, we use the padding property:


h2 {
  margin: 40px;
  padding: 40px;
}

This code adds 40px of space to every side of the element, but it does so within the border.

Margin vs. Padding

Adding padding to an element makes the element bigger, whereas adding a margin adds space around the element.

If you make a 100px wide element, and then add 40px of padding to it, it will become 180px wide.

If you add a 40px margin to a 100px wide element, it stays 100px wide.

If you add a 1px border to a 100px wide element, it will become 102px wide.

If your element doesn't have a border or a background, you may not be able to see the difference between margin and padding.

More on Margins and Padding

You can specify which side of an element you want your margins to apply to with the margin-top, margin-right, margin-bottom, and margin-left properties:


h2 {
  margin-top: 40px;
  margin-bottom: 40px;
}

The same goes for padding and border:


h2 {
  padding-bottom: 40px;
  border-left: 1px solid red;
}

Exercise: Box Model

Solution: Box Model

Your code should look something like this:


img.profile {
  padding: 5px;
}
img.favourite {
  padding: 5px;
  margin: 10px;
}

Centering the Logo

We probably want that logo to be in the centre of the page. To centre elements in CSS, we set the margins on the sides to auto, which causes the browser to automatically calculate how much margin to add to each side to centre the element.

Instead of specifying both the margin-left and margin-right properties, we can use a shorthand that looks like this:


img {
  margin: 0 auto;
}

The 0 sets both the top margin and the bottom margin, and the auto sets both the left and right margins.

Centering the Logo

We need a way to target our logo element so that we don't end up centering all the images.

Add a class called logo to your logo <img> tag:


<img class="logo" src="images/logo.png">

Then write a selector in your CSS to apply the margin property to


img.logo {
  margin: 0 auto;
}

Nothing Happened!

Other Inline Elements

Layout: Section by Section

Banner Section

Banner Section CSS

Adding a background image

Exercise: Add a background image

Exercise: Add a background image

Browser default styles

CSS Child Selectors

CSS Child Selectors

About Section

About Section

Centre-aligning the header

CSS Floats

CSS Floats

CSS Floats

Next Section: Favourites

Centre-aligning

Exercise: Contact Section

Contact Section

Styling Multiple Sections at Once

Styling Multiple Sections

Now we have a nice-looking website with all the elements nicely styled!

But there's still more we can do to make our site extra special

Making our Background image fixed

Adding Custom Fonts

Adding Custom Fonts

Adding a Menu

Adding a Menu

Adding a Menu

Styling the Menu

Styling the Menu Links

Making the menu "sticky"

Getting the links to work

Exercise: Customize!

With whatever time is left, try changing and adding CSS properties to customize the page

Check the CSS Cheat Sheet to find new properties to try out

Have fun!

Next Steps: Hosting

Right now your website only lives on your laptop, but if you'd like to get it hosted online for free, check out this tutorial on hosting with Github. If you've purchased website hosting and want to upload your projects, learn about uploading with FTP

Next Steps: Mobile

Your site may be beautiful, but it might not be very mobile-friendly. Luckily, that's easy enough to fix once you learn about mobile web design and development.

Come out to the Ladies Learning Code Intro to Mobile workshop on June 22nd to learn more!

Thank you!

(Use the left and right arrow keys on your keyboard to navigate.)