CSS

1. CSS Hadas Kahsay

2. Overview • What is CSS • Basic syntax of CSS Rules • How to link CSS style to html documents • Browsers and CSS • Advantages of CSS • Disadvantages of CSS • Conclusion

3. What is CSS • Stands for cascading Style Sheets (CSS) • It was developed by W3C in 1996 • New feature being added to html that allows web designers more control over how pages are displayed. • It is a simple styling language which allows attaching style to html elements • Allows designers create style sheets that define how different elements in html appear. • It is used to specify styles such as fonts, background colors, margins, etc. • The purpose of CSS is to separate style information from contents.

4. Basic syntax Rules of CSS • H1 {color: green} • CSS rules consists two parts -Selector - Declaration

5. Basic syntax Rules of CSS (cont) • Declaration also consists two parts -Property -Values

6. Basic syntax Rules of CSS (cont) • Setting Rule for Multiple html elements H1 {color: green} H2 {color: green} H3 {color: green} • Group elements together H1, H2, H3 {color: green}

7. Basic syntax Rules of CSS (cont) • Setting Rules for one element w/multiple rules H1 {color: blue} H1 {text-align: center} H1 {background: yellow}

8. Basic syntax Rules of CSS (cont) • Use the element once H1 { color: blue; text-align: center; background: yellow } Or H1 { color: blue; text-align: center; background: yellow }

9. Basic syntax Rules of CSS (cont) • Setting CSS rules using body element body { background: yellow; font-style: italic} P {font-family: Verdana; font-size: 12pt} H1,H2,H3{color:blue; background: white; text-align: center}

10. Basic syntax Rules of CSS (cont) • Background colors body {background: yellow; color: green} H1, p {background: white; color: blue} P B,UL {color: red}

11. Basic syntax Rules of CSS (cont) • Setting colors for links a: link {color: blue; text-decoration: none} a: visited {color: red} a: active {color: green} a: hover {color: yellow}

12. Linking CSS to html documents • There are several ways to link CSS to html documents -Inline linking -Internal linking -Linking to an external style sheets

13. Example of Inline linking

14. Inline linking result

15. Internal Linking • Apply using style elements

16. Result

17. Class attribute • Example of CSS Class attribute rules

18. Result

19. More example of class attribute • Example of border/List rules

20. Class attribute (cont)

21. Result

22. Linking to an external • Example of Linking to an external files

23. TestStyle.css

24. Result

25. Browsers and CSS • Most browsers support CSS for instance, Microsoft internet Explorer 4(IE4), Netscape navigator4(NS4) and Opera 3.5(O3.5) support CSS • Some browsers don’t support CSS for instance, Netscape’s Navigator 1 and Microsoft Internet Explorer 2 don’t support CSS style. The browsers that don’t support CSS just ignore the style but display the contents of the style on the screen which is not necessary.

26. Browser and CSS (cont)

27. Advantages of CSS • Web pages will load faster because of the reduced redundant coding from each page • Allows designers to change colors, fonts, etc. • Easier to update web site designs. • More control over your page • Structured contents in your web document and well organized • Allows shared style sheets across multiple documents • Reduced design/development time

28. Disadvantages of CSS • It is not understood by some of the browsers • It can mess up your pages if you don’t be careful

29. Conclusion • CSS improves the look and feel of your web page designs • Reduce coding time • I recommend it

30. Questions