A crash course in the absolute basics of CSS-based design.

View this page's html file and css file

Backgrounds and borders.

Here are some interesting things you can do with block-elements. If you recal, block elements are elements that behave like a block, as apposed to things like SPANs and ANCHORs, which just behave like lines of text (or similairly, thin ractangles that span the length of the text). Although backgrounds will work on span elements, it is more effective to use backgrounds as part of block elements. Here we will discuss backgrounds and borders.

backgrounds - borders

Background check.

It is also possible to twiddle with backgrounds using CSS, and there are very interesting possibilities. Firstly, we will get rid of that ugly grey background and replace it with something nicer, like, peach, just for the fun of it. We will do this by targeting the entire page (BODY), pulling “background-color” and defining it as “#FFCC99”, which really isn’t peach, but it will do.

body {
font-family: Arial, Helvetica, sans-serif;
color: #000066;
font-size: 12px;
background-color: #FFCC99;
}

However, perhaps you don’t want all of you page like this, and would like to make your paragraphs stand out a bit, maybe even have a graphic as a background. We can do this by targeting the P element in your page, pulling the “background-image” characteristic and defining it as our image, which in this case will be “whiteDotBack.gif” (not visually entertaining, but it gets the job done).

p {
text-indent: 15px;
background-image: url(whiteDotBack.gif);
}

You will notice something different here. Note that “url( )” tells the browser that the graphic is located at the location inside “( )”. Again, yes, this is boring, but effective.

top

Securing your borders.

Borders, gotta love them, were once a thing strictly of the TABLE world. Big, clunky, and heavy, they were a bear to integrate into a page, and took up way too many lines of code. Now, we have vowed never to go back, and as a result, have found an easier way. With CSS you can give anything a border, anything, with the only catch that a span element interprets each line as its own box, and places the border accordingly.

We want to give our paragraphs a border, a nice dashed grey line, three pixels in width, just for fun. We can do that by targeting the P element yet again and pulling “border”. I pause to make note of the formatting of the “border” characteristic, which is border size, then style followed by color, all separated by spaces. We want our border to be 3 pixels wide, dashed, and #666666 (grey).

p {
text-indent: 15px;
background-image: url(whiteDotBack.gif);
border: 3px dashed #666666;
}

A few other border styles are dotted, solid and double. Feel free to experiment. You can even set a border just for one or more, simply by pulling “border-top” or “border-left”.

top