Understanding CSS Background Properties

Unlike the days of being able to cobble something together with font colors and tables, these days we have the dynamics of Cascading Style Sheets (CSS) to keep things neat and tidy on our Web sites. And as fantastic as CSS is with organizing placement of elements, colors for spaces, and fonts, there is still a bit of a learning curve that must be observed. To help get you started, I will be highlighting some of the basics you need to understand before even getting your feet wet. This article will provide you with a basic set of fundamentals from which to work.

Background images

In the old days, one might use a background image with something like this:

body background="image.gif"

For the sake of making this work with the CMS, I had to forgo the carrots. But you get the general idea. With CSS, however, the same thing would be accomplished with something like this, instead:

body {background-image:url('image.gif');}

The difference this time, however, is that the above code is more often than not going to be located on another file called something like style.css or stylesheet.css.  Either way, the same effective background is created.

Understanding CSS Background Properties

Body background color

Body background color is a lot like using images. And the code — both with older style coding and the later stuff — is also similar.

So what was once this:

body bgcolor="#000000"rest of the html and page content /body (again missing the carrots to work with the CMS)

is now simply this…

body {background-color:#000000;}

Text color and alignment

Another thing that I’ve found that CSS is helpful with is handling both the style and color of fonts.

Take this text, for instance:

<p><font color="000000"><This is text</font></p>

Using CSS and a style sheet file, you can instead use this code…while also adding positioning.

p {font-size:13px; float: left; color:#000000; font-family:Georgia, "Times New Roman", Times, serif;}

Using CSS, I can assign the text size, color, font family and even position it the way I want it.

How does one link to the external style sheet?

With the above code placed in your root directory, for the sake of this example, you might use something like this:

LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen (carrots removed again)

This would either go at the top of your main page you’re creating or in other instances in your header.php creation. Either way, it’s assuming you’ve designated style.css as your new style sheets file and by opting for the media type as “screen,” you’re indicating this is to be used on a computer monitor.

In the next article, we’ll look closer at floating elements and various aspects of control.