Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How Cascading Style Sheets (CSS) Works

83,625 views

Published on

This slide is really helpful for learning CSS.

Published in: Technology, Education
  • If you are looking for trusted essay writing service I highly recommend ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ The service I received was great. I got an A on my final paper which really helped my grade. Knowing that I can count on them in the future has really helped relieve the stress, anxiety and workload. I recommend everyone to give them a try. You'll be glad you did.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I like this service ⇒ www.HelpWriting.net ⇐ from Academic Writers. I don't have enough time write it by myself.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! I can recommend a site that has helped me. It's called ⇒ www.WritePaper.info ⇐ They helped me for writing my quality research paper.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How Cascading Style Sheets (CSS) Works

  1. 1. How CSS works By Amit Tyagi [email_address]
  2. 2. What is CSS <ul><li>C ascading  S tyle  S heets </li></ul><ul><li>Contains the rules for the presentation of HTML. </li></ul><ul><li> + = </li></ul><ul><li>HTML CSS Web Page </li></ul><ul><li>CSS was introduced to keep the presentation information separate from HTML markup (content). </li></ul>
  3. 3. Before CSS <ul><li>Initially Designers used presentation tags like (FONT, B, BR, TABLE etc.) and spacers GIFs to control the design of web pages. </li></ul>
  4. 4. <ul><li>Any modification in the design of websites was a very difficult and boring task , as it evolves manually editing every HTML page. </li></ul>
  5. 5. <ul><li>Providing support for multiple browsers was a difficult task. </li></ul>
  6. 6. CSS – brief history <ul><li>Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. </li></ul><ul><li>In 1996, CSS level 1 Recommendation was published in December. </li></ul><ul><li>CSS level2 was published as a W3C Recommendation on May 12, 1998 </li></ul><ul><li>CSS level3 is still under development. </li></ul>
  7. 7. Sources of Styles <ul><li>Author (developer) Styles </li></ul><ul><li>Inline Styles - As inline attribute “style” inside HTML tags </li></ul><ul><li><div style=“font-weight: bold;” >I am bold</div> </li></ul><ul><li>Embedded Styles - As embedded style tag with in HTML document. </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><ul><ul><li><title>Welcome to Vendio!</title> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><style> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>.footer { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>width:90%; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li></style> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>------- </li></ul></ul></ul></ul><ul><ul><li></html> </li></ul></ul><ul><li>Linked Styles - Inside separate files with .css extension </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=“external.css&quot; type=&quot;text/css&quot; /> </li></ul>
  8. 8. Sources of Styles(contd.) <ul><li>User Style sheets </li></ul><ul><li>This file contains the user created styles . </li></ul><ul><li>[firefox profile folder]/ chrome/userContent-example.css is the current user’s style sheet file for the firefox. </li></ul><ul><li>Browser default style sheet </li></ul><ul><li>This file contains default styles for all users of a browser </li></ul><ul><li>[firefox folder]/res/html.css is the default style sheet file for the firefox. </li></ul>
  9. 9. Cascade <ul><li>The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. </li></ul><ul><li>Order of preference for various styles: </li></ul><ul><ul><li>Default browser style sheet ( weakest ) </li></ul></ul><ul><ul><li>User style sheet </li></ul></ul><ul><ul><li>Author style sheet </li></ul></ul><ul><ul><li>Author embedded styles </li></ul></ul><ul><ul><li>Author inline styles ( strongest ) </li></ul></ul>
  10. 10. CSS Selectors <ul><li>ID based ( #) </li></ul><ul><li>HTML CSS </li></ul><ul><li><div id =“content”> # content { </li></ul><ul><li>Text width: 200px; </li></ul><ul><li></div> } </li></ul><ul><li>ID selectors should be used with single elements. </li></ul>
  11. 11. Class based selector <ul><li>Class (.) </li></ul><ul><li>HTML CSS </li></ul><ul><li><div class =“big”> . content { </li></ul><ul><li>Text width: 200px; </li></ul><ul><li></div> } </li></ul><ul><li><div> </li></ul><ul><li><span class =“big”>some text </span> </li></ul><ul><li></div> </li></ul><ul><li>Class based styles can be used by multiple HTML elements. </li></ul>
  12. 12. Tag based selectors <ul><li>Tag (Tag name) </li></ul><ul><li>HTML CSS </li></ul><ul><li>< div > DIV { </li></ul><ul><li>Text width: 200px; </li></ul><ul><li></div> } </li></ul><ul><li>< div > SPAN { </li></ul><ul><li>< span >some text </span> font-size:130%; </li></ul><ul><li></div> } </li></ul><ul><li>< span >some other text </span> </li></ul>
  13. 13. Grouping <ul><li>Multiple selectors can be grouped in a single style declaration by using , . </li></ul><ul><ul><li>H1 , P , .main { </li></ul></ul><ul><ul><li>font-weight:bold; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  14. 14. Descendant selectors <ul><li>Descendant selectors are used to select elements that are descendants ( not necessarily children ) of another element in the document tree. </li></ul><ul><li>HTML CSS </li></ul><ul><li>< div class=“abc” > DIV.abc P { </li></ul><ul><li> <div> font-weight:bold; </li></ul><ul><li> < P > } </li></ul><ul><li> Hello there! </p> </li></ul><ul><li> </div> </li></ul><ul><li></div> </li></ul>
  15. 15. Child selectors <ul><li>A child selector is used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children. </li></ul><ul><li>HTML CSS </li></ul><ul><li><div > DIV.abc > P { </li></ul><ul><li> < div class=“abc” > font-weight:bold; </li></ul><ul><li> < P > } </li></ul><ul><li> Hello there! </p> </li></ul><ul><li> </div> </li></ul><ul><li></div> </li></ul>
  16. 16. Universal selectors <ul><li>Universal selectors are used to select any element. </li></ul><ul><li>*  { </li></ul><ul><li>color: blue; </li></ul><ul><li>} </li></ul>
  17. 17. Adjacent sibling selectors <ul><li>Adjacent sibling selectors will select the sibling immediately following an element. </li></ul><ul><ul><li>DIV.abc + P { </li></ul></ul><ul><ul><li>font-weight: bold; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>will work for </li></ul></ul><ul><ul><li><div> </li></ul></ul><ul><ul><li>< div class=“abc”>Message</div> </li></ul></ul><ul><ul><li>< P >Hello there!</p> </li></ul></ul><ul><ul><li></div> </li></ul></ul>
  18. 18. Attribute selectors <ul><li>Attribute selectors selects elements based upon the attributes present in the HTML Tags and their value. </li></ul><ul><ul><li>IMG [src=&quot;small.gif&quot;]  { </li></ul></ul><ul><ul><li>border: 1px solid #000; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>will work for </li></ul></ul><ul><ul><li><img src=“small.gif” /> </li></ul></ul>
  19. 19. CSS Pseudo-classes <ul><li>selector:pseudo-class { property: value } </li></ul><ul><li>:link </li></ul><ul><li>:visited } Link (A tag) related pseudo classes :hover :active </li></ul><ul><li>:after </li></ul><ul><li>:before </li></ul><ul><li>:first-child </li></ul><ul><li>:focus </li></ul><ul><li>:first-letter </li></ul><ul><li>:first-line </li></ul><ul><li>:lang </li></ul>
  20. 20. CSS Values <ul><li>Words: text-align: center ;. </li></ul><ul><li>Numerical values: Numerical values are usually followed by a unit type. </li></ul><ul><li>font-size:12 px ; </li></ul><ul><li>12 is the numerical value and px is the unit type pixels. </li></ul><ul><ul><li>Absolute Values – in, pc, px, cm, mm, pt </li></ul></ul><ul><ul><li>Relative Values – em, ex, % </li></ul></ul><ul><li>Color values: color :#336699 or color#369. </li></ul>
  21. 21. Categories of CSS properties <ul><li>Positioning and layout handling related. </li></ul><ul><li>Background related properties. </li></ul><ul><li>Font and text related </li></ul><ul><li>Links related. </li></ul><ul><li>Lists related. </li></ul><ul><li>Table related. </li></ul>
  22. 22. Box model
  23. 23. The Display Property <ul><li>Block Level elements , such as DIVs, paragraphs, headings, and lists, sit one above another when displayed in the browser. </li></ul>HTML <body> <div id=“div1”></div> <div id=“div2”></div> <div id=“div3”></div> </body> CSS #div1 { width:300px;background:yellow;} #div1 { width:300px;background:blue;} #div1 { width:300px;background:orange;}
  24. 24. Inline Elements <ul><li>Inline elements such as a, span, and img, sit side by side when they are displayed in the browser and only appear on a new line if there is insufficient room on the previous one. </li></ul><div id=&quot;row1&quot; > <span class=&quot;norm&quot;>This is small text and </span> <span class=&quot;big&quot;>this is big</span> <span class=&quot;italicText&quot;> I am Italic</span> </div> .norm { color : red ; } .big { color : blue ; font-weight : bold ; } .italicText { color : green ; font-style : italic ; } #row1 { padding :10px; border : solid 1px #000; }
  25. 25. Display property <ul><li>none inline block list-item run-in compact marker table inline-table inline-block </li></ul><ul><li>table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption </li></ul>
  26. 26. Visibility <ul><li>Visible : The element is visible (default). </li></ul><ul><li>Hidden : The element is invisible (but still takes up space) </li></ul>.big { visibility : hidden ; }
  27. 27. z-index <ul><li>The z-index property specifies the stack order of an element. </li></ul><ul><li>An element with greater stack order is always in front of an element with a lower stack order. </li></ul><ul><li>only works on positioned elements (position:absolute, position:relative, or position:fixed). </li></ul>
  28. 28. Default page flow <ul><li>Always think of web page as 3D arrangement of different layers . </li></ul>
  29. 29. Floating <ul><li>float : left , right , none ; </li></ul><ul><li>A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. </li></ul>IMG { float : left ; }
  30. 30. Floating multiple elements <ul><li>Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float. </li></ul><ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact Us</li> </ul> After applying LI { float:left; }
  31. 31. Clearing Floats <ul><li>Clear:both ; </li></ul><ul><li>Or </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>.clearfix:after { </li></ul><ul><li>content: &quot;.&quot;; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* for IE/Mac */ </li></ul><ul><li></style> </li></ul><ul><li><!--[if IE]><style type=&quot;text/css&quot;> </li></ul><ul><li>.clearfix { zoom: 1; display: block; } </li></ul><ul><li></style> <![endif]--> </li></ul>
  32. 32. Positioning - static <ul><li>position: static ; (Default option) the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations) </li></ul>
  33. 33. Positioning - relative <ul><li>position: relative ; Generates a relatively positioned element, positioned relative to its normal position , use bottom, right, top and left property to place element. Default flow of other elements don’t change. </li></ul>
  34. 34. Positioning - absolute <ul><li>position: relative ; Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static (if none is found, relative to document’s BODY). use bottom, right, top and left property to place element </li></ul>
  35. 35. Positioning - fixed <ul><li>position: relative ; Generates an absolutely positioned element, positioned relative to the browser window and don’t change even after page scroll . use bottom, right, top and left property to place element </li></ul>
  36. 36. Inheritance <ul><li>Styles that relate to text and appearance are inherited by the descendant elements. </li></ul><ul><li>Styles that relate to the appearance of boxes created by styling DIVs, paragraphs, and other elements, such as borders, padding, margins are not inherited . </li></ul>
  37. 38. Refrences <ul><li>www.w3schools.com </li></ul><ul><li>www.w3.org </li></ul><ul><li>World wide web </li></ul>

×