CSS Cascading Style Sheets

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

{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 WebpageStructure(X)HTML Style- formatting CSS

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: This paragraph will be right- aligned. This paragraph will be center-aligned.

{ 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

Inserting of style sheet CSS

{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

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

{ 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")}

{ 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

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-rgb color-hex color-name  background-image  url(URL) none  background-repeat  repeat repeat-x repeat-y no-repeat

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

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

{Dimension

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

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 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  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   Learn CSS   Check Your CSS syntax   The beauty of CSS Design  One HTML file  210 CSS

Zen Garden without formatting

Thank You for Your Attention CSS