Introduction to CSS     By Amit Tyagi
What is CSS• Cascading Style Sheets• Contains the rules for the presentation of  HTML.                +               =   ...
Before CSS•   Initially Designers used presentation tags like (FONT, B, BR, TABLE    etc.) and spacers GIFs to control the...
• Any modification in the design of websites  was a very difficult and boring task , as it  evolves manually editing every...
Providing support for multiple browsers was adifficult task.
Sources of StylesAuthor (developer) Styles•    Inline Styles - As inline attribute “style” inside HTML tags     <div style...
Sources of Styles(contd.)• User Style sheets This file contains the user created styles . [firefox profile folder]/ chrome...
CSS Selectors• ID based ( #)      HTML                              CSS<div id=“content”>               #content {  Text  ...
Class based selector• Class (.)       HTML                                   CSS<div class=“big”>                     .big...
Tag based selectors• Tag (Tag name)       HTML                              CSS<div>                           DIV {   Tex...
Grouping• Multiple selectors can be grouped in a  single style declaration by using , .  H1, P , .main {    font-weight:bo...
Descendant selectorsDescendant selectors are used to select elements thatare descendants (not necessarily children) of ano...
Child selectorsA child selector is used to select an element that is adirect child of another element (parent). Child sele...
Universal selectorsUniversal selectors are used to select any element. * {    color: blue;  }
Adjacent sibling selectorsAdjacent sibling selectors will select thesibling immediately following an element.DIV.abc + P {...
Attribute selectorsAttribute selectors selects elements basedupon the attributes present in the HTMLTags and their value. ...
CSS Pseudo-classesselector:pseudo-class { property: value }:link:visited           } Link (A tag) related pseudo classes:h...
CSS Values• Words: text-align:center;.• Numerical values: Numerical values are usually  followed by a unit type.  font-siz...
Categories of CSS properties•   Positioning and layout handling related.•   Background related properties.•   Font and tex...
CascadeThe CSS cascade assigns a weightto each style rule. When severalrules apply, the one with thegreatest weight takes ...
CSS SpecificityRule 1. CSS File >> Embedded >> InlineRule 2. TAG >> class >> ID
Inheritance• Styles that relate to text and appearance  are inherited by the descendant  elements.• Styles that relate to ...
Refrences• www.w3schools.com• www.w3.org• World wide web
Introduction to CSS
Introduction to CSS
Upcoming SlideShare
Loading in...5
×

Introduction to CSS

3,072

Published on

Video link : http://www.youtube.com/watch?v=TwlroNWWuNM

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

No Downloads
Views
Total Views
3,072
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
198
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introduction to CSS

  1. 1. Introduction to CSS By Amit Tyagi
  2. 2. What is CSS• Cascading Style Sheets• Contains the rules for the presentation of HTML. + = HTML CSS Web Page• CSS was introduced to keep the presentation information separate from HTML markup (content).
  3. 3. Before CSS• Initially Designers used presentation tags like (FONT, B, BR, TABLE etc.) and spacers GIFs to control the design of web pages.
  4. 4. • Any modification in the design of websites was a very difficult and boring task , as it evolves manually editing every HTML page.
  5. 5. Providing support for multiple browsers was adifficult task.
  6. 6. Sources of StylesAuthor (developer) Styles• Inline Styles - As inline attribute “style” inside HTML tags <div style=“font-weight: bold;”>I am bold</div>• Embedded Styles - As embedded style tag with in HTML document. <html> <head> <title>Welcome to Vendio!</title> <style> .footer { width:90%; } </style> ------- </html>• Linked Styles - Inside separate files with .css extension <link rel="stylesheet" href=“external.css" type="text/css" />
  7. 7. Sources of Styles(contd.)• User Style sheets This file contains the user created styles . [firefox profile folder]/ chrome/userContent-example.css is the current user’s style sheet file for the firefox.• Browser default style sheet This file contains default styles for all users of a browser [firefox folder]/res/html.css is the default style sheet file for the firefox.
  8. 8. CSS Selectors• ID based ( #) HTML CSS<div id=“content”> #content { Text width: 200px;</div> }ID selectors should be used with single elements.
  9. 9. Class based selector• Class (.) HTML CSS<div class=“big”> .big{ Text width: 200px;</div> }<div> <span class=“big”>some text </span></div>Class based styles can be used by multiple HTML elements.
  10. 10. Tag based selectors• Tag (Tag name) HTML CSS<div> DIV { Text width: 200px;</div> }<div> SPAN { <span>some text </span> font-size:130%;</div> }<span>some other text </span>
  11. 11. Grouping• Multiple selectors can be grouped in a single style declaration by using , . H1, P , .main { font-weight:bold; }
  12. 12. Descendant selectorsDescendant selectors are used to select elements thatare descendants (not necessarily children) of anotherelement in the document tree. HTML CSS<div class=“abc”> DIV.abc P { <div> font-weight:bold; <P> } Hello there! </p> </div></div>
  13. 13. Child selectorsA child selector is used to select an element that is adirect child of another element (parent). Child selectorswill not select all descendants, only direct children. HTML CSS<div > DIV.abc > P { <div class=“abc”> font-weight:bold; <P> } Hello there! </p> </div></div>
  14. 14. Universal selectorsUniversal selectors are used to select any element. * { color: blue; }
  15. 15. Adjacent sibling selectorsAdjacent sibling selectors will select thesibling immediately following an element.DIV.abc + P { font-weight: bold;}will work for<div> <div class=“abc”>Message</div> <P>Hello there!</p></div>
  16. 16. Attribute selectorsAttribute selectors selects elements basedupon the attributes present in the HTMLTags and their value. IMG[src="small.gif"] { border: 1px solid #000; }will work for<img src=“small.gif” />
  17. 17. CSS Pseudo-classesselector:pseudo-class { property: value }:link:visited } Link (A tag) related pseudo classes:hover:active:after:before:first-child:focus:first-letter:first-line:lang
  18. 18. CSS Values• Words: text-align:center;.• Numerical values: Numerical values are usually followed by a unit type. font-size:12px; 12 is the numerical value and px is the unit type pixels. – Absolute Values – in, pc, px, cm, mm, pt – Relative Values – em, ex, %• Color values: color:#336699 or color#369 or rgb(255, 255, 255).
  19. 19. Categories of CSS properties• Positioning and layout handling related.• Background related properties.• Font and text related• Links related.• Lists related.• Table related.
  20. 20. CascadeThe CSS cascade assigns a weightto each style rule. When severalrules apply, the one with thegreatest weight takes precedence.Order of preference for variousstyles: – Default browser style sheet (weakest) – User style sheet – Author style sheet – Author embedded styles – Author inline styles (strongest)
  21. 21. CSS SpecificityRule 1. CSS File >> Embedded >> InlineRule 2. TAG >> class >> ID
  22. 22. Inheritance• Styles that relate to text and appearance are inherited by the descendant elements.• Styles that relate to the appearance of boxes created by styling DIVs, paragraphs, and other elements, such as borders, padding, margins are not inherited.
  23. 23. Refrences• www.w3schools.com• www.w3.org• World wide web
  1. A particular slide catching your eye?

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

×