Srijan presentation on CSS


Published on

Presentation on CSS and its basics by Kamal and Prateek from Srijan.

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Srijan presentation on CSS

  1. 1. CSS Session Presentation By: Kamalpreet Kaur Prateek Sharma
  2. 2. Cascading Style Sheets
  3. 3. <ul><li>What Is CSS, Why it is used?
  4. 4. Defining a Rule
  5. 5. Different ways of applying CSS </li><ul><ul><li>Internal StyleSheet
  6. 6. External StyleSheet
  7. 7. Inline Styles
  8. 8. Import StyleSheet </li></ul></ul><li>Box Model </li></ul>Index Continued to next slide
  9. 9. <ul><li>CSS Float
  10. 10. CSS Sprite
  11. 11. Browser Compatiblity
  12. 12. Resets
  13. 13. Fluid and Fixed Layout
  14. 14. CSS Specificity
  15. 15. CSS Tools </li></ul>
  16. 16. CSS is used to ensure better visual experience for users on web pages. It is used by way of defining colors, fonts, layout and other aspects of document presentation.
  17. 17. Some Examples
  18. 20. Defining a Rule
  19. 21. Types of CSS Styles <ul><li>Internal Style Sheets
  20. 22. External Style Sheets
  21. 23. Inline Style Sheets
  22. 24. Importing Style Sheets </li></ul>
  23. 25. <html> <head> <style type=&quot;text/css&quot;>   p {color: white; } body {background-color: black; } </style> </head> <body> <p>White text on a black background!</p> </body> </html> Internal Style Sheet
  24. 26. Advantages of Internal Style Sheets <ul><li>Internal style sheets affect only the page they are on.
  25. 27. Internal style sheets can use classes and IDs.
  26. 28. Internal style sheets don't require that you upload multiple files.
  27. 29. Internal styles may have higher precedence than external style sheets. </li></ul>
  28. 30. Disadvantages of Internal Style Sheet <ul><li>They affect only the page they are on.
  29. 31. Internal style sheets increase page load times. </li></ul>
  30. 32. External Style Sheet <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;test.css&quot; /> </head> Advantages of External Style Sheets : <ul><li>You can control the look and feel of several documents at once. </li></ul>Disadvantages of External Style Sheets: <ul><li>If you only have a small number of styles, they can increase the complexity of your site.
  31. 33. External style sheets get big very quickly as it's hard to tell when a style is no longer in use, because it's not deleted when the page is removed. </li></ul>
  32. 34. INLINE STYLES <p style=&quot;background-color : #cccccc; border : none;&quot;> Importing a CSS file @import &quot;newstyles.css&quot;;
  33. 35. BOX MODEL Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear
  34. 36. What is CSS Float? <ul><li>With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
  35. 37. Float is very often used for images, but it is also useful when working with layouts. </li></ul>
  36. 38. CSS Sprite <ul><li>Fewer HTTP requests. Images are combined into one larger image at defined X and Y coordinates.
  37. 39. Less overhead for graphics.
  38. 40. Requires significant work before it can be implemented </li></ul>Google uses this sprite for its “SuperStars”
  39. 41. Browser Compatibility <ul><li>Your Web browser is a translation device. It takes a document written in the HTML language and translates it into a formatted Web page.
  40. 42. For example, the HTML standards say that the TABLE tag should support a CELLSPACING attribute to define the space between parts of the table.
  41. 43. But standards don't define the default value for that attribute, so unless you explicitly define CELLSPACING when building your page, two browsers may use different amounts of white space in your table. </li></ul>
  42. 44. Global Reset ensures almost an identical presentation of a site across all the browsers. In every case different browsers applies its own set of defaults to the site which gives an inconsistent UI to the site in different browsers... A Global Reset Fixes this issue and lets you build a site from absolute base. Resets Using a CSS Frameworks is not always recommended but a CSS Reset is all you need. There are many different resets from simple to complex ones.
  43. 45. Fixed vs. Fluid vs. Elastic Layout In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths.
  44. 46. CSS Specificity Specificity decreases as we go down
  45. 47. Tools Used for CSS <ul><li>W3C CSS Validator
  46. 48. CSS Validator Firefox Add-On
  47. 49. CSSCheck
  48. 50. CSS Analyzer </li></ul>
  49. 51. Clean up and optimize your CSS code <ul>Clean up options <li>Dust-Me Selectors
  50. 52. CSS Redundancy Checker
  51. 53. Optimize and Compress your CSS code
  52. 54. CSS Tidy
  53. 55. CSS Drive CSS Compressor
  54. 56. Robson CSS Compressor </li></ul>
  55. 57. Visit for more on website development Thank you!