applying css
a.k.a. Getting it on the page
3 ways
- In-line
- Internally
- Externally
applying css
in-line
Worst way to get CSS on the page
<tag (style goes here)>
content
</tag>
css as attribute
Applied via 'Style' attribute
<p style=""STYLES go here"">
text being styled
</p>
<P STYLE=""color: green"">
check me out. I'm all green 'n stuff.
</P>
style=""property: value""
One declaration
style=
""property: value;
property: value;
property: value;""
Several declarations
applying css internally
Also a very bad way to get CSS on the page
place
<style></style>
in <head> of document
<style type=""text/css"">
p { color: green; }
</style>
applying css externally
Use this method. Always use this method.
tradeoffs
Huh? Oh, there are none.
rel
The linked file's RELationship to this document
type
Type (or format) of linked file
href
You should know this by now
REL
Stylesheet
TYPE
text/css
HREF
css/style.css
what have we learned today?
don't write css internally
link to an external css file
link to it from within the
<head> of your html document
save time, money
and headaches
exercise
- Create a folder called 'root'
- Open your text editor
- Create two new files and save them
inside your new 'root' folder
- Add at least one style declaration
to styles.css
- Link to your CSS file in the <head>
of your HTML document
- Make sure it worked
applying css a.k.a. Getting it on the page
