{"id":705,"date":"2012-04-11T09:00:02","date_gmt":"2012-04-11T09:00:02","guid":{"rendered":"http:\/\/pingler.com\/blog\/?p=705"},"modified":"2014-08-20T11:31:29","modified_gmt":"2014-08-20T11:31:29","slug":"big-mistakes-to-avoid-in-css","status":"publish","type":"post","link":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/","title":{"rendered":"Big Mistakes to Avoid in CSS"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-5976\" src=\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s-300x300.jpg\" alt=\"CSS Sphere\" width=\"300\" height=\"300\" srcset=\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s-300x300.jpg 300w, https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s-150x150.jpg 150w, https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg 450w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>CSS \u2013 on the surface \u2013 is a very simple web-based language that uses common syntax and phrases that make it simple to customize elements in a variety of aspects. \u00a0Digging deeper into the language, however, can reveal lots of formatting issues, redundancies and code errors that can cause your CSS to not perform as well as it should and this is what will separate the CSS professionals from the novices. \u00a0Here is a list of several of the most common big mistakes that can appear in CSS code along with some solutions for replacing the errors and making sure your end result checks out.<\/p>\n<p><strong>Use Hexadecimal, Not Names<\/strong><\/p>\n<p>Being lazy is not an admirable trait in CSS and can lead to code incompatibilities and inconsistencies. \u00a0For example, each browser may read your color codes differently when using \u201cred\u201d or \u201cblue\u201d than when using \u201cFF0000\u201d or \u201cG5Y7F3\u201d. \u00a0In order to guarantee the colors displayed through your CSS scripts are being displayed exactly how you wish, use a <a href=\"http:\/\/www.webmonkey.com\/2010\/02\/color_charts\/\" data-wpel-link=\"external\">color sheet<\/a> or hexadecimal generator that gives each color a specific, uniform definition. \u00a0Using traditional color names can add extra code that increases the overall file size of the script, which is another reason to avoid its use.<\/p>\n<p><strong>Avoid Redundant Properties<\/strong><\/p>\n<p>To give an example, let&#8217;s say we have the following two elements: #element-1 and #element-2. \u00a0Both elements have the same attributes (font-style, color, margin, padding) but in a poorly written example of CSS, we may still see these elements separately. \u00a0By combining the elements into something like this: #element-1, #element-2, followed by the common code, you can give both elements the same attributes with roughly half of the code, which simplifies the code&#8217;s readability and decreases overall file size. \u00a0This comes in handy when having to make changes and will save you tons of time in the long run.<\/p>\n<p><strong>Eliminate White Space<\/strong><\/p>\n<p>For clarity and ease of use to the human eye, many coders will leave chunks of white space separating important elements so that quick changes can be made and errors can be spotted easily. \u00a0After the code has been finalized, however, you will want to eliminate these white spaces in order to have successfully reduced the file size to the smallest amount possible. \u00a0Yes, even these spaces take up valuable file space and when speed is everything, you want to have your CSS code as compacted and minimized as possible.<\/p>\n<p><strong>Use Validation Tools<\/strong><\/p>\n<p>Finally, once you have made all of the optimizations and corrections you can see and think of, locate a CSS validation tool to confirm whether or not your code is properly written and executed prior to deployment. \u00a0One of the ways you can check this is by using <a href=\"..\/..\/seo-tools\/css-validator\/\" data-wpel-link=\"internal\">Pingler&#8217;s CSS Validator Tool<\/a>, which will let you know whether or not your code meets the validation standards set forth by the W3C. \u00a0Simply upload the code to the web, direct the CSS Validator tool to the URL of the code and it will inform you whether or not said code is up to par. \u00a0It doesn&#8217;t get much easier than that.<\/p>\n<p><i><html><br \/>\n\t<head><br \/>\n\t\t<title><\/title><br \/>\n\t<\/head><br \/>\n\t<body><\/p>\n<p style=\"text-align: center;\">\n\t\t\t<a href=\"http:\/\/www.pingler.com\/account\/register\/\" data-wpel-link=\"external\"><img decoding=\"async\" alt=\"\" src=\"http:\/\/www.pingler.com\/affiliates\/banners\/Pingler-468x60-01A.gif\" style=\"width: 468px; height: 60px;\" \/><\/a><\/p>\n<p>\t<\/body><br \/>\n<\/html><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS \u2013 on the surface \u2013 is a very simple web-based language that uses common syntax and phrases that make it simple to customize elements in a variety of aspects. \u00a0Digging deeper into the language, however, can reveal lots of formatting issues, redundancies and code errors that can cause your CSS to not perform as [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":5976,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,135,25],"tags":[222,224,223],"class_list":["post-705","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-how-to-use-pingler","category-plugins-and-tools","tag-css","tag-css-code","tag-css-validator-tool"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Big Mistakes to Avoid in CSS - Pingler Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Big Mistakes to Avoid in CSS - Pingler Blog\" \/>\n<meta property=\"og:description\" content=\"CSS \u2013 on the surface \u2013 is a very simple web-based language that uses common syntax and phrases that make it simple to customize elements in a variety of aspects. \u00a0Digging deeper into the language, however, can reveal lots of formatting issues, redundancies and code errors that can cause your CSS to not perform as [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingler Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/pinglerdotcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-11T09:00:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-08-20T11:31:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"450\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pingler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/\"},\"author\":{\"name\":\"Pingler\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9\"},\"headline\":\"Big Mistakes to Avoid in CSS\",\"datePublished\":\"2012-04-11T09:00:02+00:00\",\"dateModified\":\"2014-08-20T11:31:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/\"},\"wordCount\":520,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/pingler.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg\",\"keywords\":[\"CSS\",\"CSS Code\",\"CSS Validator Tool\"],\"articleSection\":[\"General\",\"How To Use Pingler\",\"Plugins and Tools\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/\",\"url\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/\",\"name\":\"Big Mistakes to Avoid in CSS - Pingler Blog\",\"isPartOf\":{\"@id\":\"https:\/\/pingler.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg\",\"datePublished\":\"2012-04-11T09:00:02+00:00\",\"dateModified\":\"2014-08-20T11:31:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage\",\"url\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg\",\"contentUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg\",\"width\":450,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/pingler.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Big Mistakes to Avoid in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingler.com\/blog\/#website\",\"url\":\"https:\/\/pingler.com\/blog\/\",\"name\":\"Pingler.com\",\"description\":\"Ping\",\"publisher\":{\"@id\":\"https:\/\/pingler.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingler.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/pingler.com\/blog\/#organization\",\"name\":\"Pingler.com\",\"url\":\"https:\/\/pingler.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg\",\"contentUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg\",\"width\":300,\"height\":160,\"caption\":\"Pingler.com\"},\"image\":{\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"http:\/\/facebook.com\/pinglerdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9\",\"name\":\"Pingler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g\",\"caption\":\"Pingler\"},\"sameAs\":[\"http:\/\/www.pingler.com\"],\"url\":\"https:\/\/pingler.com\/blog\/author\/pingler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Big Mistakes to Avoid in CSS - Pingler Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/","og_locale":"en_US","og_type":"article","og_title":"Big Mistakes to Avoid in CSS - Pingler Blog","og_description":"CSS \u2013 on the surface \u2013 is a very simple web-based language that uses common syntax and phrases that make it simple to customize elements in a variety of aspects. \u00a0Digging deeper into the language, however, can reveal lots of formatting issues, redundancies and code errors that can cause your CSS to not perform as [&hellip;]","og_url":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/","og_site_name":"Pingler Blog","article_publisher":"http:\/\/facebook.com\/pinglerdotcom","article_published_time":"2012-04-11T09:00:02+00:00","article_modified_time":"2014-08-20T11:31:29+00:00","og_image":[{"width":450,"height":450,"url":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg","type":"image\/jpeg"}],"author":"Pingler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pingler","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#article","isPartOf":{"@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/"},"author":{"name":"Pingler","@id":"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9"},"headline":"Big Mistakes to Avoid in CSS","datePublished":"2012-04-11T09:00:02+00:00","dateModified":"2014-08-20T11:31:29+00:00","mainEntityOfPage":{"@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/"},"wordCount":520,"commentCount":0,"publisher":{"@id":"https:\/\/pingler.com\/blog\/#organization"},"image":{"@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg","keywords":["CSS","CSS Code","CSS Validator Tool"],"articleSection":["General","How To Use Pingler","Plugins and Tools"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/","url":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/","name":"Big Mistakes to Avoid in CSS - Pingler Blog","isPartOf":{"@id":"https:\/\/pingler.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage"},"image":{"@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg","datePublished":"2012-04-11T09:00:02+00:00","dateModified":"2014-08-20T11:31:29+00:00","breadcrumb":{"@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#primaryimage","url":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg","contentUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2012\/04\/13142535_s.jpg","width":450,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/pingler.com\/blog\/big-mistakes-to-avoid-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pingler.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Big Mistakes to Avoid in CSS"}]},{"@type":"WebSite","@id":"https:\/\/pingler.com\/blog\/#website","url":"https:\/\/pingler.com\/blog\/","name":"Pingler.com","description":"Ping","publisher":{"@id":"https:\/\/pingler.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingler.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pingler.com\/blog\/#organization","name":"Pingler.com","url":"https:\/\/pingler.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg","contentUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg","width":300,"height":160,"caption":"Pingler.com"},"image":{"@id":"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/pinglerdotcom"]},{"@type":"Person","@id":"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9","name":"Pingler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pingler.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g","caption":"Pingler"},"sameAs":["http:\/\/www.pingler.com"],"url":"https:\/\/pingler.com\/blog\/author\/pingler\/"}]}},"_links":{"self":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts\/705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/comments?post=705"}],"version-history":[{"count":4,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":5978,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions\/5978"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/media\/5976"}],"wp:attachment":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/media?parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/categories?post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/tags?post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}