Assignment #4: Cascading Style Sheets
Updated 4/30/2025 at 3:36pm
- This assignment will demonstrate:
- Using CSS style rules to format a Web page.
-
You will use an external stylesheet to make some formatting
changes to your main page, index.html.
-
Make a stylesheet file. You can name it just about anything that is a valid
filename, such as myStyles.css, as long as the file extension is .css.
Put some formatting rules (see below) into it
which will format the
paragraphs in your index.html page. (See assignment 1 for directions
regarding what should be in these paragraphs.)
-
Add a link tag to the <head> section in your index.html file, which
connects your index page to your external stylesheet.
-
Add id attributes to the paragraphs (<p> tags) in your index.html page. Make sure each of the
id attributes is unique.
-
Use id selectors in your stylesheet, corresponding to the id attributes in
the paragraph tags,
to apply formatting to the
paragraphs in your index.html file as specified below.
-
Using CSS rules in one id selector in the external stylesheet myStyles.css,
format your
first paragraph with these properties:
-
font-family: Arial, sans-serif;
-
font-size: 1em;
-
color: blue;
-
font-weight: bold;
-
Using CSS rules in a second id selector in the external stylesheet,
format your second
paragraph with these properties:
-
font-family: 'Comic Sans MS', sans-serif;
-
font-size: 2em;
-
color: green;
-
Using CSS rules in a third id selector in the external stylesheet,
format your third
paragraph with these properties:
-
font-family: Arial, sans-serif;
-
font-size: 1.4em;
-
color: gray;
-
Validate your index.html page with the W3C's
HTML Validator page.
I will also be validating your page, so this validation will be part of your
grade.
-
Validate your stylesheet page with the W3C's
CSS Validator page.
I will also be validating your page, so this validation will be part of your
grade.
-
Upload your modified index.html page and your stylesheet page to your Freehostia server's folder.
-
You can test your page on the class server by selecting the "Student Sites"
link on the class site and then clicking your name in the bulleted list.
Make sure you refresh/reload the page with F5 or <Ctrl>+F5 to get the new version of
your page!