CSS Colors and Backgrounds Tutorial

Setting Colors

If you want to have text with a different color, then you can do this with CSS too. So what's the big deal? Well, with CSS you can set color to many tags, including horizontal rules! Here's an example that gives color to a horizontal rule (supported by IE4+). Insert this into the head of your document:

Then, insert this code into the body of your document where you want the horizontal rule placed:

You can, of course, choose any colors (by name or by their hexadecimal code). Demo using code above:

Also, if you wanted to have all your bolded text in a certain color, different from the rest of the text, you would insert this into the head of your file (works with IE3+ and NS4+):

By changing the tag <B> to <H1> or <I>, then you control the color of text that's the headline or italicized, respectively.

Setting Background Color

Defining background color for HTML pages is a very basic procedure that has been around since almost the beginning of Web browsing. With CSS, however, you can set different background colors to parts of your page (in fact you can have many differnt backround colors on the same page!) So, for example, you could have different paragraphs with their own background color, or you could set a background for bolded text only etc. Example code for having a background color for your paragraphs (works with IE3+ and NS4+):

The above code will set all your paragraphs the same color: gray (change this color by changing #CCCCCC to the color of your choice). If you'd like different backgrounds with different colors, then you have to use the following:

Then, for one paragraph (gray background) you would use the following in the body of your document:

For the other paragraph (green background), use this in the body:

Setting A Background Image

If you like using backgrounds, you can have a background image that covers only a title or a paragraph. This is supported by IE4+ and NS4+):

The URL of your background image goes between the brackets, so if your image file name is back.gif, for example, then that's what you put between the brackets. Alternatively, if you encounter problems, simply give the entire URL of the background image. Then, insert this where you want your background placed for a paragraph:

Demo:

This is a nice background for a text block!

CSS Tutorials

Sponsor

Hot Wedding Ideas

Advertise

Really affordable rates.

Feedback

Comments, suggestions?