Css

420 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Css

  1. 1. CSS Cascading Style Sheets
  2. 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. 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. 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. 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
  6. 6. Syntax CSS
  7. 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. 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. 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. 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: <p class="right"> This paragraph will be right- aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
  11. 11. { Text color <html><head> <style type="text/css"> h1 {color: green} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> This is header 1 This is header 2 This is a paragraph
  12. 12. Inserting of style sheet CSS
  13. 13. {Cascading order 1. Browser default 2. External style sheet  inside external *.css file 3. Internal style sheet  inside the <head> tag 4. Inline style  inside an HTML element
  14. 14. {External Style Sheet  Each webpage must link to the style sheet using the <link> tag  Browser reads styles definitions from mystyle.css file <head> <link rel="stylesheet" type="text/css" href="mystyle.css" / > </head>
  15. 15. { Internal Style Sheet  Should be used when a single document has a unique style  Defined in the head section by using the <style> tag <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
  16. 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 <h3> tag? o color: red; o text-align: right; o font-size: 20pt
  17. 17. Examples CSS Properties & values
  18. 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
  19. 19. {Text:  color  direction  ltr rtl  word spacing  normal length  text-decoration  none underline overline line-through blink  text-align  left right center justify
  20. 20. {Font:  font-family • family-name generic-family  font-size  xx-small x-small small  /etc./  font-weigh  normal bold bolder lighter 100
  21. 21. {Dimension
  22. 22. {List: <head> <style type="text/css"> ul { list-style-image: url('arrow.gif') } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body>
  23. 23. CSS Variations, Limitations
  24. 24. {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
  25. 25. 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.
  26. 26. 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
  27. 27. Useful links  http://www.w3schools.com/css/  Learn CSS  http://validator.w3.org/  Check Your CSS syntax  http://www.csszengarden.com/  The beauty of CSS Design  One HTML file  210 CSS
  28. 28. http://www.csszengarden.com/
  29. 29. http://www.csszengarden.com/?cssfile=/209/209.css
  30. 30. http://www.csszengarden.com/?cssfile=/207/207.css
  31. 31. http://www.csszengarden.com/?cssfile=192/192.css
  32. 32. Zen Garden without formatting
  33. 33. Thank You for Your Attention CSS

×