CSS Style Generator
If you play with CSS once in a while you should check out the CSS Builder tool. You just need to name the selector that you want to style and fill out the form.
On the generator you will be able to style text and fonts, box properties, background colors and positioning. The output will be some lines of code like this:
a.hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
color: ffffff;
text-decoration: underline;
}
As you can see the tool can also be used by people who are learning CSS. You can play with the different attributes on the forms and see how they are translated into actual CSS code.
Daniel Scocco on November 17, 2007
Subscribe to our RSS Feed
Related Articles
Bookmark
16 Responses to “CSS Style Generator”
Got something to say?
Sponsors
Popular Articles
- 43 Web Design Mistakes You Should Avoid
- 101 Blog Tips I learned in 2006
- 30 Traffic Generation Tips
- 28 Ways to Make Money with Your Website
- Top 25 Blogs About Blogging
- Darren Rowse vs. Jeremy Shoemoney
- 12 Do's and Dont's of Copyright Law
- Hold Tight, It Will Only Get Easier
- How to Find Advertisers for Your Website
- 7 Ways to Promote your Site
- Top 10 Underrated Wordpress Plugins
- The Best Website Taglines Around the Internet
- 10 Tips To Write Your Most Popular Post Ever
- Blog Setup: 40 Practical Tips
- Homepage Excerpts Wordpress Plugin
Recent Articles
- Exercise Your Brain: Invert the Side of Your Mouse-Pad
- Blogging Questions & Answers 15
- Ratio Analysis For Bloggers 2: Comments per Post Ratio
- Add an Email Subscription Form Below Your Posts
- Vistalicious WordPress Theme Released
- You Need to Call Your Visitors to Action
- Are You Going To Blog World 2008?
- Blogging Questions & Answers 14
- Your Most Popular Stuff Must Go On Mondays
- TechCrunch Got Redesigned
Dreamweaver has enough features to satisfy my tastes - the tastes of someone that knows nothing about coding
Thanks for the info! I have learned coding through trial and error and this should help give me less errors!
Hey Daniel,
I think you’re right, this looks like a good tool for learning. It is pretty similar to how Dreamweaver works, like Eli mentioned, but a lot of people looking to learn CSS don’t want to drop the money for Dreamweaver right away.
Yeah Dreamweaver is not the cheapest of the software.
Could you use this tool to generate a block of code and then cut and paste into an existing CSS form to modify it or is it not that simple. Sorry, I’m a CSS idiot
Yes you can cut and paste the code generated with this tool directly into your CSS stylesheet, just make sure that the selectors you will create are not there already (i.e., do not copy and paste another code for h1 tags if you already have these there, or remember to remove the old code).
Well, that makes this a very cool tool. Thanks!
I do not use that tool/
what i use is Dreamveaver, a good tool for me.
I like this tool, but in all honesty, I can type faster than I can fill out the fields.
Great… this is exactly what I have been looking for since I am a bit of a CSS dolt.
Good free software to use when writing any code is Notepad++ - google it, download and you are done. When you choose the language you would like to use it will highlite the code which makes witing it much easier.
The other good learning tool for the css is developer toolbar for firefox.
Install it and you can go to any website and view its css, and even have a go at editing it.
good learning
CSS is great for text formatting
Awesome! I just learned and finished my second template the hard way, this may help me speed things up in the future.
i need to use it urgently….i am in need of it