INF 286
Assignment Week 2A
Last Name:
First Name:
Grade:
Comment:
Assignment 2A: Configuring Color and Text with CSS
Step 1 (15%)
Create a web page:
• That includes an unordered list describing at least three advantages of using CSS That is,
within the webpage itself have a list (unordered) that contains 3 advantages of using CSS
(3%).
• The text CSS Advantages should be contained within tags and precede the list
itself (2%).
• This page should include a hyperlink to the W3C Web site (2%);
• Write the HTML code so that one of the advantages is configured to be a class called
news (4%);
• Place an email link to yourself near the bottom of the Web page (2%);
• This web page should use the external style sheet called ex3.css (which will be defined
in step 3 below) (2%).
• Save the html page as advantage.html
Step 2 (15%)
Create a web page:
• That includes an unordered list describing at least three disadvantages of using CSS (hint:
you can search disadvantages of using CSS from online resources such as google) (3%).
• The text CSS Disadvantages should be contained within tags (2%).
• This page should include a hyperlink to the W3C Web site (2%);
• Write the HTML code so that one of the disadvantages is configured to be a class called
news (4%);
• Place an email link to yourself near the bottom of the Web page (2%);
• This web page should use the external style sheet called ex3.css (defined in the next step)
(2%)
• Save the page as disadvantage.html
Step 3 (20%)
Create an external style sheet (call it ex3.css) to format as follows:
• Document background color of white (3%);
• Document text color of #000099 (3%);
• Document family of Arial, Helvetica, or sans-serif (3%);
• Hyperlinks should have a background color of grey (#CCCCCC) (3%);
• elements should use the Times New Roman font with black text color (3%).
•
•
The news class should use red italic text (3%).
Save it as ex3.css (1%);
Step 4 (10%)
Launch a browser and display both web pages created in Steps 1 and 2. Both of them use the
formatting configured in ex3.css
• Paste the computer screen picture/capture at the end of this assignment WORD document.
(Hint: press shift+PrintScreen key to copy the screen) (5%);
• Note that I want to see images of both the advantage.html AND the disadvantage.html
pages.
Step 5 (20%)
Change the configuration of the external style sheet (ex3.css) created in Step 3 to format as
follows:
• Document background color of black (6%);
• Document text color of white (6%);
• text color of gray (#CCCCCC); (6%)
• Save the new CSS file as ex3_5.css (1%);
Step 6 (10%)
Change the two web page files, advantage.html and disadvantage.html, so that they both now use
the formatting configured in the ex3_5.css CSS.
• Save these two new files as advantage_6.html and disadvantage_6.html (5%);
• Display each of these two new Web pages in a Web browser, and paste the computer
screen picture/capture at the bottom of this assignment WORD document (5%) (Hint:
press shift+PrintScreen key to copy the screen).
Your source code should be carefully indented and validated using the markup validation service
offered by W3C at http://validator.w3.org and CSS Validation Service offered by W3C
http://jigsaw.w3.org/css-validator
Please remember to compress all your files (which includes this word document
(with your added screen captures), advantage.html, disadvantage.html,
ex3.css, ex3_5.css, advantage_6.html and disadvantage_6.html) into one zip
file and modify its name as
YourLastName_YourFirstName_Assignment2A.zip, and submit only the zip
file to the Blackboard for assignment 2A. (10%)
Web Development & Design
Foundations with HTML5
Chapter 3
Configuring Color and Text with CSS
1
Learning Outcomes
In this chapter, you will learn about:
Describe the evolution of style sheets from print media to the Web
List advantages of using Cascading Style Sheets
Use color on web pages
Create style sheets that configure common color and text
properties
Apply inline styles
Use embedded style sheets
Use external style sheets
Configure element, class, id, and contextual selectors
Utilize the “cascade” in CSS
Validate CSS
2
3.1 Overview of
Cascading Style Sheets (CSS)
Style Sheets - used for years in Desktop Publishing; apply typographical
styles and spacing to printed media
CSS
provides the functionality of style sheets (and much more) for web developers:
typographical styles (typeface, font size etc.), spacing instructions, page layout
control
a flexible, cross-platform, standards-based language developed by the W3C.
still not supported in the same way by browsers
See what is possible with CSS:
Visit http://www.csszengarden.com
3
3.1 Overview of Cascading Style Sheets (CSS)
CSS Advantages
Typography and page layout can be better controlled
features such as: font size, letter spacing, line spacing, indents,
margins, element positioning
Style is separate from structure
format of text & colors can be defined/stored separately from the body
section to which will be applied
Styles can be stored in a separate document and linked to from
the web page
for multiple pages of the web site that use the same style document,
style modification can be operated in one place and affect all pages
Potentially smaller documents
as formatting is separate from the document
Easier site maintenance
4
3.1 Overview of Cascading Style Sheets (CSS)
CSS Disadvantages
CSS technology is not yet uniformly supported by
browers.
This will be less of an issue in the future as browsers
comply with standards.
Others?
Search over the internet!
5
3.1 Overview of Cascading Style Sheets (CSS)
Types of Cascading Style Sheets
This is a red text header
Inline
Coded in body of Web page (like traditional formatting)
Use the “style” attribute of HTML tags
body {
background-color: #E6E6FA;
Apply only to specific
element
that contains attribute
color:
#191970;
}
Embedded
h1defined
{
background-color:
#191970;
Styles
in header
of Web page
color: #E6E6FA;
Apply to entire document - use the HTML element
}
h2 {
External
background-color: #AEAED4;
color:
Styles defined in separate
text#191970;
file, .css file extension
}
Can be applied to multiple documents - use the HTML element
rel="stylesheet" href="color.css" type="text/css">
Purchase answer to see full
attachment