Introduction to Cascading Style Sheets
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to Cascading Style Sheets

on

  • 5,092 views

Introduction to Cascading Style Sheets used in HTML documents.

Introduction to Cascading Style Sheets used in HTML documents.

Statistics

Views

Total Views
5,092
Views on SlideShare
4,901
Embed Views
191

Actions

Likes
8
Downloads
181
Comments
0

6 Embeds 191

http://www.addcolours.com 178
http://www.linkedin.com 6
http://www.slideshare.net 4
http://static.slidesharecdn.com 1
http://localhost 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Cascading Style Sheets Presentation Transcript

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