Mediafire Account
1. Please sign up for a Mediafire account if you haven’t done so already. I will check to make sure everyone has done this before we get going.
CSS Class Work
2. CSS website for your reference with color values and color names. You will want to keep this site open while you work so you can easily look up the name or value of the color you want to use:
http://www.w3schools.com/cssref/css_colornames.asp
3. We are going to continue to work with your cssexample.html file. Please open it in Notepad and also in Firefox.
4. Last week we started creating internal stylesheets and you learned how to change the font, font size, and font color of headlines <h1> and paragraphs <p>. Today we’ll begin experimenting with links.
CSS can be used to make links stand out in different ways. You can make a link a different color, have it change color when you point your mouse on it, have it be underlined, etc.
Formatting Links with CSS
The four links states are:
a:link – a normal, unvisited link
a:visited – a link the user has visited
a:hover – a link when the user mouses over it
a:active – a link the moment it is clicked
They MUST be in that order if you’re going to use all of those attributes.
Please copy and paste the following code in your internal stylesheet just before the </style> tag:
a:link
{
text-decoration:none;
color:purple;
}
a:visited
{
text-decoration:none;
color:blue;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
text-decoration:underline;
color:green;
}
Now, please make a link to Google.com:
<a href=”http://www.google.com/”>This is a link to Google.com</a>
Notice how this link looks. Before you click on the link it should be purple. When you roll your mouse over it the link should be red and underlined. The moment you click on it the link should flash green and it should be underlined.
You can experiment with using different colors. Text-decoration can either be underline or none. If you don’t use text-decoration at all the default is none.
Styling Text with CSS
We talked about using serif or sans-serif fonts that are “web-safe,” meaning they will display the same way in every browser. This is what we will use for now although in CSS3 it will be possible to use whatever text you want as long as you use the right coding. We’ll review that soon. For now it’s easier to choose a known web-safe serif and sans-serif font for our practicing purposes.
You want to make sure you specify what font you want on your webpage. If you don’t the browser will likely just use the default Times New Roman 14 point font.
Specify the font and size with the following:
body{
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
}
td, p{
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
}
That code is basically saying anywhere on the webpage- in the <body>, in tables <td> and in paragraphs <p>, the font family and font size will always be the same.
You can choose whatever fonts you like from list, just copy and paste:
http://www.fonttester.com/help/list_of_web_safe_fonts.html
Basically you’re giving the browser first, second, and third choices to use for fonts in case the fonts aren’t available to display. Consistency is key with your website and you don’t want mismatched fonts.
Styling Headlines with CSS
You learned about the headline tags <h1> through <h6>, where <h1> is your largest headline and <h6> is your smallest. If you don’t specify what font to use and what size font, the browser will just use default settings for your headlines.
To style your headlines (remember 1em equals 16 point font)
h1 {font-size:4em;}
h2 {font-size:3.5em;}
h3 {font-size:3em;}
h4 {font-size:2.5em;}
h5 {font-size:2em;}
h6 {font-size:1.5em;}
Make it more interesting by choosing font-weight and text-decoration
h1 {font-size:4em;
font-weight:bold;
text-decoration:underline;
}
Text-decoration is important because the underline tag <u></u> won’t be supported in HTML5 so you must use CSS to code for underlining text.