assignment: styles 1
Pages: withstyles.html
Objective: You will be able to add page styles and inline styles to a page using a text editor.
The assignment
Make a copy of "aboutme.html". Save it as "withstyles.html". If you added color or fonts take them out - we're using a particular way of doing that here. In the head part of the document, somewhere between <head> and </head>, put the following:
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #990099;
background-color: #99CC00;
}
</style>
What this does is to change the "body" tag. Styles is like a little language of its own, different from HTML. There are books and websites devoted to CSS.
http://www.w3schools.com/css/css_reference.asp
Change at least 3 tags on your page - easy ones to change are: <body>(as shown), <a> (change the color or font of links), <h1> or <h2> etc, (change the style or centering of headers).
Part 2. Inline CSS
You can make a style an "in line" style, meaning it will only apply to ONE use of a tag. Add the following line near the bottom of your page:
<p style="background: blue; color: white;">This page made with CSS: Cascading Style Sheets </p>
Look at the page. Alter two more tags to give them inline styles. If a tag has a "whole page" style and a "single tag" style, which one wins? If you can't tell, give the <p> tag a whole page style and then look at the one you just did - which style is it?
Make sure your "withstyles.html" page is saved in your online folder. That folder should have 3 pages now, plus images.
To Do More: Look up how to use the a:hover style to make your links rollover links, like the ones on this page.