HTML/CSS Tutorials -
Part 2
Author: Derek Duban of www.upwithabang.com
for how-to docs on web development and free plug-in services for your site.
How to specify a
style sheet
There are 3 places to put style information. You can choose any place or all of them:
- In the style attribute of an HTML element:
<strong style='color: red;'> Using the style attribute</strong> - In the head section of an HTML document:
<html>
<head>
<title>Style element in head element</title> - <style type="text/css">
p {
font-size: 10px;
color: blue;
}
strong {
font-weight: bold;
font-size: 12pxt;
}
em {
font-decoration: underline;
color: red;
}
</style>
</head> - In an external file that is referenced by an HTML document:
<html>
<head> <LINK href="css1.css" rel="stylesheet" type="text/css"> </head>
In the example above the 'href' attribute specifies a style sheet file called "css1.css".
Cascading Style
Sheets
You've probably heard the name "Cascading Style Sheets". What does the "Cascading" part mean? It means that you can override style settings the closer you get to the element it describes.
- "style1.css" defines "strong { color: black; }"
- <head>
- <style>strong { color: green; }</style>
- </head> will override black set in the external style sheet "style1.css"
- <strong style='color: blue'> defines blue text, thereby overriding green as last added always wins.
