Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (16)
Andere mochten auch
Andere mochten auch (7)
Ähnlich wie Srijan presentation on CSS
Ähnlich wie Srijan presentation on CSS (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Srijan presentation on CSS
- 1. CSS Session Presentation By: Kamalpreet Kaur Prateek Sharma
- 10. CSS Sprite
- 12. Resets
- 13. Fluid and Fixed Layout
- 14. CSS Specificity
- 15. CSS Tools
- 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. Some Examples
- 20. Defining a Rule
- 25. <html> <head> <style type="text/css"> p {color: white; } body {background-color: black; } </style> </head> <body> <p>White text on a black background!</p> </body> </html> Internal Style Sheet
- 27. Internal style sheets can use classes and IDs.
- 28. Internal style sheets don't require that you upload multiple files.
- 29. Internal styles may have higher precedence than external style sheets.
- 31. Internal style sheets increase page load times.
- 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.
- 34. INLINE STYLES <p style="background-color : #cccccc; border : none;"> Importing a CSS file @import "newstyles.css";
- 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
- 37. Float is very often used for images, but it is also useful when working with layouts.
- 39. Less overhead for graphics.
- 40. Requires significant work before it can be implemented Google uses this sprite for its “SuperStars”
- 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.
- 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.
- 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.
- 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.
- 46. CSS Specificity Specificity decreases as we go down
- 48. CSS Validator Firefox Add-On
- 49. CSSCheck
- 50. CSS Analyzer
- 53. Optimize and Compress your CSS code
- 54. CSS Tidy
- 55. CSS Drive CSS Compressor
- 57. Visit http://www.srijan.in for more on website development Thank you!