Beginners CSS

May
28

No Comments - LEAVE A COMMENT

Just some basic CSS elements and uses that any novice will find helpful.

Styling Background Elements

Beginners CSS Book Recommendation:

Intermediate/Advanced CSS Book Recommendation:

The old ways of defining background colors and images, circa HTML 4.01 have been thrown out the window. Today standards matter, and the standard for defining styles are to use CSS (Cascading Style Sheets).

Using CSS to define our background style is simple. First, we need to choose what background we are styling. You will learn later on, that besides your main <body> background, you can define different background for <div> ids and classes as well as any HTML item a background style.

For now though, we’ll start very simple. Let’s just give your background a simple color.

body {background-color:#000000;
}

Easy right? Try it. Open your text editor and copy and paste the above code. Link your style sheet via the <link> attribute in your <head> or set in an embedded style also located in your head between <style type="text/css"> and </style> (if you need a refresher, read more about the diffrent ways to link, or call upon your styles). Now, open up your browser of choice and find your file that the style is linked to. There you have it, a nice black background.

Next, we’ll learn how to specify a background image. Again, this element can be attached to any HTML element. For now, we’ll stick with the <body> tag.

body {background-image:url(../images/example1.gif);
}

As you can see, by going here, my page now has a background. But wait, the image I used was just Squidfinger Pattern that little slice of the background . . . than how did I get it to cover the whole background?! CSS by default will have the background you put in repeat, so in case you are using an image that you only want to show up one, or just repeat in one direction you will have some options. I’ll put all the options here to start, and than we can dissect them. (Image credit goes to SquidFingers Patterns)

body {background-image:url(example1.gif);
background-color:#FFF;
background-repeat:no-repeat;
background-position:left top;
background-attachment:fixed;
}

Ok, so I know you will have some questions, like why do you have a background color defined if you are using an image. This comes in handy in two ways:

  1. When a person has graphics disabled (or if you image is just not working for WHATEVER reason), it will be able to default to a color of your choosing, instead of just white, the normal default. This comes in handy if you are using a back graphic for the background and light colored text. So the user will be able to still read your text
  2. If your graphic is smaller than the entire body background, the rest will be filled in by the color you chose. (This is if you have your image not repeating).

Ok, so now I’ll explain each part that we haven’t talked about yet. First, background-repeat. We’ve talk about it in passing, but not completely. There are some options to this one:

  • repeat — will continously repeat the image from every direction
  • repeat-x — will repeat the image from right to left (horizontally)
  • repeat-y — will repeat the image from top to bottom (vertically)
  • no-repeat — will only have the image show up once

You will need to chose which one is right for you based on the image you have chosen.

Next, we have background-position. There are a few ways to define how you want your background positioned:

  • using keywords (top, center, right, bottom, left)
  • using percentages — x% y%
  • using pixel defintions — Xpx Ypx
  • Mixing percentages and pixels — 50% 100px

Just remember when you are putting in your definitions that the X attribute is first, which is the vertical (top to bottom) one and Y is the horizontal (left to right) defintion. It doesn’t so much matter when you are working with the keywords, but it will matter a lot with the numerical defintions.

We are now left with background-attachment. This is a very cool property. You can set this to either scroll or fixed. Scroll is what you normally see. The image will stay put as the user “scrolls” the page up or down. With fixed the exciting thing is the image will “move” with the page. Actually, the image will stay exactly where it is, the page will just move over top of it. See an example of a fixed background attachment. As you see, when you scroll up the image at the top stays put, and the text flows over-top of it. Very neat trick.

So! Those are our major background properties. Now, I will show you how to combine all those element into one neat definition.

{background: #81C3E0 url(../images/example3.gif)repeat-y left scroll;
}

This is the exact style I have attributed to the body tag in Example 3’s body background. As you can see, the image repeats all the way down the left side and the background color (#81C3E0) fills in the “white-space” to the right.

Other tweaking of the background can be done with padding and margins, but that is a future lesson, which involves the more complicated box-model. (Link to lession will be provided when lesson becomes available)

Other HTML elements you can style

Now remember how I said in the beginning that the background attribute abould be applied to any HTML element? Well, now I will show you how exactly you can do this, with a few example. The rest is up to you!

I’m going to show you two more examples, one on how to give your “<textarea> and <p> unique looks.

We’ll start with the “<textarea> first. Styling forms, and form elements is insanely easy (and fun!) with CSS. This will be a simple easy color change:


See? Easy! The styles I used are inside the textarea. As you can see I set other styles besides the background, but that’s what we are going to focus on now. Gone are the days of plane white forms, and here are the days where we can match our forms to our site designs!

And now, for our last element in this lesson, styling the background of a paragraph. We’re going to use some “advanced” methods here, but I think if you understand everything above, this should be nothing but cake for you. You can see what I did by previewing Example 4.

Neat huh? At the bottom of each paragraph there are two little lego people (from LOVEPIXEL). The style properties I used are:

p {background:#FFF url(../images/example4.gif)no-repeat right bottom scroll;
padding-bottom:35px;
margin-bottom:20px;
}

As you can see the top line is our normal, easy to understand background properties. The only thing different here is the padding-bottom and margin-bottom. These are there so that we can place the image there without interfering with the text. I’ve put a border around the middle paragraph so you can see the padding and margin that happens. Each time you use this method it will be different, so you’ll have to mix and mess with the numbers yourself. I’m not going to get into explaining the padding and margin stuff now, we’ll get to that later on, but this will be a good example to keep you learning!

Jump to Comments

Leave a Reply

Your email address will not be published. Required fields are marked *