1. Cascading Style Sheets (CSS) “Styles” for short. Pg. 418

2. Cascading Style Sheets (CSS) Used to control how your web pages look -- font styles & sizes, colors, backgrounds, alignments etc. CSS allows individual tags to be redefined.

3. CSS is used to: 1.Used to change the affect that a single tag has on text (in-line style). 2.Used to impose characteristics uniformly over an entire document (internal style). 3.Used to impose characteristics uniformly over an entire collection of documents (external style).

4. Both Netscape and Internet Explorer support CSS

5. Three types of CSS In-line Internal External

6. In-line Styles The style affects just a particular tag. The change from the in-line style is a local one.

7. Example of an in-line style Changed text The scope of the style covers the contents of that tag only. This text is back to normal

8. General layout of an in-line style text Note: 1.A property and its value are separated by a colon : 2.Each set of properties and their corresponding values are separated by a semicolon ;

9. Internal Style (Also known as Document Level Style Sheets or Embedded Style Sheets) A list of rules are placed within the head of the document. These styles affect all the same tags within that document. Using the internal style, the styles can only be applied to the web page in which they are contained. Exception: tags containing an in-line style attribute will override an internal style. –Benefit of an in-line style.

10. Example of an Internal Style Place the following within the HEAD tag <!-- H1 {color: red} --> As a result, all text enclosed within H1 tags will be in the color red. ( See CSS.htm )

11. Note: In-line Style overrides an Internal Style In-line override <!-- H1 {FONT-SIZE: 24pt} --> This uses 36 pt font. This uses 24 pt font.

12. 1.Purpose of the comments ( ) is to skip the contents in case a browser doesn’t handle styles. In such a case, the page will be rendered correctly just without including the styles. 2.text/CSS - type of styles you are including 3.CSS are all type text/CSS Note:

13. The tag on the left is the tag being modified. Enclosed in { } is a list of properties and their values. (See Internal_Styles.htm) General layout of an internal style <!-- TAG1 {property1: value1; property2: value2} TAG2 {property3: value3; property4: value4} TAG3 {property5: value5; property6: value6} -->

14. External Style Sheets These style sheets can be used in any web page. Helps create a consistent layout throughout an entire web presentation.

15. Example: Place the following: h1 {color: blue; font-style: italic} h2 {color: red; text-align: center} font {font-size: 200%; font-style: italic; color: green} in a separate file. Name the file and give it a.css extension. For example, name it styles.css

16. Within a web page include the following in the HEAD tag: <LINK REL=stylesheet TYPE="text/css" HREF="styles.css" TITLE="a name"> LINK -- creates a relationship between the two documents. REL -- tells the browser that the document in the HREF attribute is a stylesheet. TYPE -- tells the browser the type of style you are including. TITLE -- makes it available for later reference by the browser. See Styles.css & external_styles.htm

17. For examples of properties and some of their values, see CSS_PropertiesValues.doc

18. Multiple Selectors H1, H2, H3, H4, H5, H6 {text-align: center} All tags separated by commas are affected by the property.

19. Same As H1 {text-align: center} H2 {text-align: center} H3 {text-align: center} H4 {text-align: center} H5 {text-align: center} H6 {text-align: center}

20. Contextual Selectors OL LI {list-style: upper-roman} style applied to a LI within one OL tag OL OL LI {list-style: upper-alpha} style applied to a LI within two nested OL tags OL OL OL LI {list-style: decimal} style applied to a LI within three nested OL tags OL OL OL OL LI {list-style: lower-alpha} etc,

21. Contextual Selectors (cont) B I {color: red} style applied to an I tag nested within a B tag B I, B H1, H2 {color: blue} style applied to an I tag nested within a B tag style applied to an H1 tag nested within a B tag style applied to an H2 tag

22. Pseudo-Elements A:link {color: red} A:active {color: green} A:visited {color: blue} A:hover {color: purple} Note: no space between A:link, A:active etc.