1 / 35


CSS. Cascading Style Sheets. Contents {. What is CSS? A Brief History of CSS Why to use Styles? Syntax Cascading Order Examples of Properties L imitations CSS variations. {What is CSS? . CSS stands for C ascading S tyle S heets Styles define how to display (X) HTML elements

Télécharger la présentation


An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. CSS Cascading Style Sheets

  2. Contents{ • What is CSS? • A Brief History of CSS • Why to use Styles? • Syntax • Cascading Order • Examples of Properties • Limitations • 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

  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: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>

  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. Inserting of style sheet CSS

  13. {Cascading order • Browser default • External style sheet • inside external *.css file • Internal style sheet • inside the <head> tag • Inline style • inside an HTML element

  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. { 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. { 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? • color: red; • text-align: right; • 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-rgbcolor-hexcolor-name • background-image • url(URL)none • background-repeat • repeatrepeat-xrepeat-yno-repeat

  19. {Text: • color • direction • ltrrtl • word spacing • normallength • text-decoration • noneunderlineoverlineline-throughblink • text-align • leftrightcenterjustify

  20. {Font: • font-family • family-namegeneric-family • font-size • xx-smallx-smallsmall • /etc./ • font-weigh • normalboldbolderlighter100

  21. {Dimension

  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. CSS Variations, Limitations

  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. 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. 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. 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. http://www.csszengarden.com/

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

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

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

  32. Zen Garden without formatting

  33. Thank You for Your Attention CSS

More Related