1. Cascading Style Sheet CSS CS1520 Ali Alanjawi

2. 2 TA Information Ali Alanjawi Homepage: www.cs.pitt.edu/~alanjawi Email : alanjawi@cs.pitt.edu Office: 5404 Sennott Sq. Tel: x4 1185 Office Hours: M/W: 3-5

3. 3 Style sheets types Types: inline, document, external inline: within a tag ex: document: within the header of a document. ex: example... selector {prop:value;....}....

4. 4 external: as a separate file for more than one document. ex: the header must contain a link to the style file.. the style file can contain lists of styles..

5. 5 Selector it can be as a named element.. h1 {color:red;} nested named elements b i {font-size=20pt;} or as a class.. p.red {color=red;} p.big {font-size=20pt;}......... * by omitting the element it can be general for any element..

6. 6 or by using the id.. #midline4 {font-size:12pt;}........

7. 7 font set the font properties: font-family: Arial font-size: 10pt font-style: italic font-weight: bold font: bold 14pt Arial courier text-decoration: line-through, overline, underline or none.

8. 8 list change the list style. (disc/square/circle) or even put an image instead. ex: ul {list-style-type: square} ul ul {list-style-image: url(im2.gif);} ol {list-style-type: upper-roman;} ol ol {list-style-type: upper-alpha;}

9. 9 color set the color of an element. use named color "red or blue.." or #hex-number of a color or rgb(255,244,213). ex: p.color1 {color: #00ffff; background-color: red;}.. this is an aqua colored text on a red background.

10. 10 Background-image set an image as a background for an element ex: body {background-image: url(image1.jpeg); background-repeat:repeat-y;}

11. 11 text alignment set by text indent and align e.g. text-indent:.75in; text-align= right float is used for images and tables to set the text floating around them.. ex: img {float:right}...

12. 12 border set a border style for an element.. ex: p.b12 {border-style:double; bordercolor:blue;}.......

13. 13 Span Span: set style for a part of a paragraph.. e.g. a word. ex: p.sp1 {font-size:24pt;}... This is a Big word

14. 14 Div Div : set a style for a part of a document, more than one paragraph.. Ex: …. …

15. 15 Example of a style file A:visited { color : #00008b; } A:link { color : #00008b; } A:hover { background : #FFFF00;} A.nohover:hover { background : #FFFFFF;} b {font-weight: bold}.banner-top { font-family: arial, verdana, helvetica, sans-serif; font-size: 14px;}.banner-main { font-family: arial, verdana, helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000066;}.highlight { font-family: arial, verdana, helvetica, sans-serif; font-size: 18px; color: #000066; background: #FFFF00;}.heading { font-family: arial, verdana, helvetica, sans-serif; font-size: 22px; color: #000066; font-weight: bold;}.menu { font-family: arial, verdana, helvetica, sans-serif; font-size: 16px;}.ltext { font-family: arial, verdana, helvetica, sans-serif; font-size: 16px;}.lbtext { font-family: arial, verdana, helvetica, sans-serif; font-size: 16px; font-weight: bold;}.text { font-family: arial, verdana, helvetica, sans-serif; font-size: 14px;}