1. Cascading Style Sheets (CSS) Why do we need them? Separate structure from browser presentation There are many HTML presentation attributes –We want to eliminate the need for these attributes –We want the HTML tags to focus on document structure –We want to standardize HTML specifications Define an entire site’s look and feel in one file –Maintenance is much easier –One change can apply to the whole site –Achieve consistency across the web site Tag related instructions to browsers

2. Types of Cascading Style Sheets In-line level –Apply to content (e.g. content ) of a single tag –How To: use the style attribute in any tag Document level –Apply to an entire web page –How To: Insert a style tag into the head section External level –Apply to a group of web-pages –How To: Use the link tag to reference a style sheet file Note: In-line styles override document and external styles; document styles override external styles. Hence they cascade.

3. Style Sheet Syntax Inline: Document Level (The tag must be in section) <!– comment so non CSS browsers will ignore tag { styletype:value; … styletype:value;} tag.stylename {styletype:value; … styletype:value;}.stylename {styletype:value; … styletype:value;} --> External Level (document level syntax without the tag) Examples will follow on subsequent slides

4. In-line CSS Example This paragraph is uppercase and red. Style types used in this example –text-transform has a value of uppercase –color has a value of red Syntax –Style Type : style value –Separate style specifications using semicolons. –Enclose the style attribute value in quotes. These apply to the content of a single tag

5. Document Level CSS Example Insert style tag into the head section p {font-size:20pt; font-family: "courier"; text-align:center; font-weight:bold; } Paragraph tags now use the style specifications font size 20 in courier center this paragraph and display bolded

6. Font Families Separate a series of fonts with commas p {font-family: Lucida, Arial;} Which font will browsers use? –The first one that it knows about –A default if none in the list exists Default families that all browsers recognize –Monospace: all letters have the same width –Others: serif, sans-serif, cursive, or fantasy

7. HTML Colors Color:#A06033; (A0 red, 60 green, 33 blue) –Value range: ‘00’ to ‘ff’; smaller values are darker Specify colors with hexadecimal (hex) numbers –Hex numbers digits range from 0 to f, not 0 to 9 –A=10, B=11, C=12, D=13, E=14, F=15 –Examples: F9 = 15*16 + 9, 37 = 3*16 + 7 There are web color palettes on the web –Web safe colors look the same on all monitors –Useful so hex codes don’t need to be memorized

8. Built In HTML Colors ColorNumber Black#000000 Gray#808080 Silver#C0C0C0 White#FFFFFF Red#FF0000 Maroon#800000 Magenta#FF00FF Purple#800080 ColorNumber Blue#0000FF Navy#000080 Aqua#00FFFF Teal#008080 Green#008000 Olive#808000 Lime#00FF00 Yellow#FFFF00

9. Example with Colors Style tag in the head section h2 {color:red;} h3 {color:#d61130;} Utilize the specifications in the HTML body red text darker red

10. Example with Fonts Style Tag in head section p {font-style:italic; font-weight:500; font-variant:small-caps; font-size:14pt; line-height:24pt; font-family:Lucida, Arial; } Shorter way to write the same thing p {font: italic 500 small-caps 14pt/24pt Lucida, Arial; }

11. Other Style Sheet Syntax Style Sheet SpecificationApplies To h1,h2,h3 {font-size:large;}h1, h2, and h3 tags h1#large {font-size:30pt;} #notLarge{font-size:20pt;}Any tag with id="notLarge" a:visited{color:red;}Hyperlink already visited a:link {color: #FF0000;}Unvisited hyperlink a:active {color: #0000FF;}Selected hyperlink a:hover {color: #FF00FF;}Mouse over a hyperlink

12. Some CSS Styles and Values TypeValue font-familyVerdana, Arial, Serif, "Times New Roman" font-sizexx-small, x-small, small, medium, large, x-large, xx- large larger, smaller, 10px, 20pt, 0.5in font-stylenormal, italic, oblique font-weightnormal, bold, bolder, lighter, 100, 300 font-variantsmall-caps, none text-indent10%, 20cm, 15pt,.5in text-decorationunderline, overline, line-through, blink, none text-transformuppercase, lowercase, capitalize, none text-alignleft, right, center justified Reference: http://www.htmlhelp.com/reference/css/properties.htmlhttp://www.htmlhelp.com/reference/css/properties.html

13. More CSS Styles and Values TypeValue word-spacing3pt,1cm,.25in letter-spacing3pt, 1cm,.25in margin-top12pt, 2.5cm, 1in margin-bottom12pt, 2.5cm, 1in margin-left12pt, 2.5cm, 1in margin-right12pt, 2.5cm, 1in colorred, #FF0000 background-colorred, #FF0000 background-imageurl(picture.gif`) background-attachmentscroll, fixed Reference: http://www.htmlhelp.com/reference/css/properties.htmlhttp://www.htmlhelp.com/reference/css/properties.html

14. CSS Classes Style Sheet h1 {font-size:xx-large;} h1.small {font-size:xx-small;}.allTags {font-size:large;} Usage Displays xx-large Displays be xx-small l Any tag can be large

15. The and tags These tags exist because of CSS –Generic tags that CSS can customize –We can make tags to our own specifications –Eliminate the need for browsers to define new tags tag –Block tag that applies to sections of a document –Example: Displays Red tag –Inline tag that applies to text in a document section –Example: Use doIt style

16. External Style Sheets Create a text file (Name it with a css extension) Type in the style sheet specifications –Don’t include the style tag –Don’t include HTML comments –CSS comments: /* This is a CSS-comment */ Use link tag in HTML document headers An HTML document can have –More than one link tag –Can have both external and document specifications

17. More HTML and CSS Help Lots of examples: http://www.w3schools.com/css/css_examples.asp http://www.w3schools.com/css/css_examples.asp Documentation –Site for web specification http://www.w3schools.com/css/ http://www.w3schools.com/css/ –Site for tutorials and lots of help http://www.htmlhelp.com http://www.htmlhelp.com

18. Some Review Questions What is a Monospace font? Give an example? What is the advantage of using the font property? How do you use the id attribute with style sheets? How do you change the color of a hyperlink that was already visited? What are differences between inline, document level, and external style sheets? What is a css class? When would you use the and tags? What is a font family?