{"id":140,"date":"2022-04-02T17:23:28","date_gmt":"2022-04-02T17:23:28","guid":{"rendered":"https:\/\/www.normanbalberan.com\/blog\/?p=140"},"modified":"2022-03-11T04:16:22","modified_gmt":"2022-03-11T04:16:22","slug":"useful-css-tips-for-web-developers","status":"publish","type":"post","link":"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/","title":{"rendered":"Useful CSS Tips for Web Developers"},"content":{"rendered":"<figure id=\"attachment_141\" aria-describedby=\"caption-attachment-141\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-141\" src=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/css-tips.jpg\" alt=\"css tips\" width=\"900\" height=\"675\" srcset=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/css-tips.jpg 1200w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/css-tips-300x225.jpg 300w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/css-tips-768x576.jpg 768w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/10\/css-tips-1024x768.jpg 1024w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-141\" class=\"wp-caption-text\"><center><a href=\"https:\/\/www.flickr.com\/photos\/geirarne\/110995239\" target=\"_blank\"><span style=\"font-size: small;\">Geir Arne Brevik \/ Flickr<\/span><\/a> \/ <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\" target=\"_blank\"><span style=\"font-size: small;\">CC BY 2.0<\/span><\/a><\/center><\/figcaption><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#CSS_Tips_and_Guide_for_Web_Developers\" >CSS Tips and Guide for Web Developers<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#1_Multiple_browser_compatibilities\" >1) Multiple browser compatibilities<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#2_Consider_smaller_browser_resolutions\" >2) Consider smaller browser resolutions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#3_Use_Frameworks\" >3) Use Frameworks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#4_Validate_HTML\" >4) Validate HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#5_Validate_CSS\" >5) Validate CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#6_Avoid_Using_Large_Background_Images\" >6) Avoid Using Large Background Images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#7_Judicial_use_of_CSS\" >7) Judicial use of CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/#8_Use_limited_CSS_files\" >8) Use limited CSS files<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"CSS_Tips_and_Guide_for_Web_Developers\"><\/span>CSS Tips and Guide for Web Developers<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\">Before we continue with <strong>CSS tips<\/strong>, it would be better to have a <strong>basic understanding of cascading style sheet.<\/strong> As the name suggests, it is a <strong>style sheet that defines how HTML elements are to be displayed on web pages<\/strong>. It is a powerful language that needs a substantial expertise to work with it. Once you have achieved a considerable proficiency in CSS, you can create unmatchable websites. <strong>In this context, here are some useful CSS tips for web developers to craft unique internet sites.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"1_Multiple_browser_compatibilities\"><\/span>1) Multiple browser compatibilities<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">In the field of web development, the matter of <strong>browser compatibility is a serious concern<\/strong>. You need to be very sure whether the website is accessible in all the major browsers. Furthermore, it is entirely necessary that the layout of the site must be seen similar in all the browsers. So, as a web developer, once you are done with PSD to CSS conversion, you must test the website across all the browsers.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"2_Consider_smaller_browser_resolutions\"><\/span>2) Consider smaller browser resolutions<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Usually, web developers have large computer monitors while doing the process of web development. However, maximum internet users do not use large screens. To tackle this situation, you can access your web analytics and identify from there that what browser resolution is being utilized by the visitors to view your website.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"3_Use_Frameworks\"><\/span>3) Use Frameworks<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">You can find various CSS frameworks on the internet. CSS frameworks would help you in crafting great layout, and that too cross browser compatible.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"4_Validate_HTML\"><\/span>4) Validate HTML<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">When it comes CSS validation, you cannot perform it unless you are done with HTML validation. Furthermore, HTML can cause variations in the website layout and hence requires to be validated.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"5_Validate_CSS\"><\/span>5) Validate CSS<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Code validation is an essential task that is to be done after PSD to CSS conversion to check and eliminate all errors.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"6_Avoid_Using_Large_Background_Images\"><\/span>6) Avoid Using Large Background Images<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Large images expand the file size of web pages and so create the problem in website loading. Hence, try to use small images that use CSS in place of large images.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"7_Judicial_use_of_CSS\"><\/span>7) Judicial use of CSS<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">There is no doubt that CSS is an incredible web tool, but you should be very judicial while working with it. Use it in a best possible way where it is required. There are some places on the website where you can use other light features rather than CSS.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"8_Use_limited_CSS_files\"><\/span>8) Use limited CSS files<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Avoid using too many CSS files as it makes very complicated to do any change in the web layout. Moreover, the processing time for more data would be more.<\/p>\n<p style=\"text-align: justify;\"><strong>These are some useful tips for all web developers to utilize CSS to construct an appealing website.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Tips and Guide for Web Developers Before we continue with CSS tips, it would be better to have a basic understanding of cascading style sheet. As the name suggests, it is a style sheet that defines how HTML elements are to be displayed on web pages. It is a powerful language that needs a &#8230; <a title=\"Useful CSS Tips for Web Developers\" class=\"read-more\" href=\"https:\/\/www.normanbalberan.com\/blog\/useful-css-tips-for-web-developers\/\" aria-label=\"Read more about Useful CSS Tips for Web Developers\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":141,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,1],"tags":[60],"class_list":["post-140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-web-development","tag-css"],"_links":{"self":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":0,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media\/141"}],"wp:attachment":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}