Lab 5 - Introduction to CSS3

Overview

This week's lab will cover the following:

Lecture Slides

Getting started

Open the file you created in Lab 4 (index.html). You'll be making changes to this file for Lab 5.

Blockquote and pre-formatted text

Add the following quote (below the paragraph you wrote in Lab 4) using the paragraph(<p> and </p>), blockquote(<blockquote> and </blockquote>) and pre-formatted(<pre> and </pre>) text tags to the body of your web page. The blockquote and pre-formatted tag are applied to the appropriate text in the same method you learned to use the paragraph quote.

"Heroes are people who face down their fears. It is that simple. A child afraid of the dark who one day blows out the candle; a woman terrified of the pain of childbirth who says, 'It is time to become a mother'. Heroism does not always live on the battlefield." - David Gemmell
Tip: Save! Remember to save regularly, in the event of power outage or other situations that could cause loss of work.

Implementing Cascading Style Sheets(CSS)

Any HTML tag can have a styling options applied to it via CSS. CSS can be implemented on your page in a variety of ways. These are:

Inline
Used within an html tag to apply a style uniquely in that place. This should be used sparingly, if at all.
Internal
CSS is applied in a style block in the header. This is more desirable than Inline, however becomes problematic when trying to maintain a unique style across multiple pages on a website.
External
CSS is applied using a separate file that can be then linked your page in the header. This is ideal, as you can manage the appearance of your website from one common place. We will be focusing on this method.

Creating Your Style Sheet

Create a new file called style.css in the same directory as your labs.

Linking Your Style Sheet to Your Index Page

Add a link to the head portion of your index page using the following syntax:

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

Note the link tag has 3 modifiers you are using in this context. Rel defines the relationship (ie: How is the linked content relevant to the page), type describes the type of content being linked (in this case text/css is the proper type to reference a CSS style sheet), and href lists the name of the file and location that is being included. Since the style sheet exists in the same directory as your web page, an absolute path to the included file is not necessary.

CSS Comments

Comments are often helpful when dealing with large blocks of CSS code. Adding comments allows anyone looking at the code to understand what's going on (assuming you've clearly explained it in the comment). Using the following sample, add your name and student number as a comment in the top of the CSS file.

	/* Jason Carman 000000000 */

Creating your style

CSS references HTML tags, and applies different attributes to them. Each tag has a variety of attributes that can be modified. Some attributes can apply to multiple tags and work similarly with different tags. For example, to set the body background to black, you would add the following syntax to your style sheet.

	body {
		background-color: #000000;
	}

In the above sample, the tag you're modifying (in this case the body tag) is referred to as the selector. The things you can modify that appear between the curly braces are referred to as the attributes, which have values. Background-color is an attribute. The colour is it's value. Notice the color code begins with a # and consists of 6 digits. Each of these is a hexadecimal digit, which are grouped into 3 categories respectively. The first two represent the red balance in the colour, the second two green and the final two blue (as demonstrated by the sample below).

#RRGGBB;

Blending these three colours together works the same as mixing paints or colours (which you may have experienced in high school art class). You can play with the numbers to get the colour you wish, or use an online resource such as the one w3schools provides. There is also a colour picker available in VS Code. You will notice when you add a hex colour code to your style sheet, the colour appears in front of the code. Click on the colour to access the colour picker.

To do:

Using the following reference material complete the following. It may be useful to refresh your page each time you change a value in the css to view the changes.

Notice the pre-formatted text runs off the side of the screen and requires scrolling to read. This isn't very user friendly. To correct this you can modify the pre tag through css to allow word wrapping. Add a selector for the pre tag and give it the following attribute.

white-space: pre-wrap;

You can specify multiple selectors to be modified together. This is useful if you wish to apply an attribute uniformly across multiple tags. You will use this to assign a slightly darker shade to the background of the paragraph, blockquote and pre tags. To specify multiple selectors, list them separated by commas as below:

	p, blockquote, pre {
	}

Pulling your changes into your Apache server

Start your www instance in the AWS Learner Lab, and connect to it using SSH. Once you have logged in, change to the labs-4-5-username directory in your home directory. Be sure to replace username with your username, or this will not work.

	cd labs-4-5-username

Use git pull to pull the changes in from your repository.

	git pull

Copy the updated files into your document root.

	sudo cp * /var/www/html

Completing the Lab

Take a screenshot. Your page should look similar to the following output. If it does not, go back and complete whatever you've missed.

Lab 5 sample

Upon completion of this lab you should have a simple web page using several tags we talked about in our lecture. Your page should validate using the w3schools html validator & css validator. To submit your lab you need to submit the code to your GitHub repo (which you did in already in the lab). Additionally, you need to submit a screenshot of it running your server to the assignment folder in eCentennial.

Exploration Questions

The following questions are for furthering your knowledge only, and may appear on quizzes or tests at any time later in this course.

  1. What does CSS stand for?
  2. What is the difference between a selector and an attribute?
  3. What are the three ways to implement CSS? Which of these did we use in the assignment?
  4. How do you specify multiple selectors in CSS?
  5. Colour codes are three groups of two hex digits per group. What do the three groups of hex digits represent in terms of colours?