Download
1 / 35
380 likes | 408 Vues
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
E N D
CSS Cascading Style Sheets
Contents{ • What is CSS? • A Brief History of CSS • Why to use Styles? • Syntax • Cascading Order • Examples of Properties • Limitations • CSS variations
{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
{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
{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
Syntax CSS
{ 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
{ 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 }
{ 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
{ 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>
{ 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
{Cascading order • Browser default • External style sheet • inside external *.css file • Internal style sheet • inside the <head> tag • Inline style • inside an HTML element
{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>
{ 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>
{ 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
Examples CSS Properties & values
{ 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
{Text: • color • direction • ltrrtl • word spacing • normallength • text-decoration • noneunderlineoverlineline-throughblink • text-align • leftrightcenterjustify
{Font: • font-family • family-namegeneric-family • font-size • xx-smallx-smallsmall • /etc./ • font-weigh • normalboldbolderlighter100
{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>
CSS Variations, Limitations
{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
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.
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
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
