Embed Size (px)
Citation preview
1
CS1046 – Lab 2
Timing: This lab should take you 1 ½ to 2 hours.
Objectives:
By the end of this lab you should be able to:
Create an external cascading style sheet and attach it to an HTML webpage
Change the font size and colour of an element or group of elements referred to by the same tag
Identify the syntax used to create style sheets including curly brackets, colons, semicolons and
spacing
Add a comment to a style sheet
Properly indent a style sheet
Use a Google Font to mark up the text in your webpage
Identify a single element in order to style it using the id attribute
Identify a group of elements that need to be styled using the class attribute
Use the <div> tag and the float declaration to lay out a webpage
Use the <span> tag to markup a few words in a document
Exercise 1 – Styling your first webpage
1. Using the Chrome browser, go to this webpage:
http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex1a.html
Right click and view the source for this page. Notice the simplicity of the structure of the body
section. It only has three kinds of tags. It has paragraph tags (<p>), line break tags near the end
(<br/>) and some header tags <h1> and <h2>). The formatting is kind of boring also, so let’s make it
look a bit nicer. Let us create a duplicate of this page
2. Create a new folder called lab2.
Open Notepad, create a new file and then immediately save the file (in the lab2 folder) as
yourwesternuseridlab2ex1a.html (eg. jsmith2lab2ex1a.html).
It is important to save the file as an .html and not .txt file. Consult Lab 1 Exercise 5 if you have
trouble.
3. Return to the “view source“ of the webpage from Step 1, copy the entire markup (the tags and
content) and paste it into the open Notepad window and resave the file. At this point, you should
have a copy of original webpage. Test it in your browser to view the poem.
4. We are now going to make the poem look a bit nicer. We will do this by adding style rules. A style
rule might say that we want all paragraphs to have a red font that is 16 pixels high. So we would put
a style rule on all <p> tags. There are multiple ways of styling HTML. We can put the style rules right
inside the HTML file but that makes the file look messy, so we are going to keep the style rules in a
separate file. Another benefit of separating styling from markup is that you can use the same style
2
file on other HTML webpages. Now let us make our first styles rule file (otherwise known as style
sheet). The separate file should always have the file extension .css. For example, you might call your
style sheet: mystylesheet.css
5. Open another Notepad window, and in the same directory (the lab2 directory), do File>Save As and
create another file called myfirststylesheet.css. (Similarly to when you create HTML pages with
Notepad, make sure that the Save as type: is set to All Files)
6. Go back to your HTML file in Notepad, find the line with </head>, then before that line, add a new
line that looks like this:
<link rel="stylesheet" type="text/css" href="myfirststylesheet.css">
Thus your HTML file should now look like this:
7. This new line tells the browser to open the myfirststylesheet.css and see if any formatting needs to
be applied to the current webpage. Make sure you save your HTML file after adding the above line.
8. Now we need to put some style rules in the myfirststylesheet.css file. A style rule has 2 parts: a
selector and a declaration. It looks like this:
body {
font-size: small;
}
The selector tells which tag to apply the style rule to and the declaration (which is surrounded by
curly braces) lists the property (such as font-size), then a colon (:) and the new value for the
property (such as 14px) followed by a semicolon. Be very careful when writing style rules.
Remember that computers are extremely picky about syntax (how you type the style rule).
Something even as minor as forgetting the semicolon can mess up the rule and it will not work. Here
is a sample rule:
p {
font-size: 14px;
}
Notice the layout for the rule. You could put it all on the same line but we have guidelines for how to
write them. Some guidelines are:
a. Put the opening { brace on the same line as the selector
b. Put the rule on next line and indent the rule a bit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Dr. Suess Poem</title>
<link rel="stylesheet" type="text/css" href="myfirststylesheet.css">
</head>
<body>
<h1>Oh, the Places You'll Go!</h1>
…
Selector
declaration
3
/* paragraph style */
p {
color:blue;
font-size: 14px;
font-style: italics;
}
p {
color: lightblue;
font-size: 14px;
}
c. If you have another rule for this selector, put it on the next line, and indent it to the same
position as the previous rule
d. Put the closing } brace on the next line
e. Put comments (i.e., post-it notes to yourself or anyone else who might read the style sheet)
as needed. Comments between /* and */ are ignored by the browser but can be helpful
when debugging, etc. We will explain more about comments in JavaScript, but for now, just
think of comments as “sticky notes“ that you surround with /* and */ to help you remember
why you did something (but the person viewing your page will not see this note).
You could write your style rule like this:
But we recommend you do this:
9. Let’s add some rules now to our myfirststylesheet.css. Go to that blank file in notepad and add the
following lines:
10. Save your style sheet file but do not close the Notepad window
for it or the Notepad window for your HTML file. Go back to the
browser and reload/refresh your .html file (or if you have closed
the browser click on the .html file while in the lab2 folder). It
should look similar to this:
11. NOTE: If your webpage looks exactly the same (without any color)
return to your HTML file (using Notepad) and delete the double
quotes where we define the link parameters (i.e., <link
rel="stylesheet" type="text/css" href="myfirststylesheet.css"
>) and then type them in again (use the double quotes " on the
same key on the keyboard as over the apostrophe). This is a common formatting issue with copying
symbols from Microsoft word. Notice that now the font is lightblue for all the text that was contained
between paragraph tags. We had to spell that colour name EXACTLY the way that HTML was
expecting it to be spelled or this would not have worked. You can get a list of all the possible colours
names from here: https://www.w3schools.com/colors/colors_names.asp There are other ways to
tell which color you want but for now, to keep things simple, let us just use the colour names.
p {color:blue;font-size: 14px;font-style: italics;}
4
12. Change the .css file so that when it is applied to your HTML file the paragraph font is even bigger and
pick a new colour to display the font in. Save your .css file and reload your HTML file in the browser
to make sure that your rule change worked.
13. Now let’s do some more styling. Right after the closing } brace in your .css file, add another rule so
that you css file looks like the box below, then save your .css file and reload your HTML file in the
browser and notice the change.
14. Notice that the <p> style change takes precedence over the <body> tag. The paragraphs have larger
text and are colored light blue, while the rest of the body, which in this case are the headers, are
green and have the smaller font of 8 pixels. Even if we switched the order of the style rules (put the
<body> first before the <p> rule) the <p> rule would still take precedence. This is because the <p>
</p>tags are nested INSIDE (between) the <body> and </body> tag. So the style sheet applies the
rules for the outer most tag (everything between <body> and </body>) FIRST and then it applies the
next inner tag (everything between the <p> and </p> next) and so on, until it comes to another inner
tag, if the next inner tag has a rule for it, it will apply that rule. If the tag has no rule associated it will
just take the rule from the body.
Congratulations, you now can:
a. Create a style sheet in a separate file
b. Use the <link> tag to point at the new style sheet file from your HTML file
c. Change the font colour and font size of a paragraph tag and the body tag
d. Add a comment (description that you can see but the browser ignores) to your style sheet
e. Properly indent a style rule
f. Write a style rule with the correct syntax (remembering to include parts such as the selector,
the curly braces, the colon, the semi-colon)
p {
color: lightblue;
font-size: 50px;
}
body {
color: green;
font-size: 8px;
}
5
Exercise 2 – Change the background, write your own style rule and use Google Fonts
1. Continuing with the same HTML file and style sheet file you used for Exercise 1 , let’s change the
background colour by updating the body rule as shown below (don’t forget to save the .css file and
reload the HTML file in the browser to check it):
2. Now the headings look a bit dark. See if you can figure out how to change a <h1> tag to be white
with a font size of 30 pixels by adding a new rule below the body rule (after the } brace) for a h1 tag
(Hint: do NOT put a space between 30 and px, it needs to be 30px;).
3. Next, we will use an image for the background. Remove the background-color rule. The image that
we will use is saved at http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/littleboy.jpg The way you
make it a background image is by adding the rule:
body {
background-image: url("http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/littleboy.jpg");
}
Update the body rule so that it looks like it does above, save your .css file, and then reload your
HTML file. Notice the image repeats, to remove the repetition add this rule to the body tag:
background-repeat: no-repeat;
4. Now our heading h1 is not very visible, to fix the heading you should pick a colour that can be read
over the white background.
5. Sometimes you may want to use newer and exciting fonts that exist on your computer, but
unfortunately these is no guarantee that the font is available on someone else’s computer. Google
developed Google Fonts to address this issue. Google Fonts provides online access to a wide variety
of fonts. To view available Google Fonts, visit https://www.google.com/fonts.
Next, we are going to try out the Google font called Tangerine:
http://www.google.com/fonts/specimen/Tangerine
6. First, we have to instruct our HTML file to look at Google fonts for more style sheets that describe the
new font. To do this, use Notepad to edit your HTML file. Add the line: <link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Tangerine"> just below the statement
p {
color: lightblue;
font-size: 20px;
}
body {
background-color: darkblue;
}
6
you added to include your myfirststylesheet.css file. So you HTML should now look like this:
7. Now go to your .css file and add the following rule to the body tag
font-family: 'Tangerine', serif;
Thus your .css file should look similar to this:
8. Save both the .css and HTML file and then reload your
HTML file in the browser again and observe the changes,
it should look similar to this:
Congratulations, you now can:
a. Change the background colour of a webpage
b. Use an image as the background of a webpage
c. Insert the fonts style sheet into your HTML file in
order to use Google Fonts
d. Apply the new font to the webpage by adding a
new font-family rule to the style sheet file.
p {
color: lightblue;
font-size: 20px;
}
body {
background-image: url("http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/littleboy.jpg");
background-repeat: no-repeat;
font-family: 'Tangerine', serif;
}
h1 {
color: darkblue;
font-size: 30px;
}
<body>
<h1>Oh, the Places You'll Go!</h1>
…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Dr. Suess Poem</title>
<link rel=“stylesheet” type=“text/css” href=“myfirststylesheet.css”>
<link rel=“stylesheet” type="text/css"
href="http://fonts.googleapis.com/css?family=Tangerine">
</head>
<body>
<h1>Oh, the Places You'll Go!</h1>
…
7
div#header {
background-color: aquamarine;
}
Exercise 3 – Layout your webpage using the Div tag
1. To layout your page into sections we will make use of the <DIV> tag. Going back to the cheesecake
recipe from last week: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex3a.html
If you were asked to break the recipe into sections or divisions, which sections would you identify?
You might include the following 4 sections/divisions:
a. The top part of the recipe which includes the heading, the introductory sentence, and the
picture of the cheesecake
b. The ingredients for the recipe,
c. The instructions for the recipe,
d. The author of the recipe, something like “Recipe by YOUR NAME“
2. Open and copy the source code for the cheesecake recipe webpage (use the link in step 1 above to
access the webpage) into Notepad and save the file in your lab2 folder as: youruseridlab2ex3a.html
3. Next, we will use the <div> tag to separate the recipe into sections or divisions and use the id
attribute with the tag to uniquely identify each division.
a. For the first section, immediately after the <body> tag but before the <h1> Cheesecake….
tag, add the following tag: <div id="header"> to indicate the start of a new division.
The id attribute can be given any value you like as long as it had no spaces between the
quotes and it is at least 1 character long). Here we use id="header", which identifies this
division as the header division. Right before the ingredients <h2> put the following tag to
indicate the end of this division: </div>
b. To indicate the Ingredients division, right before the <h2>Ingredie… tag but right after the
</div> tag you just added, add the following tag: <div id="ingred"> This specifies that
this is the start of the ingred division and put the </div> tag at the end of the list of
ingredients, AFTER the </ul> tag.
c. For the third section, put the <div id="instruct"> and the </div> tags around
the Instructions (try to figure out where to place those tags based on steps a and b above.
d. For the final section, add the following lines after the </div> you just added but before the
</body> tag:
<div id="footer">
<p>Recipe by YOUR NAME</p>
</div>
4. Save your file and reload it into a browser. Notice that at this point there is no change in the way it is
displayed.
5. In Notepad, add the required tags (remember to put this just after the <head> tag) to point the above
HTML file to an external style sheet called recipe.css
6. Open another blank Notepad window and save this empty file to your lab2 folder as recipe.css
In this exercise we are going to change
the styling of each section by adding
style rules to the recipe.css file like
this one:
8
<div id="section1">
<p>Paragraph 1</p>
</div>
<div id="section1">
<p>Paragraph 3</p>
</div>
<div id="section1">
<p>Paragraph 3</p>
</div>
<div id="sectiona">
<p>Paragraph 1</p>
</div>
<div id="sectionb">
<p>Paragraph 2</p>
</div>
<div id="sectionc">
<p>Paragraph 3</p>
</div>
div#header {
background-color: aquamarine;
}
div#ingred {
background-color: lightskyblue;
}
div#instruct {
background-color: lightseagreen;
}
div#ingred {
background-color: lightskyblue;
height: 500px;
width: 300px;
float: left;
}
div#instruct {
background-color: lightseagreen;
height: 500px;
width: 300px;
float: right;
}
7. Add the above style rule to the recipe.css file to change the background color for the header division.
Reload your page again in a browser and notice the background color of the header division of the
page.
8. The div#header says only do this background-color on the division indicated with the id called header.
The # in div#header indicates to look a division that has an id with the name header. NOTE: within
one HTML webpage, the id should always be unique, that is how we know which division we are
referring to, thus each id should have a unique name. Consider the two snippets of HTML below and
see if you figure out which one is valid:
9. Now add the following 2 rules to the
style sheet:
10. Try to figure out what you would add to
make the footer division have the background color of powderblue.
11. Now let’s move things around a bit. Change
the div#ingred style rule to the following:
12. Reload your webpage for the recipe and
notice that the ingredients have floated over
to the left and the division has the specified
width and height. Change the div#instruct
rule as depicted, save your file, and reload
your webpage. This is not quite what we
wanted. We want that footer to be below
the bottom of the ingredients and the
bottom of the instructions.
9
div#wholerecipe {
width: 600px;
}
div#header {
background-color: aquamarine;
text-align: center;
}
div#ingred {
background-color: lightskyblue;
height: 500px;
width: 300px;
float: left;
padding: 20px;
}
div#instruct {
background-color: lightseagreen;
height: 500px;
width: 300px;
float: left;
padding: 20px;
}
div#footer {
background-color: powderblue;
clear: both;
text-align: center;
}
div#wholerecipe {
width: 680px;
}
div#footer{
background-color: powderblue;
clear: both;
}
13. Now change the div#footer to this: (to clear both
the left floating item and the right floating item):
14. Reload the webpage. Hmmm, closer but not
quite perfect as it leaves a blank area in the
middle. Change the instructions to float to the left (tight up again the ingredients) rather than having
them float to the right. Save your recipe.css file and reload.
15. While this is better, the header and footer seem a bit too long unless our browser is the perfect size.
To address this issue, let us put a wrapper around the whole recipe to keep it to a standard width. To
do this, we will add one more <div> tag to the html file. Immediately below the <body> tag add the
following <div> tag: <div id="wholerecipe"> and just above the </body> add the
following tag: </div>
16. Now go into your recipe.css file and add the following rule:
17. Finally, add the last little bits to the recipe.css file to
clean the webpage up a bit (the bolded red lines
should be the new ones you need to add): Watch how
the padding declaration puts some space around the
content in each division. Each HTML element can be
considered a box that you can surround with padding
(or other divisors around your elements, see here for
more details)
Congratulations, you now can:
a. Use a <div> tag to separate your webpage
into divisions
b. Use an id attribute to identify a section of a
webpage
c. Use the hashtag to select an id to markup in
the style sheet file
d. Use style sheets to change the layout of your
page
e. Use the padding rule to put padding around
your text
10
p#myfav {
border:5px solid red;
}
span#turnblue {
color: cornflowerblue;
}
Exercise 4 – Using the ID and Class attributes to identify sections of your webpage
We can use the ID attribute and the class attribute (which will be introduced in this exercise) with various
tags. This ability is crucial and will play an important role when we start writing JavaScript code, so let us do a
little more practice with it.
1. Open the webpage: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex4a.html and look at the
song lyrics for the 2011 Adele song. We are going to use the ID attribute to highlight our favourite
verse in that song. Read over the song and decide which verse is your favourite.
2. Open the source and copy it into a blank Notepad window and save the HTML as
yourwesternuseridex4a.html in the lab2 folder. Find the <p> and </p> tags that are wrapped around
your favourite verse and change the <p> tag for that verse to
<p id="myfav">
3. Add the following line: <link rel="stylesheet" type="text/css" href="songlyrics.css">
somewhere within the <head> section of your HTML in order to point to a style sheet file.
4. In Notepad, open a new blank file, select File>Save As and save the blank file to your lab2 folder with
the file name: songlyrics.css
5. In the songlyrics.css file add the following:
6. Save the .css file, reload/refresh your HTML page in a browser and notice the line around your
favourite verse.
7. You can even use the ID attribute on particular words or phrases. For example, if you wanted to
make the lyrics “out of the blue“ to be the colour blue, you could use the <span> tag with the id
attribute. Find those words, then put this tag around them:
<span id="turnblue"> out of the blue </span>
NOTE: Usually you would use the <span> tag to identify or select some words within a line of text on
your page.
8. Now go back to your songlyrics.css file and add the
following:
9. Resave both files (html and css) and reload/refresh the
webpage and notice those words are now blue. If you ever want to add styling to a single line or
some word(s) on a line, use the <span> tag.
10. The ID attribute is ideal for uniquely identifying a section of the markup (i.e. if there is only ONE
element we wish to select) but what if there are groups of things we want to identify. For example,
in the Adele song, we might want to identify the chorus every time it appears. We could just put <p
id=“chorus1“> and then later on <p id=“chorus2“> and then write the same rule for chorus1,
chorus2, and …. But a faster way to do this is to use the class attribute. If we have a group of things
that we want to identify/markup, we can associate or link each element in the group with or to the
class attribute.
11
p.chorus {
background-color: black;
color: white;
}
11. Let’s make it so that the chorus for the song always has a black background with white font. The
chorus always starts with the line:
Never mind, ….
And it always ends with the line:
but sometimes it hurts instead.“
Go to your HTML file which contains the Adele song and find every <p> tag that surrounds a chorus
and change it to:
<p class="chorus">
12. To reference a class in a style sheet file, you put a period . before the class name. Similar to the id
name, the class name can be anything, as long as it is
surrounded by quotes and doesn’t have spaces. Now
go to your songlyrics.css page and add the following
style rule:
13. Save your HTML and css files and reload your HTML
page in a browser to make sure it worked.
Things to remember when using the class and id attributes:
With the class attribute, in the style sheet file, always put a period . before the class name
e.g. p.chorus
With the id attribute, in the style sheet file, always put a hashtag # before the id name e.g.
p#myfav
A unique id name should only be used ONCE in an HTML file.
A class name can be used more than once in an HTML file.
Congratulations, you now can:
a. Use the id attribute to uniquely identify an element and then use the id to mark up the
element
b. Use the <span> tag to select some text on your webpage.
c. Use the class attribute to identify one or more areas of your webpage and then use that class
attribute to mark up those areas.
12
Exercise 5 – More practice
1. Open this page: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex5a.html in your browser, do
View Source, and copy the HTML into a blank Notepad window. Save the file as
yourwesternuseridex5a.html in your lab2 folder.
2. Look at the HTML tags, notice we have put all the <div> and <span> tags in and the id and class
attribute tags. Open a new blank Notepad window and save it as sillyjokes.css
3. DO NOT CHANGE THE HTML FILE, but write the style sheet rules to make you page look similar to this
one below. Use different colours (pick your favourite colours:
https://www.w3schools.com/colors/colors_names.asp) but keep the layout similar to below.
Hint: if you float the 3 joke sections to the left, they should line up correctly.
Congratulations, you now can:
a. Style an HTML file created by another individual.
HAND THIS WORK INTO OWL IN ORDER TO GET YOUR LAB MARK.
1. Go into Owl and for Lab 2, submit the style sheet file you created for Exercise 5. It should be called
sillyjokes.css
