Assuming you already have prior knowledge of CSS and/or your read the First Tutorial, then we will continue learning the basics of CSS!

Common properties

We'll begin this with a few very common properties that will almost always be used in style sheets!

Background

CSS background properties are used to define the background effects of an element.
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment
  • background

Background Color

Our first example is of the background-color property. This property will allow us to change the background color to anything we want. We can do this three different ways, see the example below:

body {background-color: blue;} Sets background to Blue
body {background-color: #0000FF;} HTML Color Codes
body {background-color:rbg(0,0,255);} RGB Values

The code above is setting the background color of the body element to BLUE and we can accomplish this three different ways!

  1. Using your regular colors such as Red, Orange, Yellow, Green, Blue, and Purple and many other colors. See this list for all of the 150 colors.
  2. Using HTML color codes such as... #45D7DD, #2BD023, and #E43EE2.
  3. And the last method is by using RGB Values such as rgb(000,206,209), rgb(255,215,000), and rgb(144,238,144). Click here for HTML Color Codes and RGB Values.

Background Image

Using this property we can insert an image as the background to a web page, create interactive menus, etc.. The background-image property is repeated by default and will cover the entire area unless specified otherwise. Consider the following code:

p.yellow-paper {background-image:url("images/notepaper_yellow.jpg");}

We can see that p is a selector but we add a class so if we wanted anything within any p element to have the notepaper_yellow.jpg background we could simply type:

<p class="yellow-paper">Some text here on yellow paper</p>

The image "notepaper_yellow.jpg" will be the background for the text we type, in the case CSS.

Background-repeat

The example with the notepaper_yellow.jpg has a problem that might not be so obvious. We didn't define a height OR width for that image. This can be done two ways:

  1. We can make an image that will span the entire width of our site (let say 1000px;) and have it festering on our server OR
  2. We can create the image using Photoshop or any other image editing software and simply crop the image to the full height (in our case 18px) and 1 px in width and simply use the repeat-x property!

Each has their pros and cons I suppose; however, usually images are cut down like that in order to save bandwidth and page loading times. It also makes it easier for you to design your web page. For example: notepaper-yellow.jpg. at 1px X 18px is 2.75KB! That's very insignificant when it comes to designing as web site and it is also something very easy to work with.

p.yellow-paper {
     background-image: url("images/notepaper-yellow.jpg");
     background-repeat: repeat-x;
     height: 18px; /*defines the height of the image*/
     line-height: 18px; /*defines the height of the "text box"*/
}

Note: Text box is used very loosely and is very vague. Think of the line-height property as an invisible box around each line of text. This property will add/contract space between these invisible boxes.

So the background-repeat property has four possible values:

background-repeat: repeat-x; /*repeats along the x-axis*/
background-repeat: no-repeat; /*forces the image to NOT repeat*/
background-repeat: repeat-y; /*repeats along the y-axis*/
background-repeat: repeat; /*repeats along both the x and y axis*/

So let's apply all of this useful information! Let's actually make something! I put together a small .zip file of an .html, .css, and two image files that are relevant to this tutorial and the first Basics of CSS Tutorial. The package is 8.37KB (very small) and I recommend you download it and read some of the comments and try to "decode" the HTML and CSS.
css-basics2.zip
css-basics2.zip
Size: 8.37 KB

Background Position

This property is a little more confusing in a way.. You can actually include x% and y% and xposition and yposition if you happen to know exactly where you want your image to reside on a web page. However, the creators of CSS gave us the most common places where an image might be on a web page.

background-position:top left;
background-position:top right;
background-position:top center;
background-position:center left;
background-position:center right;
background-position:center center;
background-position:top;
background-position:bottom;
background-position:center;
background-position:left;
background-position:right;
background-position:bottom left;
background-position:bottom right;
background-position:bottom center;
background-position:x% y%;
background-position:xpos ypos;

As you can see there are a LOT of choices you can choose from. I actually prefer more advances positioning elements that we'll explore in later CSS tutorials. For now, there are your options.

Background Attachment

This property can be quite irksome in some ways... Here are the possible values

background-attachment:scroll; 
background-attachment:fixed;

Now scroll means the image will scroll with the rest of the page, which is default so this property is basically useless unless you want the image to be fixed and have the web page scroll under the image. This is very uncommon and usually it's pretty annoying unless you have a good reason for an image to remain fixed.

Background All-Inclusive

CSS makes it very easy to include all of our values with ONE property! The lovely background property. Isn't not a bad thing to write out code like this:

body {
     background-color:#fff1d8;
     background-image:url("image/gradient.png");
     background-repeat:repeat-x;
     background-position:top center;
}

however... you can accomplish the same thing by doing this:

body {background:#fff1d8 url("image/gradient.png") repeat-x top center;}

Pros and Cons of Compact Model

There are, of course, Pros and Cons to each style.

Pros of compact style Cons of compact style
  1. It requires less space
  2. Less time to type
  3. Easier if you know what's going on
  1. More difficult to understand
  2. More prone to typos
  3. Order can be confusing

Pros and Cons of Extended Model

Pros of extended style Cons of extended style
  1. Much Easier to understand
  2. Less prone to typos
  3. The Order is self-evident
  1. Takes longer to type
  2. It is kind of bulky
  3. A Pain to find things sometimes

So we can see how each has good and bad parts. I believe there is no "proper" to writing your properties. If you're more comfortable using the extended model then use that! As long as it is easier for you, that's all that really matters in the long run. Just make sure your CSS is syntactically correct and you organize your CSS for ease of readability.

Be Sociable, Share!