Unit 3. Tutorial 3- Sunny Acres
Tutorial 3
Sunny Acres
1.
Open the haunttext.htm, hometxt.htm, mazetxt.htm,
pettingtxt.htm and producetxt.htm in your student data
files from the Sunny Acres folder. In
the comment section in each file and add your name and the date in the space
provided. Save the files as haunted.htm, home.htm, maze.htm, petting.htm and produce.htm, respectively, in the same folder.
2.
Open the home.htm file and then click on the
links at the top of the page to view the current appearance of the haunted.htm, maze.htm, petting.htm and
produce.htm. Go back to the home.htm and we will apply a style rules sheet called sa_layout.css file to this file.
Just above the closing </head>
tag, insert the following style to link the external stylesheet:
<link href=
“sa_layout.css” rel= “stylesheet” type= “text/css” />
</head>
Save your changes and now
open the home.htm file to see the appearance of the web page with the external
stylesheet applied.
3.
We will now begin
to create our own external stylesheet to format the appearance of the text on
the Sunny Acres Web site. Open the sa_stylestxt.css from the student data
files from Sunny Acres folder. Save the
file as sa_styles.css.
4.
Open this sa_styles.css file and add the
following style comments at the top of the page:
/*
Sunny Acres Style Sheet
Author: Your name
Date: Your name
*/
Save the changes to your
file.
5.
Return to the home.htm file so we can link our new
stylesheet file to the web page. Just
below the sa_layout.css link, add
the following:
<link href=
“sa_styles.css” rel= “stylesheet” type= “text/css” />
Save the changes to the file.
6.
We are going to
change the text color and background colors for the body and <h2>
headings. Directly under the comments,
type the following style comments and styles:
/* Body styles */
body{
background-color: white;
}
/* Heading styles */
h2{
background-color: green;
color: white;
}
Save your changes. Go to the home.htm and open it to see your
changes.
7.
Next we will
format the <h1> headings. CSS
allows us to apply styles to select areas on our web page. We only want to change the h1 heading that is
inserted within the <section> element.
Return to the sa_styles.css
file. Directly above the style rule for h2 headings, insert the following style
rule:
section h1{
background-color: rgb(125, 186, 240);
color: white;
}
Note: Another way to apply your color choice is by
writing a color value instead of the name.
In the h1 above, we inserted a sky blue instead of just blue. It is a matter of personal preference… both
will work. There are color charts
on-line to choose colors that can be used for web use.
Save your changes. Go back to the home.htm and open it to see your changes.
8.
Another way to
select a particular area on a web page is using the #id selector or the .class
selector. In the home.htm file, a class has been added to the last paragraph within
the <section> element that introduces the web site. The class name
“closing” is called the attribute This
is how it is written:
<p class= “closing”>We
all hope to see you soon, down on the farm. </p>
We want to format this
paragraph so that it appears in green and is aligned on the right side. Go to the sa_styles.css file and add the following style:
section p.closing{
color: rgb(0, 165, 0);
text-align: right;
}
Save your changes. Go back to the home.htm file and open it to see your changes.
9.
Changing the font
can make a web page easier to read. All
fonts, however, do not work on all operating systems. Some of the fonts that work on most browsers
are Arial, Arial Black, Century Gothic, Comic Sans MS, Times New Roman and
sans-serif. We are going to add 3 fonts
to our web page, however, depending on the browser used, it will decide on the
font it uses.
Go to the sa_styles.css file. You already have a style rule for the body so
just add the following style rule under the background-color style to apply
this font:
body{
background-color: white;
font-family: Verdana, Geneva
}
Save the changes. Go back to
the home.htm file and open it to see
your changes.
10.
The size of the
font can also be controlled with a style.
We are going to change the font size for the h1 heading in the section
element. Again, we have already written
a style for this heading so all we have to do is add the following to the
section h1 on the sa_styles.css file:
section h1{
background-color: rgb(125, 186, 240);
color: white;
font-size: 1.7em;
}
Note: The em unit expresses the size relative to
the font size of the rest of the font on the body. In the above style, the font size will be 1.7
times bigger than the rest of the font in the section. Of course, you could just use a measurement
like 16px as well.
Save your changes. Go back to the home.htm file and open it to see your changes.
11.
If the text looks too crowded, a style can be
applied to control the space between the letters, called kerning, and the amount of space between words, called tracking. We are going to add another style to the
section h1 to style the kerning, as well as indent the text to move the text to
the left by adding the following on the sa_styles.css
file:
section h1{
background-color: rgb(125, 186, 240);
color: white;
font-size: 1.7em;
letter-spacing: 0.4em;
text-indent: 1em;
}
Add the same two styles to
the h2 heading:
h2{
background-color: green;
color: white;
letter-spacing: 0.4em;
text-indent: 1em;
}
Save your changes. Go back to the home.htm file and open it to see your changes.
12.
Go back to the sa_styles.css file. The footer contains
an address and needs to be formatted with CSS styles. To change the style of the address element
nested within the footer element, add the following style rules:
/* Footer styles */
footer address{
background-color: rgb(55,
102, 55);
color: white;
font-family: “Times New
Roman”, Times, serif;
text-align: center;
}
Note: When a font name has more than one word to
it, you must put “” marks around it
for the browser to read it correctly!
13.
The navigation
links are in an unordered list set on the left side of the page. Browsers display the list contents with
bullet markers. We are going to remove
these bullet markers using the list-style-type
CSS style. The style type choices
are: disc,
circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman,
lower-alpha, upper-alpha,
lower-greek, upper-greek or none. To remove the bullet markers, go to the sa_styles.css file and add the
following:
/* Navigation list styles */
nav ul{
list-style-type: none;
}
14.
We also want to
add some padding or space to the left side of the navigation list, so add the
following, directly under the list-style-type,
nav ul{
list-style-type: none;
padding-left: 0.5em;
}
Save your changes. Go back to the home.htm file and open it to see your changes.
15.
We are still
going to add more styles to the navigation list to make it look more appealing
on the web page. Let’s change the
background color to sky blue and increase the space between the items by
increasing the line-height. Go to the sa_styles.css file and add the following styles to the nav ul.
nav ul{
list-style-type: none;
padding-left: 0.5em;
background-color: rgb(125, 186, 240);
line-height: 3.5em;
}
16.
The navigation
list links could be styled too. We will
change the font of these list item links to white and remove the underlining. Go back to the sa_styles.css file and add the following style rule:
nav ul li a{
color: white;
text-decoration: none;
}
Save your changes. Go back to the home.htm file and open it to see your changes.
17. Another fun style that we will apply, changes
the text color of the list item links to medium blue when the user hovers the
mouse pointer over the link. Go back to
the sa_styles.css file and add the
following style rule:
nav ul li:hover{
background-color: rgb(83,
142, 213);
}
Save your changes. Go back to the home.htm file and open it to see your changes.
18.
The last step is to apply the style sheets to the other pages. We will also add a style to change the
background-color for the h1 headings on each of these other pages.
Go
to the maze.htm and add the following
link elements and embedded style
directly above the closing
</head> tag:
<link href=
“sa_layout.css” rel= “stylesheet” type= “text/css” />
<link href=
“sa_styles.css” rel= “stylesheet” type= “text/css” />
<style type= “text/css”>
section h1{
background-color: rgb(191,
141, 101);
}
</style>
Save your changes.
Go to the haunted.htm and add the following link
elements and embedded style directly above the closing </head> tag:
<link href=
"sa_layout.css" rel= "stylesheet" type=
"text/css"/>
<link href=
"sa_styles.css" rel= "stylesheet" type=
"text/css"/>
<style type="text/css" >
section h1{
background-color: rgb(0, 0, 0);
}
</style>
Save your changes.
Go to the petting.htm and add the following link
elements and embedded style directly above the closing </head> tag:
<link href=
“sa_layout.css” rel= “stylesheet” type= “text/css” />
<link href=
“sa_styles.css” rel= “stylesheet” type= “text/css” />
<style type=
“text/css”>
section h1{
background-color: rgb(133, 109,
85);
}
</style>
Save your changes.
Go to the produce.htm and add the following link
elements and embedded style directly above the closing </head> tag:
<link href=
“sa_layout.css” rel= “stylesheet” type= “text/css” />
<link href= “sa_styles.css”
rel= “stylesheet” type= “text/css” />
<style type=
“text/css”>
section h1{
background-color: rgb(50, 69,
99);
}
</style>
Save your changes.
19. Reopen the home.htm file in your web browser and
navigate through the pages of the web site.
Verify that the layout and color scheme have been applied to every
sample page.
great huge help.. thanks
ReplyDelete