Writing CSS is so much easier when you have access to a debugger or a CSS validator. These tools allow you to identify and fix anything that might be wrong with your code, and many of the developer tools also let you edit the content of a live site, which provides invaluable support during a re-design or when trying to find errors. Here are some of our favorite debuggers and validators:
1. Web Developer Extension
This is an extension that can be downloaded and added to Chrome, Firefox, and Opera, and it will run on any OS that supports these browsers. It adds a toolbar to your browser that can be used to inspect your CSS elements in an effort to debug or test out changes.
3. Google Developer Tools
This powerful and useful editing and debugging tool comes with any Google Chrome installation. And can be used to edit, debug, and tweak your code.
4. W3 CSS Validation Service
If something is wrong with your CSS that you can’t quite pinpoint, a CSS validator is a great tool to make sure that your formatting is correct and that there aren’t any glaring errors.
5. CSS Lint
CSS Lint is a really useful validator that will not only validate your code, but you can always use it to pick and choose which errors and warnings to test for.
Minifying your CSS basically means to get rid of all of the unnecessary characters (spaces, line breaks, etc) to strip down your stylesheets so that only what is absolutely essential to run the code remains. Putting your CSS through this process makes your code more lightweight and can help to increase the speed and efficiency of […]
CSS3’s content property allows for content to be added to the page from within the CSS. This is useful in styling, but it’s especially useful if for some reason you don’t have access to or don’t want to edit your HTML files. The content property is used in conjunction with the :before and :after pseudo-selectors to […]
Most developers probably think of CSS as a means to bring designs to life, but CSS3 is capable of going beyond aesthetics. CSS3’s counter-reset property can actually be used to assign chronological numbers to certain sections and subsections of your HTML, which you can then use number certain elements. For this example, we’ll use the property to […]
There are many CSS font properties available to style your fonts. If you need to define the font-style, size, family, and weight, that can add up to a lot of lines of CSS. Fortunately, however, there is a shorthand for CSS font properties. Here’s the formula: Make sure you don’t forget the forward slash between […]
CSS3’s outline property is one that is often thought to be interchangeable with the border property. Though the two properties are very similar, the outline property can actually be used to place an outline OUTSIDE of a defined border. There are three facets of the outline property: outline-style, outline-color, and outline-width. Outline-style takes a bunch […]