In this article we will find that how to optimize Css.This is very simple and basic tips for the web designers and developers. Not only will these tips help reduce the file size of your CSS file, but they\u2019ll also speed up your coding if you prefer to do some of your CSS by hand.
\n<\/p>\n
\r\n\r\nBefore<\/strong>\r\n[code lang=\"css\"]\r\np {\r\nmargin-top: 5px; \r\nmargin-right: 10px; \r\nmargin-bottom: 15px; \r\nmargin-left: 20px;\r\n} \r\n[\/code]\r\nAfter<\/strong>\r\n[code lang=\"css\"]\r\np{ margin:5px 10px 15px 20px;}\r\n[\/code]\r\n<\/pre>\n2. Remove Unnecessary Whitespace <\/h2>\n\r\n\r\nBefore<\/strong>\r\n[code lang=\"css\"]\r\n.wrap\r\n{\r\nwidth:900px;\r\n\r\nheight:100%;\r\n\r\nmargin:0px;\r\n\r\npadding:0px;\r\n\r\nbackground-color:#cccccc;\r\n}\r\n[\/code]\r\nAfter<\/strong>\r\n[code lang=\"css\"]\r\n.wrap\r\n{ width:900px; height:100%; margin:0px; padding:0px;}\r\n[\/code]\r\n<\/pre>\n3. Use shorthand colors<\/h2>\n
Longhand hex colors are specified as three red, green, and blue triplets, like this:<\/p>\n
[code lang=”css”]
\np { color: #fdca30; }
\n[\/code]<\/p>\n
You can abbreviate colors that have an identical value for each pair, that is, #rrggbb;, with only one value per pair, so this:<\/p>\n
[code lang=”css”]
\np { color: #ffcc00; }
\n[\/code]<\/p>\n
becomes this, using shorthand hex notation:<\/p>\n
[code lang=”css”]
\np {color: #fc0;}
\n[\/code]<\/p>\n
Named colors can ease maintenance, but they are generally longer than their shorthand hex equivalents (other than red and tan).<\/p>\n
4. Use Descendant Selectors<\/h2>\n
[code lang=”css”]
\ndiv.warning p{color:red;}
\n[\/code]<\/p>\n
[code lang=”htmlstrict”]<\/p>\n
\nWarning! Meltdown is imminent.<\/p>\n<\/div>\n
[\/code]<\/p>\n
5. Use Css CompressTools<\/h2>\n
if you don\u2019t want to waste your time in modifying your old style sheets you can simply use online css compress tools, it make your work in seconds
\ncheck this online css compress tools\u2026
\nCss Tidy<\/a>
\nClean Css<\/a>
\nCss Optimiser<\/a>
\nFlumpcakes Css optimizer<\/a>
\ncssdrive Css Comperasor<\/a>
\nW3C Css Validator<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"In this article we will find that how to optimize Css.This is very simple and basic tips for the web designers and developers. Not only will these tips help reduce the file size of your CSS file, but they\u2019ll also … Continue reading