Internal Style Sheets
We’re wrapping up our work with internal style sheets. Remember, with CSS you can create both internal and external style sheets. An internal style sheet controls the style and layout of just one page while an external style sheet controls the style and layout of multiple pages.
So far with CSS you’ve created an internal style sheet that can:
– Style text- font, size, and color
– Style headlines- font, size, and color
– Add an image as a background for your webpage
– Style links- color, underline, change colors when point mouse
– Create a page layout such as two columns, three columns, etc.
Bringing it All Together
You will work on a page that combines everything that you’ve learned so far. You will download the following files and make the following changes.
1. Download and save the following files to your computer and please keep the file names the same.
2. SAVE the files to your computer; do not open them. Once you have saved them to your computer you will need to move them into your folder. Go into My Documents, then Downloads, find the files, and copy them into your folder.
3. OPEN csspractice.html in both Notepad and Firefox.
4. Make the following changes to csspractice.html:
a. Pick a font group and make the appropriate changes in the body { } and td, p { } sections. Pick fonts from here:
http://www.fonttester.com/help/list_of_web_safe_fonts.html
b. Change the font size to 1.5em and make the appropriate changes in the body { } and td, p { } sections.
c. Choose a new font color and make the appropriate changes in the body { } and td, p { } sections. Pick your color from here:
http://www.w3schools.com/cssref/css_colornames.asp
d. Change your font-weight from normal to bold and make the appropriate changes in the body { } and td, p { } sections.
e. Change your <h1> color to orange
f. Create a link to the MHS website:
http://www.medfordpublicschools.org/schools/medford-high-school/
The link text should say “Medford High School”
g. Change the color from red to orange for what happens when you point your mouse on a link.
h. Remove the Halloween.jpg image as your background image and insert the candy.jpg image.
i. Make the candy image repeat.
j. In your left section remove the text that’s there and put “Left.” In the right section remove the text that’s there and put “Right.”
k. Change your largest headline to say your first name.
l. Change your smallest headline to say your last name.