More CSS Lay-Out Fun and Backgrounds – CSS Tutorial 5

CSS has immense possibilities, right? But we’re almost there. Let’s continue ….

<p style=”vertical-align:super”>

Places at the baseline. Common around pictures.

Created subscript, which will place the character slightly lower than the surrounding characters as you would expect to see in H2O which is a common example of subscript.

Creates superscript which is common in pricing, $19.99, this could be used in conjunction with the decoration:underline to create $19.99

The top of this character will align with the top of the tallest element on the line. Generally used with images.

Aligns with the top of the parent element. Huh? You probably won’t see much of a difference between top and text-top. Top, aligns with the tallest element on the line where text-top uses the parent elements font, so if you were working in a size 24px font, you could create some new text with a size 12px font and use text-top and it would magically rise above the base line and the top would be even with the size 24px text.

Aligns in the middle of the element, common for pictures.

Aligns with the bottom of the lowest element in the line. Common with pictures.

Works like the text-top, only it’s the bottom.

<p style=”vertical-align:28px”>

You can raise or lower by setting specific px (pixels), pt, (points) inch (uh.. inches), mm (millimeters), cm (centimeters), pc (picas) or em (ems, will cover later).

<p style=”vertical-align:120%”>

Set by calculating a percentage of the line height value. May use negative number for this value.

Now that you have an idea about what can be done with fonts, let’s go ahead and play around with it a bit.

Let me introduce to you the background element. Since we are still working on paragraphs and text, this won’t be about the page background but rather placing our text on a background.

Using this code…

<p style=”background: blue; color: white;”>Here’s our nice white text on a blue background.</p>

You could alternatively use an image

<p style=”background: url(some_cool_image.gif);color: white;”>Here’s our nice white text on a background image</p>

…would place our white text on a blue background if the image is a blue one.

———————-> THAT’S IT!

Congratulations on making it this far. Hopefully, you’ve come to see that CSS is understandable and that you shouldn’t be afraid to dig into it.

When working with your actual pages or external .css files, you should always make a back up copy before making any changes. This way you can feel free to change one thing at a time then see what it changed, then just rinse, wash and repeat until you get it the way you like.

Having your page or .css file backed up is like working with a big ol’ etch a sketch, if you mess up, just shake it and start over. I feel a little silly saying this but if you have a laptop and are about to shake it… STOP!!

Ok, why don’t you go ahead and open up your favorite text editor and create a new blank page. Write out a paragraph or two, or copy and paste from somewhere else and then look at your html code.

Remember our <p style= critters from above? Of course you do! Go ahead and start adding and changing around some of the elements and values from above just to get a feel for it.
Once you’re comfortable with that, we’ll move on to some other elements.

Share this post using these icons:

Related Posts


One thought on “More CSS Lay-Out Fun and Backgrounds – CSS Tutorial 5

Comments are closed.