1. Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain

2. Learning Outcomes In this chapter, you will learn about: ◦ Formatting with CSS- A way to style HTML

3. CSS selectors, properties and values body { font-size: 0.8em; color: navy; } em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size. px (such as font-size: 12px) is the unit for pixels. pt (such as font-size: 12pt) is the unit for points. % (such as font-size: 80%) is the unit for... wait for it... percentages.

4. CSS Embedding Style Inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute. E.g., text

5. CSS Embedding Style Embedded style, blocks of CSS information inside the HTML itself, e.g. p { color: red; } a { color: blue; }

6. CSS Embedding Style External style sheets, i.e., a separate CSS file referenced from the document, e.g. web.css=> p { color: red; } a { color: blue; } Linking=>

7. CSS examples - syntax p { color:red; text-align:center; } Hello World! This paragraph is styled with CSS.

8. CSS examples – id selector #para1 { text-align:center; color:red; } Hello World! This paragraph is not affected by the style.

9. CSS examples – background color body { background-color:#b0c4de; } My CSS web page! Hello world! This is a W3Schools.com example.

10. CSS examples – color h1 {background-color:#6495ed; } p {background-color:#e0ffff;} div {background-color:#b0c4de;} CSS background-color example! This is a text inside a div element. This paragraph has it's own background color. We are still in the div element.

11. CSS examples – background image body { background-image:url('gradient2.png'); background-repeat:repeat-x; } Hello World! Note: The image is repeated only horizontally (repeat-x),

12. CSS examples – background image/no-repeat body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; } Hello World! W3Schools background no-repeat, …. Now the background image is only... In this example we have right margin….

13. CSS examples – padding p { background-color:yellow; } p.padding { padding:25px 50px; } This is a paragraph with no specified padding. This is a paragraph with specified paddings. padding:25px 50px; - top and bottom paddings are 25px - right and left paddings are 50px

14. CSS examples – no style

15. CSS examples – style associated

16. CSS examples – external style file body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }

17. CSS examples – external style (cont..) h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted }

18. CSS examples – external CSS file linking to html My first styled page …

19. CSS examples – body content Home page Musings My town Links My first styled page Welcome to my styled page! It lacks images, but at least it has style. And it has links, even if they don't go anywhere… There should be more here, but I don't know what yet. Made 5 April 2004 by myself.

20. CSS Authoring Tool  Simple CSS: http://www.hostm.com/simplecss- download.m  OIKO CSS Editor: http://css-editor.info/

21. CSS tutorial  http://www.w3schools.com/css/default.asp  http://www.w3.org/Style/Examples/011/firstcss  http://www.w3.org/MarkUp/Guide/Style