{"id":1968,"date":"2009-09-16T06:26:57","date_gmt":"2009-09-16T06:26:57","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=1968"},"modified":"2018-10-16T18:30:31","modified_gmt":"2018-10-16T18:30:31","slug":"5-steps-to-write-better-css","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/09\/5-steps-to-write-better-css\/","title":{"rendered":"5 Steps to Write Better Css"},"content":{"rendered":"<p>There are plenty of CSS tutorials are available on internet but the few tutorials are useful. In this tutorial you will find 5 steps to write better css code for your next website project. I hope you will enjoy this tutorial.<br \/>\n<!--more--><\/p>\n<h4>1. ResetCss<\/h4>\n<p>You should always use reset Whether it can be Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something.<\/p>\n<p>The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on \u2013 <strong>Eric Meyer<\/strong><\/p>\n<pre>[code lang=\"css\"]\r\nhtml, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe,\r\n blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,\r\n font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,\r\ndd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot,\r\n thead, tr, th, td, input, select, textarea  \r\n\r\n{margin:0; padding:0;}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n*{margin:0; padding:0;}\r\n[\/code]\r\n<\/pre>\n<h4>2. CSS Shorthand<\/h4>\n<p>One of the best and important feature of CSS is the ability to write code in a minimized way.<\/p>\n<p><strong>Incorrect Code<\/strong><\/p>\n<pre>\r\n[code lang=\"css\"]\r\n{\r\nmargin-top:10px;\r\nmargin-right:7px;\r\nmargin-bottom:10px;\r\nmargin-left:7px;\r\n\r\npadding-top:10px;\r\npadding-right:7px;\r\npadding-bottom:10px;\r\npadding-left:7px;\r\n\r\nfont-size:12px;\r\nfont-weight:bold;\r\nfont-family: Arial, Verdana, Tahoma, sans-serif;\r\n}\r\n[\/code]\r\n<\/pre>\n<p><strong>Correct Code<\/strong><\/p>\n<pre>\r\n[code lang=\"css\"]\r\n{\r\nmargin: 10px 7px 10px 7px;\r\npadding: 10px 7px 10px 7px;\r\nfont:bold 12px Arial, Verdana, Tahoma, sans-serif; \r\n}\r\n[\/code]\r\n<\/pre>\n<h4>3. Don&#8217;t using so many classes and Id&#8217;s<\/h4>\n<p>I have noticed that most of the  beginners add classes and ID\u2019s to almost every element on the page, which is not required.There are some examples below of what I am referring to.  <\/p>\n<p><strong>Incorrect Code<\/strong><\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<div id=\"wrapper\" class=\"wrapper\">\r\n  <p class=\"heading\"><strong class=\"subheading\">Welcome<\/strong><\/p>\r\n  <p class=\"linka\"><a href=\"#\" class=\"link\">Home<\/a><\/p>\r\n  <p class=\"linkb\"><a href=\"#\" class=\"link\">About<\/a><\/p>\r\n  <p class=\"linkc\"><a href=\"#\" class=\"link\">Services<\/a><\/p>\r\n  <p class=\"linkd\"><a href=\"#\" class=\"link\">Contact<\/a><\/p>\r\n<\/div>\r\n[\/code]\r\n<\/pre>\n<p>Here is the correct code<\/p>\n<p><strong>Correct Code<\/strong><\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<div  id=\"wrapper\">\r\n<h1>Welcome<\/h1>\r\n          <ul>\r\n                 <li><a href=\"#\">Home<\/a><\/li>\r\n                 <li><a href=\"#\">About<\/a><\/li>\r\n                 <li><a href=\"#\">Services<\/a><\/li>\r\n                 <li><a href=\"#\">Contact<\/a><\/li>\r\n         <\/ul>\r\n<\/div>\r\n[\/code]\r\n<\/pre>\n<h4>4. Organization you Stylesheet <\/h4>\n<p>You should organize your stylesheet so that it is easy to find things and related items are close together. Use comments effectively. For example, There is the Example will tell you how to organize your stylesheet<\/p>\n<pre>\r\n[code lang=\"css\"]\r\n\/*Reset*\/\r\nRemove margin and padding elements\r\n\r\n\/*Basic Elements*\/\r\nDefine style for basic elements: body, h1, h2, h3, h4, h6, ol, ul, dl, p etc.\r\n\r\n\/*Generic Classes*\/\r\nDefine style for generic classes: simple things like remove the bottom, \r\nfloating to the sides etc. \r\n\/*Basic Layout*\/\r\n\r\n\/*Basic Layout*\/  \r\nDefine the style for basic layout: header. footer, sidebar etc.\r\n\r\n\/*Header*\/\r\nDefine the style for header\r\n\r\n\/*Content*\/\r\nDefine the style for content area\r\n\r\n\/*Footer*\/\r\nDefine the style for footer\r\n\r\n\/*Etc*\/\r\nContinue\r\n\r\n[\/code]\r\n<\/pre>\n<h4>5. Use Conditional Stylesheets<\/h4>\n<p>Internet Explorer is the most buggy of all browsers. Fortunately  you can use conditional comments to manage the CSS that is served to IE. If I need it I have a stylesheet called ie6.css that targets older versions of IE. It allows me to manage CSS for older browsers quickly and easily.<\/p>\n<p>Here is the Example<\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<!--[if lte IE 6]>\r\n        \r\n<link rel=\"stylesheet\" href=\"ie6.css\" type=\"text\/css\" media=\"screen\" \/>\r\n        \r\n<![endif]--> \r\n[\/code]\r\n<\/pre>\n<h4>Conclusion<\/h4>\n<p>These are just some of the tips that help me to write better code. I hope that tutorial will also help you to write better and clean code. Apply these Tips to your current and next projects, and you will surely appreciate the efforts.<\/p>\n<p><strong>If You Think that tutorial can be more better , Please share with us. Comment us<\/strong><\/p>\n<p>if you would like to receive more inspiration from us, please consider subscribing to our feed by <a href=\"http:\/\/feeds.feedburner.com\/developers-paradise\"><strong>RSS<\/strong><\/a> or by <a href=\"http:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=developers-paradise&#038;loc=en_US\"><strong>email<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are plenty of CSS tutorials are available on internet but the few tutorials are useful. In this tutorial you will find 5 steps to write better css code for your next website project. I hope you will enjoy this &hellip; <a href=\"http:\/\/aceinfowayindia.com\/blog\/2009\/09\/5-steps-to-write-better-css\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[52,23],"class_list":["post-1968","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/1968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=1968"}],"version-history":[{"count":48,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/1968\/revisions"}],"predecessor-version":[{"id":2016,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/1968\/revisions\/2016"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=1968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=1968"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=1968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}