Cascading Style Sheets, or CSS, was created by the World Wide Web Consortium, W3C, and introduced in HTML4. Up until then the amount of control that developers had over a HTML page’s appearance was restricted to basic settings, and the style information was confined to the same document as the HTML. This caused a headache for web developers and designers alike, as the code ultimately became cumbersome and the simplest of font colour changes had to be applied in each and every page. CSS provided developers with, amongst other things, the ability to isolate the style tags in a separate file and reference it from each HTML page. The style was therefore centralised and changes were made in one location.
CSS has come a long way since then, and with new offshoots in the form of SASS and CSS3, is providing developers and designers with even more control over the appearance of web pages, and has given birth to many exciting and innovative web sites. Designers are no longer restricted to creating simple web pages, and have a multitude of tools at hand to help them construct appealing and enticing sites. Below I have listed some of my favourite tools to help in the use and creation of css.
Yaml
A useful CSS framework that allows you to create style sheets easily with a few clicks of your mouse. YAML offers a simple layout builder tool and even supports multiple browsers, providing fixes for those annoying inconsistencies that arise when coding your site.
Typetester
By changing the font attributes, including size, colour, and alignment from Typetester’s intuitive interface, you can effortlessly compare between three font styles on screen and choose the right one for your site. Once selected, Typetester will display the CSS for your chosen font, which can be pasted straight into your style sheet.
Gridinator
A handy site for creating grid layouts. Set a variety of options including the number of columns, column width, margins, and once your done you can download the complete CSS without having to write a line of code.
Colour Scheme Designer
Choose your colour scheme using the comprehensive colour wheel provided, and Colour Scheme Designer will display a set of complimentary colours that suit your choice. What’s great about this site is that it allows you to view an example page designed in your selected colours.
Firebug
A must have tool for any site developer. Firebug is a plugin for Mozilla’s Firefox and lets you view a page’s live HTML, select individual objects from it, and directly edit their CSS tags for quick site rendering.
CSS Gradient Generator
Create effortless CSS gradients without having to open Photoshop. Select your colours and opacity, then simply download the CSS required to apply it to your site.
CSS Menu Maker
CSS Menu Maker comes with a host of pre-created menus, the CSS for which can be easily downloaded, and it also allows you to customise your own. CSS Menu Maker allows for simple menu creation and avoids the need to spend time better spent elsewhere, in getting the layout just right.
Button Maker Online
Button Maker Online provides simple and quick button creation; choose from a variety of attributes and preview your button style before downloading the completed image.
CSS3 Generator
An all round tool for creating CSS3 tags. CSS3 Generator offers an attractive and fluid interface for creating the CSS3 tag of your choice, and of course, you can copy the completed CSS straight from the browser and into your style sheet.
Wordoff
Wordoff takes the hassle out of cleaning excess HTML that is sometimes created by WYSIWIG editors. Paste your unedited code into the box provided and Wordoff will strip away any unnecessary tags.
IE6Fixer
IE6Fixer is a blessing to anyone who has wasted hours adjusting their CSS to overcome the idiosyncrasies of IE6. Rather than labour over your style sheet manually, just provide IE6Fixer with the URL of your CSS file, or upload a local copy, and it will output the CSS required to correct IE6′s quirks.
Primer
Copy your HTML into Primer and it extracts all of the classes and id’s from your code, and outputs a template for the CSS style sheet. A useful starting point to begin styling your site.
Border Radius Generator
When you first visit the Border Radius Generator site you are presented with a HTML layer, and at each of its corners is a box to enter a radius; changing any of these attributes will result in a curve at that corner and the CSS to create it is presented. Creating CSS3 curves couldn’t be simpler.
Dabblet
Dabblet provides a live view of any CSS or HTML that you enter into its interface. It’s a useful site for playing with CSS and HTML, and many happy accidents can come from it.
Sprite Cow
Get the positions and size of sprites from within a spritesheet, by loading the sheet into Sprite Cow and clicking the image you want. What could be easier?
Fffallback
With the advancement and availability of web fonts, they have been adopted by many designers, but it’s often the case that your site needs to be backwards compatible to retain support for the older browsers. That’s where fallback fonts come in, and fffalback is a handy tool for comparing your fallback fonts with your web fonts so that you can get the best match.
Layer Styles
Create simple and attractive layers through the easy user interface that Layer Styles provides. You can apply drop shadows, borders, backgrounds, and more, then copy the completed CSS straight from the browser.
Slickmap CSS
Slickmap is a sitemap creation tool which transforms HTML “unordered lists” into attractive CSS styled sitemaps.
Css3 Please
Effortlessly create CSS3 stylesheets using CSS3 Please. A useful function of this tool is that all corresponding values will change when you adjust a single property, making the process of styling attractive CSS3 elements quick and easy.
Em Calculator
Input a value in pixels and the Em Calculator javascript tool outputs the corresponding em value.
Do you know more Online CSS Tools for Designers and Developers?
Feel free to Share it with us in the Comment Area below.
Pingback: fsgb80v7cbwe