Image via Wikipedia

---

Source: makeuseof.com

---

Top 5 Sites To Learn CSS Online

Web design might not be the most accessible area to everyone, but CSS and HTML can be very useful, and these are two parts of coding which are really easy.

I mean to change the color of your font you just need to type: "color:red", does it get easier than that?

Well actually, it gets harder but it's worth taking a look, since you can customize everything from your blog to your Google Docs documents with a tiny bit of CSS knowledge. Let's take a look at where you learn css online free and get CSS tutorials for beginners.

W3Schools

W3Schools have lots of tutorials from HTML to PHP and you can be sure that everything you read is up to standards since the site is maintained by the W3C, responsible for the web standards of today.

The CSS lessons are pretty detailed and will take you through most of what you need to know, but since this is more of a technical page you will see less examples than elsewhere and the examples they do have are a bit constrained.

If you already know some CSS though this is a great reference source.

Tizag

I come across this website a lot when looking up things and I had a look at their CSS tutorials, which I found slightly better structured than W3School's.

The basic information is the same, but if you are an absolute beginner you might want to start here.

Tizag in my eyes is a bit less formal.

It seems to me that their examples are closer to real life and the tone is friendlier.

There are also helpful tutorials on many other languages like HTML and MySQL, so if you liked the CSS bit you can stay on for the same quality in other languages.

CSS Zen Garden

This site is very different from the tutorial sites I mentioned before.

On CSS Zen Garden you can put your knowledge to the test or learn from the code written by others.

The whole idea is that there is one static and unchangeable HTML file and you have to create a separate look for it using only CSS.

You can upload your work and it will be showcased, and you can download others' files to take a look at how they did this and that.

This is really useful because I myself learned way more by example than by actually learning.

The same goes for Wordpress templates - if you like one, download it and take a peek in style.css to see how things are done.

CSS Play

CSS Play is a website in between Zen Garden and the tutorial sites because it shows off specific functionalities in CSS and allows you to view the source code.

Instead of having a whole page or a whole site, you can take a look at examples of flyout menus, opacity examples, IE specific workarounds and so on.

If you need a specific functionality and want to get in the know, this website might be the best place to start.

It has a fair share of ads which can be a bit distracting, but the info there is solid, and a lot of times the code, or at least the method is very thoroughly explained.

Google

That's right, plain old Google Search can be a great companion to learning CSS online and finding CSS tutorials for beginners.

Aside from obviously being able to research things you need, you can also look at how specific CSS properties work.

Don't know what values "overflow" can have?

Just type "css overflow" or "css overflow property" and the first result will tell you what you need to know.

The same goes for actually all programming languages, I use this for PHP and MySQL as well, and I don't think the first result has ever failed me yet.

So there you are, no more excuses, it's time to learn some CSS!

You can add your own Google Docs templates, modify your Wordpress templates, and do such a lot more, happy CSS-ing!

Related articles by Zemanta

• 50 New Useful CSS Techniques, Tools and Tutorials (smashingmagazine.com)
• Sexy Tooltips with Just CSS (sixrevisions.com)
• CSS Results 2010 (teabreak.pk)
• 22 Excellent JQuery and CSS Tutorials (skyje.com)
• It's our party, and we'll give away a free CSS video series if we want to! (sitepoint.com)
• Rethinking PDF Creation in Ruby (nofluffjuststuff.com)
• How to avoid Some Common CSS Mistakes. (shoutmeloud.com)

Image by B Tal via Flickr

Design your Web site using CSS content boxes

Design-your-Web-site-using-CSS-content-boxes

---

Coloured content boxes are a great technique for creating visually-pleasing CSS layouts and content. All it takes is assigning a background colour to a

element or setting an image as the background if you want a sleeker look.

To begin create a <div> element and assign it an ID.


<div id='contentBox'></div>



We then need to define the styles for the contentBox ID. Let's start by setting the font type, size and colour.

#contentBox
{
font-family: sans-serif;
font-size: 80%;
color:# 2E2E2E;
}


Next we are going to add some filler text to the

.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat neque sit amet ante tincidunt hendrerit. Vestibulum eleifend erat et enim. Cras nisi arcu, malesuada malesuada, accumsan non, venenatis eget, purus. Mauris pulvinar tincidunt turpis. Aliquam enim. Vestibulum tristique risus eget elit. Fusce urna arcu, dictum sit amet, luctus non, bibendum eu, leo. Vestibulum at diam. Nunc pretium. Maecenas dapibus laoreet leo. Mauris pretium quam. Nulla ultrices. Donec iaculis laoreet diam. Suspendisse a felis quis mauris porttitor mattis. Duis aliquet lacinia odio.

So far we have some text in a

. Let's make this look more like a content box, by adding a background colour and a border around it. Add the code below to #contentBox.


background-color:#FFFF99;
border-style: solid;
border-width:2px;
border-color:#FF9933;


Set the width and height attributes of the box, like this:


width:20%;
height:35%;

We're going to add some padding around the text to make it look better.

padding:1%;

Our text fits nicely within the box at the moment, but if we added another paragraph it would flow over the box. To prevent this we need to add a scrollbar.

overflow: scroll;

Alternatively, you can set the overflow property to auto to display a scrollbar only when needed.

We're going to position the box 10 pixels from the start of the page:


position:absolute;
left:10px;


You can position the box anywhere on the page where you see fit, by adjusting the position attribute.

And tying it all in:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat neque sit amet ante tincidunt hendrerit. Vestibulum eleifend erat et enim. Cras nisi arcu, malesuada malesuada, accumsan non, venenatis eget, purus. Mauris pulvinar tincidunt turpis. Aliquam enim. Vestibulum tristique risus eget elit. Fusce urna arcu, dictum sit amet, luctus non, bibendum eu, leo. Vestibulum at diam. Nunc pretium. Maecenas dapibus laoreet leo. Mauris pretium quam. Nulla ultrices. Donec iaculis laoreet diam. Suspendisse a felis quis mauris porttitor mattis. Duis aliquet lacinia odio.

Nullam cursus erat id magna. Sed eget lectus. Phasellus dignissim. In purus. Duis scelerisque. Sed suscipit risus nec velit. Sed et neque. Maecenas eget nunc. Ut turpis tortor, varius ut, dapibus quis, lobortis
et, erat. Aliquam vitae odio vitae tellus ultricies adipiscing. In ut diam.

Must Have Resources for the Web Developer's Toolbox

Fuel Your Creativity - Must Have Resources for the Web Developer's Toolbox

---

Must Have Resources for the Web Developer's Toolbox

---

If you are a web designer, especially if you are fairly new, you search around for the best and easiest tools to do the tasks you want to do. Here is a summary of this really helpful article.

Summary:

In every creative field, there are certain tools that one always keeps handy in order to get the job done.

As developers (who also design) the toolbox inventory needs to be broad to encompass all the necessary areas to keep you moving and productive.

Below is a list of the resources that we felt should be included in any developer's toolbox.

We have broken it down into different categories to help you keep your tools organized a little bit better.

We hope that the list proves useful.

GIMP is a close second whose price you can't beat (free), especially for web designers who don't need all of the features of Photoshop.

Graybit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the pageâ¬(TM)s perceived contrast.

It returns a set of hue, saturation and tint/shade variations of your color, and suggests color schemets based on your color's complementary color, split complementary colors, and other variations.

FavIcon Generator allows you to easily create a favicon from an image.

The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

The jQuery Visual Cheat Sheet is an useful and practical 6 page reference to jQuery 1.3 for web designers and developers containing the full jQuery API reference with detailed descriptions and some sample code.

jQuery Plugins contains plugins, extensions and tutorials developed by jQuery contributors for the jQuery JavaScript Library.

Code Beautifier is a free online CSS formatter, optimiser, and parser.

Notepad++ is an open source code editor and Notepad replacement that supports several languages.

TextWrangler is a powerful and richly featured tool for composing, modifying, and transforming text stored in plain-text files for Mac.

The WordPress Codex is the place to go if you have any WordPress related questions.

The Spoon Browser Sandbox allows you to run any browser directly from the web.

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

Web Developer's Tools for Firefox is a collection of firefox plugins to speed up the development process.

WampServer is a Windows web development environment which allows you to create web applications with Apache, PHP and the MySQL database.

CSS Tricks Code Snippets is a large repository of useful code snippets in the areas of HTML, CSS, JavaScript (raw), JavaScript (jQuery), PHP, and WordPress.

Angies list includes 26 items in all make sure you check it out at: Must Have Resources for the Web Developer's Toolbox

---

Angie is a freelance web and graphic designer who brings her love of community to the online design collective as co-editor of Fuel Your Creativity.

---

Creating a CSS-Driven Template Site - Site Build It! Express

From Issue 271 of the Site Build It! Express comes this wonderful snippet on creating a site based on and templates.

Creating a CSS-Driven Template Site
Are you an Upload Your Own HTMLer who is ready to use Cascading Style Sheets (CSS)? Debs, our SBI! Forums Queen, provides instructions to get you started on the right track."

"Creating a CSS-Driven Template Site - http://sbitips.sitesell.com/css-driven-template.html

---