CSS- Cascading Style Sheet
HTML and CSS work hand in hand to tell a web browser (Firefox, Internet Explorer, etc.) how your webpage should look. HTML mainly controls where your content goes on the page and how it’s organized while CSS mainly controls how it looks (colors, fonts, etc.)
Web-safe fonts and colors
Right now you will learn about web-safe fonts and colors even though in CSS3, the latest version of CSS, you don’t have to worry about web-safe fonts if you use the right coding. Web-safe fonts and colors are fonts and colors that will always display the same way in all web browsers. If you intend for your website to have a particular font and color it will always appear that way in each browser.
Basically, fonts can either be serif or sans-serif. Serif fonts, like Times New Roman, look good printed out on paper, while sans-serif fonts, like Arial, look better on a computer screen (i.e. webpage). Check out some web-safe fonts here (both serif and sans-serif).
This website has a great web-safe color chart. Notice the different color names. Those are called hex values and that is how you will usually identify colors using CSS: http://andrew.hedges.name/web_safe.html
There are also color names that are recognized and the W3 Schools website has a good list: http://www.w3schools.com/cssref/css_colornames.asp
Internal and External Style sheets
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. Remember, we use a mini internal style sheet to style the tables we practiced with last week.
A Helpful Guide
HTMLdog.com is a great resource- here is their CSS page.
Let’s try an internal style sheet first
Copy and paste the following into a new, blank Notepad file:
<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
<style type=”text/css”>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:”Times New Roman”;
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Save the file as cssexample.html in your folder.
Open the file in Firefox so you can see how it looks.
Try some changes:
Change font-family from Times New Roman to Arial
Change font-size from 20 to 30
Change to background color to a color from here:
http://andrew.hedges.name/web_safe.html
Change the h1 color to a color from here:
http://www.w3schools.com/cssref/css_colornames.asp
Replace the original h1 code with the following:
h1
{
color:blue;
font-family: “Arial”;
font-size:2em;
font-weight:bold;
text-decoration:underline;
}
What are the differences that you see?
em is another way to size font rather than using pixels (px). The default size for 1em is 16 point font unless you specify otherwise in your style sheet. So, for example, 2em would be 32 point font, etc. You can have any value- 0.5em, 1.5em, whatever you like.
Using em for font size is preferable to using pixels because it ensures the font will show correctly in all browsers and will allow all browsers to resize the font if the user desires to do so. This is the best way for sizing font.
Copy and paste the following code in your Notepad file in place of your <h1> and <p> but keep the rest of the code:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
All together it should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
<style type=”text/css”>
body
{
background-color:#d0e4fe;
}
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>