For this assignment, you will create an external CSS style sheet and link it into the HTML page that you created in Assignment 1. Remember that you are continuing to build on the website you created during Week 1. After completing this assignment, you will create another zip archive containing your HTML file from last week (with the link tag added to it), the CSS file you will create in this assignment, and all image files that are part of your website.
Before proceeding with this assignment, make sure you have read the Week 2 module in the Content area, where the basics of CSS are explained to you. Note that although the Week 2 Content also briefly covers inline CSS and internal style sheets, this assignment only requires you to create an external style sheet. The other methods of incorporating CSS into your website are covered in the content for your information only and are not required to be used in this class.
Complete the following steps for this week’s assignment:
1) Open the HTML file that you created and add the following line of code to the head section of the file, replacing “mystyle.css” with the name you will be giving to your own CSS file, which should be in the form of LastFirstStylesheet.css (Ex.: John Smith’s style sheet would be named SmithJohnStylesheet.css).
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Save your HTML file and then upload it to the HTML validator and check to make sure it still passes .
2) Create a new file in your text editor (Notepad++ for PC users, and TextEdit for Mac users). Name your new file LastFirstStylesheet.css replacing Last with your last name and replacing First with your first name (Ex.: John Smith’s style sheet would be named SmithJohnStylesheet.css).
3) Copy the following text into your file:
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
Save your file and then upload it to the and make sure it passes validation.
Open your HTML file in the browser and see how it looks with this new stylesheet linked in. If you have properly created your CSS file and properly linked it into your HTML file, your webpage should now have a light blue background and your main <h1> heading should be dark blue and centered.
Open your CSS file in the text editor again to proceed with editing and writing more code.
4) Change the page background color to another color of your choice besides light blue and change the color of your main heading to another color of your choice besides dark blue. You can find additional color names . Save your CSS file, and re-validate your file . Also view your page in the browser to see the results of your changes.
5) In your CSS file, create a declaration block for the paragraph <p> element and set the font-family and font-size properties. You can choose the font family and font size that you want for your website. Hint: An example of these properties is shown in the Week 2 module in the Content area of the classroom.
6) In your CSS file, create a CSS class called “boldtext” which can only be applied to the <span> element. In the declaration block for this CSS class, set the font-weight to bold. Hint: An example of this class is shown in the Week 2 module in the Content area of the classroom.
7) In your CSS file, create a CSS class called “italictext” which can only be applied to the <span> element. In the declaration block for this CSS class, set the font-style to italic. Hint: An example of this class is shown in the Week 2 module in the Content area of the classroom.
Save your CSS file, and re-validate your CSS file .
8) Open your HTML file for editing. Using the <span> element with the class attribute, apply the “boldtext” and “italictext” classes that you created in your CSS file to a few words of text. Apply “boldtext” only to some text, apply “italictext” only to some other text, and apply both classes to yet some other text on your page. Note that “boldtext” should not be applied inside of headings because they are already formatted in bold text by default. Hint: An example of the HTML code you need for this is shown in the Week 2 module in the Content area of the classroom.
Save your HTML file, and re-validate your HTML file .
Validation Requirements:
Before submitting your web site:
- Validate your HTML file , using the “Validate by File Upload” option, and fix any errors that the validator identifies before submitting your web site for grading.
- Validate your CSS file , using the “Validate by File Upload” option, and fix any errors that the validator identifies before submitting your web site for grading.
Note: It is critical that you debug and fix ALL errors identified by these two code validators before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that your code files pass validation.
Submission Instructions: Create a zip file containing all files related to your web page (.html file, .css file, image files, etc). Make sure you maintain the necessary directory structure in your zip file so that your webpages will view correctly when unzipped. In other words, if your images are in a sub-folder on your computer, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip file, too. Submit only the zip file for grading.
