Scribd
Upload
44 views

Practice - Exercise - 2 - Chap 4

This document provides instructions for a practice exercise in styling a webpage using CSS. Students are asked to: 1. Create and link an external CSS stylesheet to style an HTML page. Styles include centering content and applying colors and fonts. 2. Add additional styles like floating images, clearing floats, and inline styles. Styles are applied to elements like headings, images, and divs. 3. Properly format and indent the CSS with best practices. Students are also asked to validate their HTML and CSS. The goal is to recreate the styling of an example webpage.

Uploaded by

drashtipatel6888
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
44 views

Practice - Exercise - 2 - Chap 4

This document provides instructions for a practice exercise in styling a webpage using CSS. Students are asked to: 1. Create and link an external CSS stylesheet to style an HTML page. Styles include centering content and applying colors and fonts. 2. Add additional styles like floating images, clearing floats, and inline styles. Styles are applied to elements like headings, images, and divs. 3. Properly format and indent the CSS with best practices. Students are also asked to validate their HTML and CSS. The goal is to recreate the styling of an example webpage.

Uploaded by

drashtipatel6888
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Front End Web Development I CSD 1103

Practice Exercise 2
(Total Marks: 100%, 3%)

Part#1

Styling a Webpage Instructions:

In this exercise, you will use your text editor to create external, embedded, and inline styles for the
Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe
( header, nav, main, and footer ) and a div element that surrounds all of the content to center
the content on the page. You will also float an image to the left so that some of the content can fill the
empty space to the right of the image. Finally, you will clear the float and add margins and borders to
give your page a professional touch. The completed home page is shown in Figure 4–44. You will also
use professional web development practices to indent, space, comment, and validate your code.

Figure 4–44
Front End Web Development I CSD 1103

Perform the following tasks:

1. Open your text editor, and then open the apply04.html file from the Data Files for Students.
Use the File Save As feature to save the webpage in the chapter04\apply folder with the name
index04.html to create the home page.

2. Modify the comment at the top of the index.html page to include your name and today’s
date.

3. Start a new file in your text editor, and save it in the chapter04\apply folder with the name
styles04.css to create a style sheet.

4. Enter a CSS comment as the first line of the external style sheet with your name and
today’s your name and today’s your date. Recall that CSS comments are entered within /* and
*/ characters.

5. Style the body element with a uniform black text color and light-green background color:

body { color: #000000; background-color: #D9F1C1; }

6. In the head section of the index04.html file, enter an element to connect the page to the
external style sheet:

<link rel="stylesheet" href="styles04.css">

Save your changes. Open or refresh index04.html in a browser to make sure that the style
sheet is correctly connected to the HTML file.

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

7. Your next task is to center the content on the webpage. To do this, add <div> tags to
surround the content in the wireframe, and then apply a style to center the content within the
<div> tags as follows:

a. In index04.html, insert the <div id="outerwrapper"> opening tag just after the opening
<body> tag.

b. In index04.html, insert the </div> <!--close the outerwrapper--> closing tag and
comment just before the closing </body> tag.

c. In styles04.css, insert the following declarations to constrain the outerwrapper to 80% of


the width of the screen and to center the content within the

outerwrapper:
#outerwrapper { width: 80%;
margin: 0 auto 0 auto;
}

d. Save your changes to both files, and then open or refresh index04.html in a browser to
make sure that the content is centered within 80% of the browser window.

8. Apply common sans-serif fonts to the header, nav, and footer sections, and common serif
fonts to the div id="main" section by adding the following style to the external stylesheet:

header, nav, footer { font-family: Calibri, Arial, sans-serif;


}

#main { font-family: Garamond, "Times New Roman", serif;


}

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

(Hint (Hint ( : After each step, save index04.html and styles04.css and then refresh
index04.html in the browser to make sure that each style is applied successfully.)

9. Style the text in the footer section to be 0.75em and centered by adding the following styles
to the external stylesheet:

footer { font-size: 0.75em;


text-align: center;
}

10. Style the content within the div id="main" section to have a lighter background and 10px
of padding on all four sides by adding the following declarations to the existing #main
selector:

background-color: #F0F9E6;
padding: 10px;

11. Float the image to the left with the following style so that the existing Float the image to
the left with the following style so that the existing h1 and h2 content moves to the right of the
image:

img { float: left;


}

12. Clear the float for the nav section with the following style:

nav { clear: both;


}

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

13. Add a margin to the left of the h1 and h2 content in the nav section to insert white space
between the headings and the image. Given you want to apply the same rule to two specific
headings (but not other h1 and h2 content on the website), you will first give the tags the
same class attribute value and then apply the style to that class as follows:

a. In index04.html, insert class="addrightmargin" to the opening <img> tag in the header


section.

b. In styles04.css, insert the following style to increase the size of the right margin for content
tagged with class="addrightmargin"

.addrightmargin { margin-right: 2%;


}

14. In index04.html, insert an embedded style sheet just below the link tag in the head section
to apply a rounded border to the div id="main" section:

<style>
#main { border-radius: 2em; }
</style>

15. In index04.html, insert <span> and </span> tags around “Smoky quartz” and “Soulmate
Crystal” in the first list item in the unordered list in the div id="main" section. Use the
style attribute to give each opening <span> tag an inline style that bolds the font of the
content within the <span> tags as follows:

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

<span style="font-weight:bold;">"Smoky quartz"</span>


<span style="font-weight:bold;">"Soulmate Crystal"</span>

16. Validate your HTML document using the W3C validator at validator.w3.org and fix any
errors that are identified. Validation is complete when the validator returns the message “This
document was successfully checked as HTML5!” in a green bar near the top of the webpage.

17. Add indents, spaces, and extra lines to your external style sheet to make it as professional
and easy to read as possible. Employ these conventions:

• Put the selector and opening brace on the first line. Alternatively, put the selector,
opening brace, and first declaration on the first line.

• Add second and subsequent declarations on their own lines.

• Make sure that each property is separated from its value with a colon (:)

• Make sure that there are no spaces in values such as 10px or 20%.

• Make sure that each declaration ends with a semicolon (;)

• For each set of styles, position the closing brace on its own line

• Add a blank line before each new selector line.

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

18. Validate your CSS file using the W3C validator at http://jigsaw.w3.org/css-validator/ and
fix any errors that are identified. Validation is complete with the validator returns the message
“Congratulations! No Error Found.”

19. Submit the index04.html and styles04.css files in a format specified by your instructor.
Your instructor may also ask you to submit the wirewrap01.jpg file used with index04.html.

© LAMBTON COLLEGE IN TORONTO

Part#2

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

Figure 4-47

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

Instructions: Perform the following tasks:

1. Open cityfarmer04.html in your HTML editor from the Data Files for Students and then
modify the comment at the top of the page to include your name and today’s date. Make sure
the <title>…</title> tags contain the text City Farmer Home Page.

2. Start a new file in your text editor, and save it in the lab1\styles folder with the name
farmerstyles04.css

3. Enter a CSS comment as the first line of the external style sheet with your name and
today’s your name and today’s your date. Recall that CSS comments are entered within /*
and */ characters.

4. Enter a style to apply a uniform black text color, a uniform serif font, and light-blue
background color to the body:

body { color: #000000;


background-color: #B8D1EB;
font-family: "Times New Roman", serif;
}

5. In the head section of the cityfarmer04.html file, enter an element to connect the page to
the external style sheet:

<link rel="stylesheet" href="styles/farmerstyles04.css">

Save your changes, and then open or refresh cityfarmer04.html in a browser to make sure that
the style sheet is correctly connected to the HTML file. Note that in this exercise, the style
sheet is saved in the styles folder, so that path needs to be included in the href value.

6. Center the content by adding <div> and </div> tags to surround the content in the
wireframe, and then applying styles to center the content within the <div> and </div> tags as
follows:
© 2020 LAMBTON COLLEGE IN TORONTO
Front End Web Development I CSD 1103

a. In cityfarmer04.html, insert the <div id="outerwrapper"> opening tag just after the
opening <body> tag.

b. In cityfarmer04.html, insert the </div> <!-- close the outerwrapper--> closing tag and
comment just before the closing </body> tag. Save your changes to cityfarmer04.html.

c. In farmerstyles04.css, insert the following style to constrain the outerwrapper to 70% of the
width of the screen and to center the content within the outerwrapper:

#outerwrapper { width: 70%;


margin: 0 auto 0 auto;
}

Save your changes to farmerstyles04.css, and then open or refresh cityfarmer04.html in a


browser to make sure that the content is centered within 70% of the browser window.

7. Style the text in the footer section to have a font size of 0.75em and appear centered by
adding the following styles to the external stylesheet:

footer { font-size: 0.75em;


text-align: center;
}

(Hint : Save and refresh the cityfarmer04.html file in your browser after every step to observe
and study the impact of each style.)

8. Style the content within the div id="main" section to have a light-brown background and
10px of padding on the top by adding the following style:

#main { background-color: #C5A98B;


padding: 10px;
© 2020 LAMBTON COLLEGE IN TORONTO
Front End Web Development I CSD 1103

9. Float the image in the header to the left with the following style so that the <h1>, <h2>, and
<nav> content moves to the right of the image:

img { float: left;


}

10. Remove the bullets from the list items in the nav section by adding the following style:

ul { list-style-type: none;

11. Push the content away from the image by adding a right margin to the img selector with
the following declaration:

margin-right: 3%;

12. Clear the float so that the content for the div id="main" section starts on its own line by
adding a second style rule with a #main selector:

#main { clear: both;


}

13. You decide to float the second image right instead of left. Right now, your float rule is
written using the img selector so all img content is affected. To change the float value for the
second image, complete the following:

a. Add a Add a class="floatleft" attribute value pair to the first <img> tag (the logo) in the
cityfarmer04.html file. (Hint cityfarmer04.html file. (Hint cityfarmer04.html file. ( : The order
© 2020 LAMBTON COLLEGE IN TORONTO
Front End Web Development I CSD 1103

of attribute value pairs in the opening html tag do not affect how the code works in the
browser, but typically the most important attributes are listed first so the class="floatleft"
attribute would often be listed second or third.)

b. Add a Add a class="floatright" attribute value pair to the second <img> tag (tomatoes
in pots) in the cityfarmer04.html file.

c. In the farmerstyles04.css file, change the img selector to .floatleft

d. Just below the .floatleft style in the CSS file, add the following style to float the second
image to the right:

.floatright { float: right;


margin-left: 3%;
}

Save both files and then refresh cityfarmer04.html in your browser.

14. To make sure the footer also starts on its own line, modify the selector for the rule that
clears all float to include both the #main and footer areas as follows:

#main, footer { clear: both;


}

15. Validate your HTML code and fix any errors.

16. Validate your CSS code and fix any errors.

17. Save and open the cityfarmer04.html page within a browser as shown in Figure 4–47.

© 2020 LAMBTON COLLEGE IN TORONTO


Front End Web Development I CSD 1103

18. Submit your assignment in the format specified by your instructor.

© 2020 LAMBTON COLLEGE IN TORONTO

You might also like