CSS Notes

Cascading Style Sheets Notes

One way to put css into a page-- insert text between head\er tags.
Sample:

< STYLE TYPE="text/css" >
< !--
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
-->
</STYLE>


Two-- link to external style sheet using link in head tag.
Sample:
< HEAD>
< TITLE>My First Stylesheet</TITLE>
< LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
< /HEAD>
(With a linked stylesheet, you don't have to use comment tags.)
Make a separate style sheet with the variables shown in first sample and name it *.css >> then load it to the server just like an html file.
The third way -- importing style sheets and then embedding more tags into the style tag. See sample.
Sample:
< HEAD>
< TITLE>My First Stylesheet</TITLE>
< STYLE TYPE="text/css">
< !--
@import url(company.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>

Saying that the "company.css" file looked like the sample 2 sheet, you would realize that there are two attributes for H1. Which one gets recognized? The embedded one inside the HTML document.



Classes
The rules (either embedded in the HTML document or in an external stylesheets file) would look like this: 


P.first { color: green }
P.second { color: purple }
P.third { color: gray } 
And your HTML code would look like this: 

< P CLASS="first">The first paragraph, with a class name of "first."</P>
< P CLASS="second">The second paragraph, with a class name of "second."< /P>
< P CLASS="third">The third paragraph, with a class name of "third."< /P>

You can name classes anything you want, but make sure to use a period before the class name in the stylesheets rule.

You can also create classes that aren't attached to any HTML tag at all:
.first { color: green }

This approach is more flexible, because now we can use CLASS="first" with any HTML tag in the <BODY> of the page, and the text will be displayed in green.



Contextual Selectors

P B { color: red } 

< H1>&l tB>Emma Thompson</B>, Actress< /H1>
< P>Dramatic actor, inspired writer, down-to-earth comedienne. Is there < B>nothing</B> she can't do?< /P>

Comments Even with the clean code that's created with stylesheets, commenting your work is a good idea. Fortunately, comments are possible within stylesheets code and can be used on any line, like so: 

P.first { color: green } /* green for the first paragraph of every page */
H1 { text-indent: 10px; font-family: verdana }
IMG { margin-top: 100px } /* give all images a top margin */


END LESSON 1

Lesson 2
Hosted by www.Geocities.ws

1