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>
<P STYLE=""color: green"">
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
like this:
<style type=""text/css"">
p { color: green; }
</style>
applying css externally
Use this method. Always use this method.
works like this:
the perks
tradeoffs
Huh? Oh, there are none.
<link>
3 attributes
-
rel
-
type
-
href
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
here it is again:
what have we learned today?
don't write css inline
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 - index.html
- styles.css
- 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