{"id":2341,"date":"2013-05-10T06:12:32","date_gmt":"2013-05-10T10:12:32","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=2341"},"modified":"2013-05-10T06:12:32","modified_gmt":"2013-05-10T10:12:32","slug":"best-useful-css-tips-for-beginners","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/best-useful-css-tips-for-beginners\/","title":{"rendered":"Best Useful Css Tips  (For beginners)"},"content":{"rendered":"<h2><b>Use Shorthand Css<\/b><\/h2>\n<p>Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all \u2013 it makes the code easier to understand.<\/p>\n<p>Instead of creating CSS like this<\/p>\n<p><a name=\"imageclose-2342\"><div class=\"lb-album\"><a href=\"#image-2342\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/05\/img1.jpg\" alt=\"img1\" ><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2342\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2342\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/05\/img1.jpg\" alt=\"image-2342\">\r\n                   <\/div><\/a><\/p>\n<p>It can be short-handed into the following:<\/p>\n<p><a name=\"imageclose-2343\"><div class=\"lb-album\"><a href=\"#image-2343\"><img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/05\/img2.jpg\" alt=\"img2\" class=\"aligncenter size-full wp-image-2343\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-2343\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-2343\">\r\n                   <img src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/05\/img2.jpg\" alt=\"image-2343\">\r\n                   <\/div><\/a><\/p>\n<h2><b>Understanding <span style=\"color: #ff0000;\">Class<\/span> And<span style=\"color: #ff0000;\"> ID<\/span><\/b><\/h2>\n<p>These two selectors repeatedly confuse beginners. In CSS, class is represented by a <span style=\"color: #ff0000;\">dot<\/span> &#8220;<span style=\"color: #ff0000;\">.<\/span>&#8221; while id is a <span style=\"color: #ff0000;\">hash<\/span> \u2018<span style=\"color: #ff0000;\">#<\/span>&#8220;. In a nutshell id is used on style that is distinctive and don\u2019t repeat itself, class on the other side, can be re-use.<\/p>\n<h2><b>Forget <span style=\"color: #ff0000;\">&lt;Table&gt;<\/span>, Try <span style=\"color: #ff0000;\">&lt;Div&gt;<\/span><\/b><\/h2>\n<p>One of the greatest advantages of CSS is the use of <span style=\"color: #ff0000;\">&lt;div&gt;<\/span> to attain total flexibility in terms of styling. <span style=\"color: #ff0000;\">&lt;div&gt;<\/span> are unlike <span style=\"color: #ff0000;\">&lt;table&gt;<\/span>, where substances are \u2018locked\u2019 within a <span style=\"color: #ff0000;\">&lt;td&gt;<\/span>\u2018s cell. It\u2019s safe to say most \u00a0<span style=\"color: #ff0000;\">&lt;table&gt;<\/span> layouts are attainable with the use of <span style=\"color: #ff0000;\">&lt;div&gt;<\/span> and proper styling, well maybe except considerable tabular contents.<\/p>\n<h2><b>CSS <span style=\"color: #ff0000;\">Padding<\/span><\/b><\/h2>\n<p>Padding is the space between the border of an HTML element and the content within it.<\/p>\n<p>Padding of an element in a single property as follows:<\/p>\n<p><span style=\"color: #ff0000;\">padding<\/span>: 10px 10px 10px 10px;<\/p>\n<p>If you declare all four values as above, the order is as follows:<\/p>\n<p><span style=\"color: #ff0000;\">Top, right, bottom, left<\/span><\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2013\/05\/img1.jpg\">\u00a0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Shorthand Css Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all \u2013 it makes the code easier to understand. Instead of creating CSS like this It can be short-handed into the following: Understanding Class And ID These two selectors repeatedly confuse beginners. In CSS, class is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,5],"tags":[158,146,164,9],"class_list":["post-2341","post","type-post","status-publish","format-standard","hentry","category-web-design","category-web-design-tips","tag-html-2","tag-html5-with-css","tag-photoshop-tips","tag-web-designing"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=2341"}],"version-history":[{"count":6,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2341\/revisions"}],"predecessor-version":[{"id":2349,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2341\/revisions\/2349"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}