Cascading Style Sheet
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Cascading Style Sheet

  • 5,900 views
Uploaded on

Cascading Style Sheet for beginners

Cascading Style Sheet for beginners

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,900
On Slideshare
3,225
From Embeds
2,675
Number of Embeds
5

Actions

Shares
Downloads
124
Comments
0
Likes
2

Embeds 2,675

http://moodle.apc.edu.ph 2,662
http://10.106.1.60 7
http://vijaytapanchal.com 4
http://www.slideshare.net 1
http://www.slashdocs.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. By: Vijayta Vinayak Solutions
  • 2. CSS Introduction
    • C ascading S tyle S heet is a feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page.
    • The term cascading derives from the fact that multiple style sheets can be applied to the same Web page.
    Vinayak Solutions
  • 3. Use of Style Sheets
    • separate structure from appearance
    • create consistent appearance
    • ease of maintenance
    • increase accessibility
    • apply additional effects
    • reduce use of non-standard tags
    • reduce web page file size
    Vinayak Solutions
  • 4. Consistent Appearance & Ease of Maintenance
    • Create one style sheet
    • Use link tag to use for several web pages
    • Make changes in one file
    Vinayak Solutions
  • 5. Consistent Appearance & Ease of Maintenance
    • Create one style sheet
    • Use link tag to use for several web pages
    • Make changes in one file
    Vinayak Solutions
  • 6. Increase Accessibility
    • User can override your style sheet
    • You can create different style sheets for alternative devices
    Vinayak Solutions
  • 7. Apply Additional Effects
    • Add hover effect to links
    • Remove underlines on links
    • Add horizontal rule to headings
    • Use instead of a table for a border
    • Control paragraph, line, letter spacing
    • Use instead of tables for layout
    Vinayak Solutions
  • 8. Additional effects
    • h1 { font-size: 2em; vertical-align: text-bottom; line-height: 1.25em; margin-right: 5%; font-family: "Arial Black", Verdana, sans-serif; letter-spacing: 0.5em; color: blue; background-color: silver}
    • h2 { border-style: solid none none none; border-width: medium; border-color: #808080; margin-top: 1.5em; margin-bottom: .5em; font-size: 1.75em; text-transform: capitalize; }
    • ul { margin-top: .1em; list-style: square}
    • li { margin-bottom: .25em;}
    • a { text-decoration: none; }
    • a:hover { text-decoration: underline; color: #800000; background-color: #ffcc00;}
    Vinayak Solutions
  • 9. Replace Non-standard Tags
    • Some tags and attributes have been deprecated in HTML 4.0 Strict
    • <font face=arial color=red size=+2> <basefont …>
    • <center>
    • <h1 align=center>
    • <td valign=top height=45 >
    • <ul type=square>
    Vinayak Solutions
  • 10. Reduce Web Page File Size
    • Every keystroke counts!
    • Smaller files load more quickly
    • Save disk space
    Vinayak Solutions
  • 11. Keep it in mind when using CSS
    • Older browsers either dont understand it, or understand it badly (incompatibilities)
    • In some instances current browsers sometimes interpret the style differently thus resulting in different results.
    Vinayak Solutions
  • 12. Type of CSS
    • Inline stylesheet
      • <H1 style= &quot; color: maroon &quot; >
    • Embedded stylesheet
      • <style> </style>
    • External stylesheet
      • <link href=&quot;style.css &quot; >
    Vinayak Solutions
  • 13. Inline Stylesheet
    • <H1 style= &quot; color: maroon &quot; >
    • Similar to adding attributes to html tags
    • Disadvantages
      • decreased accessibility
      • increased file size
      • harder to update
    Vinayak Solutions
  • 14. Embedded style sheets
    • <style> <!-- h1 {font-family: arial, sans-serif;} --> </style>
    • Put rules between style tags
    • Put in head section
    • Add html comment tags
    • Use when single document has unique style
    Vinayak Solutions
  • 15. External style sheets
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href= &quot; style.css&quot; >
    • Save rules in external file
    • Advantages
      • ease of maintenance
      • use less disk space
      • increase accessibility
    Vinayak Solutions
  • 16. Rules
    • A Cascading Style Sheets rule is made up of a selector and a declaration.
    • H2 {color: blue;}
    • selector {declaration;}
    Vinayak Solutions
  • 17. Declaration
    • The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be.
    • For example, &quot;color: blue&quot;.
    Vinayak Solutions
  • 18. CSS selectors
    • Selectors are one of the most important aspects of CSS as they are used to &quot;select&quot; elements on an HTML page so that they can be styled.
      • Type selectors
      • Class selectors
      • ID selectors
    Vinayak Solutions
  • 19. Type selectors
    • The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree. For example:
    • h1 {color: blue; font-size:16;}
    • p {color: green; font-size:12;}
    Vinayak Solutions
  • 20. Class selectors
    • While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree.
    • For example, if you want to target the first paragraph and first list items on a page to make them stand out, you could mark up the page in the following way:
    Vinayak Solutions
  • 21.
    • <body> <p class=&quot;big&quot;>This is some <em>text</em></p> <p>This is some text</p> <ul> <li class=&quot;big&quot;>List item</li> <li>List item</li> <li>List <em>item</em></li> </ul> </body>
    Vinayak Solutions
  • 22. ID selectors
    • The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree. For example:
    • h1 {color: blue; }
    • p {font-family-arial; text-
    • align: justify; }
    Vinayak Solutions
  • 23. Browser Support
    • Older (before CSS): NN3, Lynx
    • Broken: IE3, IE4, NN4
    • Compliant:
      • Mozilla and Netscape 6
      • Opera 5 and 6
      • recent versions of Internet Explorer
    Vinayak Solutions
  • 24. CSS and Accessibility
    • Use good HTML: <h1> instead of <div style= &quot; font-size: big; font-weight: bold;&quot;>
    • Make sure page is readable without any style sheet enabled
    Vinayak Solutions
  • 25. Vinayak Solutions