1. CSS Cascading Style Sheets

2. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties 5. Limitations 6. CSS variations

3. {What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display (X)HTML elements  Styles are normally stored in Style Sheets  Multiple style definitions will cascade into one

4. {A Brief History of CSS  Style sheets have existed since the beginnings of SGML in the 1970s  As HTML grew, it came to encompass a wider variety of stylistic capabilities  Nine different style sheet languages were proposed to the W3C  Two were chosen as the foundation for CSS: CHSS and Stream-based Style Sheet Proposal  CSS level 1 – 1996; CSS level 2 – 1997  Difficulties with adoption

5. {Why to use Styles?  Documents written with CSS are  more flexible  short  clear  Basic formating tool  Easy multiple document managment  Save time by using selector classes  New opportunities in formating WebpageStructure(X)HTML Style- formatting CSS

6. Syntax CSS

7. { Basic Syntax  Made up of three parts: selector {property: value}  The selector is normally the HTML element/tag you wish to define  The property is the attribute you wish to change  Every property has the value

8. { Syntax  If the value is multiple words, put quotes around the value p {font-family: "sans serif"}  To make the style definitions more readable, you can describe one property on each line p { text-align: center; color: black; font-family: arial }

9. { Grouping h1,h2,h3,h4,h5,h6 { color: green }  All header elements will be displayed in green text color This is header h1 This is header h2 This is header h3 This is header h4

10. { The class Selector  With the class selector you can define different styles for the same type of HTML element. p.right {text-align: right} p.center {text-align: center}  Using the class argument in (X)HTML: This paragraph will be right- aligned. This paragraph will be center-aligned.

11. { Text color h1 {color: green} h2 {color: #dda0dd} p {color: rgb(0,0,255)} This is header 1 This is header 2 This is a paragraph This is header 1 This is header 2 This is a paragraph

12. Inserting of style sheet CSS

13. {Cascading order 1. Browser default 2. External style sheet  inside external *.css file 3. Internal style sheet  inside the tag 4. Inline style  inside an HTML element

14. {External Style Sheet  Each webpage must link to the style sheet using the tag  Browser reads styles definitions from mystyle.css file

15. { Internal Style Sheet  Should be used when a single document has a unique style  Defined in the head section by using the tag hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

16. { Multiple Style Sheets  An internal style sheet has following properties for the h3 selector: h3 { text-align: right; font-size: 20pt }  External style sheet has these: h3 { color: red; text-align: left; font-size: 8pt }  Your Web Browser has default formatting: h3 { color: black; font size: 10pt }  What will be the format of tag? o color: red; o text-align: right; o font-size: 20pt

17. Examples CSS Properties & values

18. { Background:  Control over the background color of an element  set an image as the background,  repeat a background image  background-color  color-rgb color-hex color-name  background-image  url(URL) none  background-repeat  repeat repeat-x repeat-y no-repeat

20. {Text:  color  direction  ltr rtl  word spacing  normal length  text-decoration  none underline overline line-through blink  text-align  left right center justify

22. {Font:  font-family family-name generic-family  font-size  xx-small x-small small  /etc./  font-weigh  normal bold bolder lighter 100

23. {Dimension

24. {List: ul { list-style-image: url('arrow.gif') } Coffee Tea Coca Cola

25. CSS Variations, Limitations

26. {CSS Limitations  Some noted disadvantages of using "pure" CSS include  Inconsistent browser support  Absence of expressions  Lack of Variables  Lack of multiple backgrounds per element  Control of Element Shapes

27. CSS level 1  The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:  Font properties such as typeface and emphasis  Color of text, backgrounds, and other elements  Text attributes such as spacing between words, letters, and lines of text  Alignment of text, images, tables and other elements  Margin, border, padding, and positioning for most elements  Unique identification and generic classification of groups of attributes  The W3C maintains the CSS1 Recommendation.

28. CSS level 2  published as a Recommendation in May 1998.  includes a number of new capabilities  absolute, relative, and fixed positioning of elements  the concept of media types  bidirectional text  new font properties such as shadows  The W3C maintains the CSS2 Recommendation.  CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2  returned to Candidate Recommendation status on 19 July 2007

29. Useful links  http://www.w3schools.com/css/ http://www.w3schools.com/css/  Learn CSS  http://validator.w3.org/ http://validator.w3.org/  Check Your CSS syntax  http://www.csszengarden.com/ http://www.csszengarden.com/  The beauty of CSS Design  One HTML file  210 CSS

30. http://www.csszengarden.com/

31. http://www.csszengarden.com/?cssfile=/209/209.css

32. http://www.csszengarden.com/?cssfile=/207/207.css

33. http://www.csszengarden.com/?cssfile=192/192.css

34. Zen Garden without formatting

35. Thank You for Your Attention CSS