Your SlideShare is downloading. ×
0
By: Vijayta Vinayak Solutions
CSS Introduction <ul><li>C ascading  S tyle  S heet is  a feature being added to HTML that gives both Web site developers ...
Use of Style Sheets <ul><li>separate structure from appearance </li></ul><ul><li>create consistent appearance </li></ul><u...
Consistent Appearance & Ease of Maintenance <ul><li>Create one style sheet </li></ul><ul><li>Use link tag to use  for seve...
Consistent Appearance & Ease of Maintenance <ul><li>Create one style sheet </li></ul><ul><li>Use link tag to use  for seve...
Increase Accessibility <ul><li>User can override your style sheet </li></ul><ul><li>You can create different style sheets ...
Apply Additional Effects <ul><li>Add hover effect to links </li></ul><ul><li>Remove underlines on links </li></ul><ul><li>...
Additional effects <ul><li>h1 { font-size: 2em; vertical-align: text-bottom;    line-height: 1.25em; margin-right: 5%;    ...
Replace Non-standard Tags <ul><li>Some tags and attributes have been  deprecated  in HTML 4.0 Strict </li></ul><ul><li><fo...
Reduce Web Page File Size <ul><li>Every keystroke counts! </li></ul><ul><li>Smaller files load more quickly </li></ul><ul>...
Keep it in mind when using CSS <ul><li>Older browsers either dont understand it, or understand it badly (incompatibilities...
Type of CSS <ul><li>Inline stylesheet </li></ul><ul><ul><li><H1 style= &quot; color: maroon &quot; > </li></ul></ul><ul><l...
Inline Stylesheet <ul><li><H1 style= &quot; color: maroon &quot; > </li></ul><ul><li>Similar to adding attributes to html ...
Embedded style sheets <ul><li><style>  <!-- h1 {font-family: arial, sans-serif;}  -->  </style> </li></ul><ul><li>Put rule...
External style sheets <ul><li><link rel=&quot;stylesheet&quot;   type=&quot;text/css&quot;  href= &quot; style.css&quot; >...
Rules <ul><li>A Cascading Style Sheets rule is made up of a selector and a declaration. </li></ul><ul><li>H2 {color: blue;...
Declaration <ul><li>The declaration is the part of the rule inside the curly braces. It specifies what a style effect will...
CSS selectors <ul><li>Selectors are one of the most important aspects of CSS as they are used to &quot;select&quot; elemen...
Type  selectors <ul><li>The most common and easy to understand selectors are type selectors. Type selectors will select an...
Class  selectors <ul><li>While type selectors target  every  instance of an element, class selectors can be used to select...
<ul><li><body> <p class=&quot;big&quot;>This is some <em>text</em></p> <p>This is some text</p> <ul> <li class=&quot;big&q...
ID  selectors <ul><li>The most common and easy to understand selectors are type selectors. Type selectors will select any ...
Browser Support <ul><li>Older (before CSS): NN3, Lynx </li></ul><ul><li>Broken: IE3, IE4, NN4 </li></ul><ul><li>Compliant:...
CSS and Accessibility <ul><li>Use good HTML:  <h1>  instead of  <div style= &quot; font-size: big; font-weight: bold;&quot...
Vinayak Solutions
Upcoming SlideShare
Loading in...5
×

Cascading Style Sheet

4,937

Published on

Cascading Style Sheet for beginners

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

No Downloads
Views
Total Views
4,937
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
128
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Transcript of "Cascading Style Sheet"

    1. 1. By: Vijayta Vinayak Solutions
    2. 2. CSS Introduction <ul><li>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. </li></ul><ul><li>The term cascading derives from the fact that multiple style sheets can be applied to the same Web page. </li></ul>Vinayak Solutions
    3. 3. Use of Style Sheets <ul><li>separate structure from appearance </li></ul><ul><li>create consistent appearance </li></ul><ul><li>ease of maintenance </li></ul><ul><li>increase accessibility </li></ul><ul><li>apply additional effects </li></ul><ul><li>reduce use of non-standard tags </li></ul><ul><li>reduce web page file size </li></ul>Vinayak Solutions
    4. 4. Consistent Appearance & Ease of Maintenance <ul><li>Create one style sheet </li></ul><ul><li>Use link tag to use for several web pages </li></ul><ul><li>Make changes in one file </li></ul>Vinayak Solutions
    5. 5. Consistent Appearance & Ease of Maintenance <ul><li>Create one style sheet </li></ul><ul><li>Use link tag to use for several web pages </li></ul><ul><li>Make changes in one file </li></ul>Vinayak Solutions
    6. 6. Increase Accessibility <ul><li>User can override your style sheet </li></ul><ul><li>You can create different style sheets for alternative devices </li></ul>Vinayak Solutions
    7. 7. Apply Additional Effects <ul><li>Add hover effect to links </li></ul><ul><li>Remove underlines on links </li></ul><ul><li>Add horizontal rule to headings </li></ul><ul><li>Use instead of a table for a border </li></ul><ul><li>Control paragraph, line, letter spacing </li></ul><ul><li>Use instead of tables for layout </li></ul>Vinayak Solutions
    8. 8. Additional effects <ul><li>h1 { font-size: 2em; vertical-align: text-bottom; line-height: 1.25em; margin-right: 5%; font-family: &quot;Arial Black&quot;, Verdana, sans-serif; letter-spacing: 0.5em; color: blue; background-color: silver} </li></ul><ul><li>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; } </li></ul><ul><li>ul { margin-top: .1em; list-style: square} </li></ul><ul><li>li { margin-bottom: .25em;} </li></ul><ul><li>a { text-decoration: none; } </li></ul><ul><li>a:hover { text-decoration: underline; color: #800000; background-color: #ffcc00;} </li></ul>Vinayak Solutions
    9. 9. Replace Non-standard Tags <ul><li>Some tags and attributes have been deprecated in HTML 4.0 Strict </li></ul><ul><li><font face=arial color=red size=+2> <basefont …> </li></ul><ul><li><center> </li></ul><ul><li><h1 align=center> </li></ul><ul><li><td valign=top height=45 > </li></ul><ul><li><ul type=square> </li></ul>Vinayak Solutions
    10. 10. Reduce Web Page File Size <ul><li>Every keystroke counts! </li></ul><ul><li>Smaller files load more quickly </li></ul><ul><li>Save disk space </li></ul>Vinayak Solutions
    11. 11. Keep it in mind when using CSS <ul><li>Older browsers either dont understand it, or understand it badly (incompatibilities) </li></ul><ul><li>In some instances current browsers sometimes interpret the style differently thus resulting in different results. </li></ul>Vinayak Solutions
    12. 12. Type of CSS <ul><li>Inline stylesheet </li></ul><ul><ul><li><H1 style= &quot; color: maroon &quot; > </li></ul></ul><ul><li>Embedded stylesheet </li></ul><ul><ul><li><style> </style> </li></ul></ul><ul><li>External stylesheet </li></ul><ul><ul><li><link href=&quot;style.css &quot; > </li></ul></ul>Vinayak Solutions
    13. 13. Inline Stylesheet <ul><li><H1 style= &quot; color: maroon &quot; > </li></ul><ul><li>Similar to adding attributes to html tags </li></ul><ul><li>Disadvantages </li></ul><ul><ul><li>decreased accessibility </li></ul></ul><ul><ul><li>increased file size </li></ul></ul><ul><ul><li>harder to update </li></ul></ul>Vinayak Solutions
    14. 14. Embedded style sheets <ul><li><style> <!-- h1 {font-family: arial, sans-serif;} --> </style> </li></ul><ul><li>Put rules between style tags </li></ul><ul><li>Put in head section </li></ul><ul><li>Add html comment tags </li></ul><ul><li>Use when single document has unique style </li></ul>Vinayak Solutions
    15. 15. External style sheets <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href= &quot; style.css&quot; > </li></ul><ul><li>Save rules in external file </li></ul><ul><li>Advantages </li></ul><ul><ul><li>ease of maintenance </li></ul></ul><ul><ul><li>use less disk space </li></ul></ul><ul><ul><li>increase accessibility </li></ul></ul>Vinayak Solutions
    16. 16. Rules <ul><li>A Cascading Style Sheets rule is made up of a selector and a declaration. </li></ul><ul><li>H2 {color: blue;} </li></ul><ul><li>selector {declaration;} </li></ul>Vinayak Solutions
    17. 17. Declaration <ul><li>The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be. </li></ul><ul><li>For example, &quot;color: blue&quot;. </li></ul>Vinayak Solutions
    18. 18. CSS selectors <ul><li>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. </li></ul><ul><ul><li>Type selectors </li></ul></ul><ul><ul><li>Class selectors </li></ul></ul><ul><ul><li>ID selectors </li></ul></ul>Vinayak Solutions
    19. 19. Type selectors <ul><li>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: </li></ul><ul><li>h1 {color: blue; font-size:16;} </li></ul><ul><li>p {color: green; font-size:12;} </li></ul>Vinayak Solutions
    20. 20. Class selectors <ul><li>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. </li></ul><ul><li>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: </li></ul>Vinayak Solutions
    21. 21. <ul><li><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> </li></ul>Vinayak Solutions
    22. 22. ID selectors <ul><li>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: </li></ul><ul><li>h1 {color: blue; } </li></ul><ul><li>p {font-family-arial; text- </li></ul><ul><li>align: justify; } </li></ul>Vinayak Solutions
    23. 23. Browser Support <ul><li>Older (before CSS): NN3, Lynx </li></ul><ul><li>Broken: IE3, IE4, NN4 </li></ul><ul><li>Compliant: </li></ul><ul><ul><li>Mozilla and Netscape 6 </li></ul></ul><ul><ul><li>Opera 5 and 6 </li></ul></ul><ul><ul><li>recent versions of Internet Explorer </li></ul></ul>Vinayak Solutions
    24. 24. CSS and Accessibility <ul><li>Use good HTML: <h1> instead of <div style= &quot; font-size: big; font-weight: bold;&quot;> </li></ul><ul><li>Make sure page is readable without any style sheet enabled </li></ul>Vinayak Solutions
    25. 25. Vinayak Solutions
    1. A particular slide catching your eye?

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

    ×