Cascading
Style Sheets, Part 2
Now
that you've made the styles, where do you put them?
I
said earlier that there were three places that you could
put the code to your style:
- embed
the code
- link
it
- put
it inline
Linked:
- You
must put all your code in a separate file.
- Use
Notepad, SimpleText, or some other basic editor
(like you would were you coding HTML).
- Do
not use any HTML tags in this file.
- When
you save your file, give it any name you wish, but
you must give it a .CSS
extension.
- Put
the file in the same directory as the pages your
are going to link it to.
- Between
the <head> and
</head> tags,
type this code:
<link
rel="stylesheet" type="text/css"
href="name.css" title="style1">
- where
"name.css" is the name of the external
file
- don't
worry about the title attribute
Embedded
code:
<head>
<style
type="text/css">
<!--
|
p
{
}
|
font-family:
Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal
|
|
h1
{
}
|
font-family:
Verdana, Arial, Helvetica, sans-serif;
font-size: 24pt;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #000066
|
|
h2
{
}
|
font-family:
"Times New Roman", Times, serif;
font-size: 18pt;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #333333 |
-->
</style>
Inline:
You
can apply a style to individual elements quite easily.
An example:
<H1
style="color: blue; font-family: Arial; font-size:
18pt:>
However,
if you think about it, this kind of defeats the purpose
of style sheets since style sheets are supposed to help
you save time and not modify each individual element
on a page.
For
spot correction, inline styling does work well. Just
make sure it is absolutely necessary before you style
inline.
CSS
Links: