Cascading Style Sheets Tushar Joshi
Basic Concepts <ul><li>Redefines a HTML tag. </li></ul><ul><li>User Agent (often the browser) renders the HTML tag with th...
Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>1. Using LINK element in the HEAD tag to link to external...
Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>2. Using STYLE element to write style definitions in the ...
Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>3. Importing another style sheet using @import notation. ...
Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>4. Using style attribute in the HTML element. </li></ul><...
Basic Concepts <ul><li>Grouping </li></ul><ul><ul><li>Selectors can be grouped in comma separated lists </li></ul></ul><ul...
Basic Concepts <ul><li>Grouping </li></ul><ul><ul><li>Declarations can be grouped </li></ul></ul><ul><ul><li>H1 {  </li></...
Basic Concepts <ul><li>Grouping </li></ul><ul><ul><li>Some properties have their own grouping syntax </li></ul></ul><ul><u...
Basic Concepts <ul><li>Inheritance <H1>The headline <EM>is</EM> important!</H1> </li></ul><ul><ul><li>If EM tag has not be...
Basic Concepts <ul><li>Inheritance BODY {  </li></ul><ul><li>color: black; </li></ul><ul><li>background: url(texture.gif) ...
Basic Concepts <ul><li>Class as selector </li></ul><ul><ul><li>Defines “pastoral” as a named style for tag H1 </li></ul></...
Basic Concepts <ul><li>Class as selector </li></ul><ul><ul><li>All elements can be addressed by omitting the tag name sele...
Basic Concepts <ul><li>ID as selectors </li></ul><ul><ul><li>#z97y  {letter-spacing: 9am } </li></ul></ul><ul><ul><li>Name...
Basic Concepts <ul><li>ID as selectors </li></ul><ul><ul><li>H1#z97y  {letter-spacing: 9am } </li></ul></ul><ul><ul><li>On...
Basic Concepts <ul><li>Contextual Selectors H1 EM { color: red } </li></ul><ul><ul><li>Only EM elements inside H1 tags wil...
Basic Concepts <ul><li>Contextual Selectors </li></ul><ul><ul><li>More Examples </li></ul></ul><ul><ul><ul><li>DIV P  { fo...
Basic Concepts <ul><li>Contextual Selectors </li></ul><ul><ul><li>Can be grouped together. H1 B, H2 B, H1 EM, H2 EM { colo...
Basic Concepts <ul><li>Comments in style sheets EM { color: red }  /* red, really red!! */ </li></ul><ul><ul><li>Textual c...
Basic Concepts <ul><li>Anchor pseudo-classes </li></ul><ul><ul><li>Different visual states of anchor tags are represented ...
Basic Concepts <ul><li>Anchor pseudo-classes </li></ul><ul><ul><li>Pseudo classes can be used in conjunction with normal c...
Basic Concepts <ul><li>Anchor pseudo-classes </li></ul><ul><ul><li>Pseudo classes can be used in contextual selectors </li...
Basic Concepts <ul><li>The Cascade </li></ul><ul><ul><li>A style sheet designer can combine several (partial) style sheets...
Basic Concepts <ul><li>The Cascade </li></ul><ul><ul><li>Author Reader Balance </li></ul></ul><ul><ul><ul><li>Both readers...
Basic Concepts <ul><li>‘important’ keyword </li></ul><ul><ul><li>Weights of the declarations can be increased: </li></ul><...
Basic Concepts <ul><li>Box-oriented formatting model  </li></ul><ul><li>Each formatted element results in one or more rect...
Basic Concepts <ul><li>Block Level Elements </li></ul><ul><li><STYLE TYPE=&quot;text/css&quot;>  UL {  background: red;  m...
Reference Material <ul><li>http://www.w3.org/TR/REC-CSS1 </li></ul><ul><li>Save the material available for offline referen...
Upcoming SlideShare
Loading in...5
×

Introduction to Cascading Style Sheets

3,883

Published on

Introduction to Cascading Style Sheets used in HTML documents.

Published in: Technology, Education
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,883
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
199
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • Introduction to Cascading Style Sheets

    1. 1. Cascading Style Sheets Tushar Joshi
    2. 2. Basic Concepts <ul><li>Redefines a HTML tag. </li></ul><ul><li>User Agent (often the browser) renders the HTML tag with this modified definition. </li></ul><ul><li>There are around 50 properties used in CSS </li></ul>H1 { color: blue } Selector Declaration property value Simple CSS Rule
    3. 3. Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>1. Using LINK element in the HEAD tag to link to external style sheet. </li></ul></ul><HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>
    4. 4. Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>2. Using STYLE element to write style definitions in the HTML file itself. </li></ul></ul><HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>
    5. 5. Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>3. Importing another style sheet using @import notation. </li></ul></ul><HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>
    6. 6. Basic Concepts <ul><li>Containment in HTML </li></ul><ul><ul><li>4. Using style attribute in the HTML element. </li></ul></ul><HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>
    7. 7. Basic Concepts <ul><li>Grouping </li></ul><ul><ul><li>Selectors can be grouped in comma separated lists </li></ul></ul><ul><ul><li>Reduce the size of style sheet </li></ul></ul><ul><ul><li>H1, H2, H3 { font-family: helvetica } </li></ul></ul>
    8. 8. Basic Concepts <ul><li>Grouping </li></ul><ul><ul><li>Declarations can be grouped </li></ul></ul><ul><ul><li>H1 { </li></ul></ul><ul><ul><li>font-weight: bold; </li></ul></ul><ul><ul><li>font-size: 12pt; </li></ul></ul><ul><ul><li>line-height: 14pt; </li></ul></ul><ul><ul><li>font-family: helvetica; </li></ul></ul><ul><ul><li>font-variant: normal; </li></ul></ul><ul><ul><li>font-style: normal; </li></ul></ul><ul><ul><li>} </li></ul></ul>
    9. 9. Basic Concepts <ul><li>Grouping </li></ul><ul><ul><li>Some properties have their own grouping syntax </li></ul></ul><ul><ul><li>H1 { font: bold 12pt/14pt helvetica } </li></ul></ul>
    10. 10. Basic Concepts <ul><li>Inheritance <H1>The headline <EM>is</EM> important!</H1> </li></ul><ul><ul><li>If EM tag has not been defined it takes (inherits) all the styles of enclosing H1 tag. </li></ul></ul><ul><ul><li>If color of H1 is blue and EM has no defination for color it will be blue. </li></ul></ul>
    11. 11. Basic Concepts <ul><li>Inheritance BODY { </li></ul><ul><li>color: black; </li></ul><ul><li>background: url(texture.gif) white; </li></ul><ul><li>} </li></ul><ul><ul><li>Sets default style for whole document as BODY is the enclosing tag for all. </li></ul></ul><ul><ul><li>Text color will be black and background will be texture.gif graphics. </li></ul></ul><ul><ul><li>If graphic file is missing background will be white. </li></ul></ul>
    12. 12. Basic Concepts <ul><li>Class as selector </li></ul><ul><ul><li>Defines “pastoral” as a named style for tag H1 </li></ul></ul><ul><ul><li>Any elements inside BODY tag can be classed. </li></ul></ul><HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE=&quot;text/css&quot;> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY> </HTML>
    13. 13. Basic Concepts <ul><li>Class as selector </li></ul><ul><ul><li>All elements can be addressed by omitting the tag name selector. </li></ul></ul><ul><ul><li>All elements with class pastoral will be shown in the color defined in the style. </li></ul></ul><HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE=&quot;text/css&quot;> .pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> <P CLASS=pastoral>My Paragraph</P> </BODY> </HTML>
    14. 14. Basic Concepts <ul><li>ID as selectors </li></ul><ul><ul><li>#z97y {letter-spacing: 9am } </li></ul></ul><ul><ul><li>Name starting with # denoted ID selector. </li></ul></ul><ul><ul><li>Any element having ID z97y will be applied with this style. </li></ul></ul>
    15. 15. Basic Concepts <ul><li>ID as selectors </li></ul><ul><ul><li>H1#z97y {letter-spacing: 9am } </li></ul></ul><ul><ul><li>Only H1 tag with ID z97y will be selected for application of this style. </li></ul></ul>
    16. 16. Basic Concepts <ul><li>Contextual Selectors H1 EM { color: red } </li></ul><ul><ul><li>Only EM elements inside H1 tags will be selected to apply color red. </li></ul></ul><ul><ul><li>H1 EM becomes the pattern to be searched. </li></ul></ul>
    17. 17. Basic Concepts <ul><li>Contextual Selectors </li></ul><ul><ul><li>More Examples </li></ul></ul><ul><ul><ul><li>DIV P { font: small sans-serif } </li></ul></ul></ul><ul><ul><ul><ul><li>P element only inside any DIV tag </li></ul></ul></ul></ul><ul><ul><ul><li>.reddish H1 { color: red } </li></ul></ul></ul><ul><ul><ul><ul><li>H1 element only inside any tag having class attribute reddish </li></ul></ul></ul></ul><ul><ul><ul><li>#x78y CODE { background: blue } </li></ul></ul></ul><ul><ul><ul><ul><li>CODE element only inside the tag having ID x78y </li></ul></ul></ul></ul><ul><ul><ul><li>DIV.sidenote H1 { font-size: large } </li></ul></ul></ul><ul><ul><ul><ul><li>H1 element only inside DIV element having class as sidenote </li></ul></ul></ul></ul>
    18. 18. Basic Concepts <ul><li>Contextual Selectors </li></ul><ul><ul><li>Can be grouped together. H1 B, H2 B, H1 EM, H2 EM { color: red } </li></ul></ul><ul><ul><li>Equivalent to: H1 B { color: red } </li></ul></ul><ul><ul><ul><li>H2 B { color: red } </li></ul></ul></ul><ul><ul><ul><li>H1 EM { color: red } </li></ul></ul></ul><ul><ul><ul><li>H2 EM { color: red } </li></ul></ul></ul>
    19. 19. Basic Concepts <ul><li>Comments in style sheets EM { color: red } /* red, really red!! */ </li></ul><ul><ul><li>Textual comments in CSS style sheets are just like comments for C language. </li></ul></ul><ul><ul><li>Comments are ignored by CSS parser. </li></ul></ul>
    20. 20. Basic Concepts <ul><li>Anchor pseudo-classes </li></ul><ul><ul><li>Different visual states of anchor tags are represented by pseudo-classes </li></ul></ul>A:link { color: red } /* unvisited link */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */
    21. 21. Basic Concepts <ul><li>Anchor pseudo-classes </li></ul><ul><ul><li>Pseudo classes can be used in conjunction with normal classes. </li></ul></ul>A.alpha:link { color: red } /* unvisited link */ A.beta:visited { color: blue } /* visited links */ A.gamma:active { color: lime } /* active links */ <a class=alpha>Click Me</a>
    22. 22. Basic Concepts <ul><li>Anchor pseudo-classes </li></ul><ul><ul><li>Pseudo classes can be used in contextual selectors </li></ul></ul><ul><ul><li>All IMG tags only inside A tag will have solid red border. </li></ul></ul>A:link IMG { border: solid red } <A class=alpha><IMG SRC=flower.gif></A>
    23. 23. Basic Concepts <ul><li>The Cascade </li></ul><ul><ul><li>A style sheet designer can combine several (partial) style sheets to reduce redundancy: </li></ul></ul><ul><ul><li>@import url(http://www.style.org/pastoral); </li></ul></ul><ul><ul><li>@import url(http://www.style.org/marine); </li></ul></ul><ul><ul><li>H1 { color: red } /* override imported sheets */ </li></ul></ul>In CSS1, all '@import' statements must occur at the start of a style sheet
    24. 24. Basic Concepts <ul><li>The Cascade </li></ul><ul><ul><li>Author Reader Balance </li></ul></ul><ul><ul><ul><li>Both readers and authors can influence the presentation through style sheets. </li></ul></ul></ul><ul><ul><ul><li>Authors explicitly apply style sheets, readers can selectively use them or not. </li></ul></ul></ul><ul><ul><ul><li>Conflict resolution is based on each style rule having a weight. </li></ul></ul></ul><ul><ul><ul><li>By default, the weights of the reader's rules are less than the weights of rules in the author's documents. </li></ul></ul></ul>
    25. 25. Basic Concepts <ul><li>‘important’ keyword </li></ul><ul><ul><li>Weights of the declarations can be increased: </li></ul></ul><ul><ul><li>H1 { color: black ! important; background: white ! important } </li></ul></ul><ul><ul><li>P { font-size: 12pt ! important; font-style: italic } </li></ul></ul><ul><ul><li>In the example above, the first three declarations have increased weight, while the last declaration has normal weight. </li></ul></ul>
    26. 26. Basic Concepts <ul><li>Box-oriented formatting model </li></ul><ul><li>Each formatted element results in one or more rectangular boxes. </li></ul><ul><li>Elements that have a 'display' value of 'none' are not formatted and will therefore not result in a box. </li></ul><ul><li>All boxes have a core content area with optional surrounding padding, border and margin areas. </li></ul>Formatting Model
    27. 27. Basic Concepts <ul><li>Block Level Elements </li></ul><ul><li><STYLE TYPE=&quot;text/css&quot;> UL { background: red; margin: A B C D; padding: E F G H; } LI { color: white; background: blue; /* so text is white on blue */ margin: a b c d; padding: e f g h; } </STYLE> .. <UL> <LI>1st element of list <LI>2nd element of list </UL> </li></ul>
    28. 28. Reference Material <ul><li>http://www.w3.org/TR/REC-CSS1 </li></ul><ul><li>Save the material available for offline reference </li></ul><ul><li>Use this material as reference, lexicon for properties and their default values </li></ul><ul><li>CSS has much more to learn and this session should be taken as a starting point. </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×