Basics of HTML

Using Styles: text, links, lists, pages, layout

Indentation and other Spacing Effects

newsIndentation deserves special mention because it used to be one of the most frustrating things about web authoring. It's so easy with a word processor (or even a typewriter, for goodness sakes!) to indent a paragraph. But in pre-CSS HTML you had to resort to all sorts of clunky (stringing non-breaking spaces together) or cumbersome (spacer gifs or tables) fixes to achieve this simple result. With styles, however, it's back to being almost as simple as the tab key again.

The magic property to remember is text-indent, with the value following expressed in your choice of a variety of measures, from the old-fashioned points, to pixels, percentages, inches, centimeters, etc. Here are some examples, shown as inline style statements:

style="text-indent: 5pt"
style="text-indent: 5px"
style="text-indent: 5cm"
style="text-indent: 5%"

Custom spacing effects of other kinds can be achieved by using the word-spacing or letter-spacing properties, which put the spacing in between words and letters different from the usual, by the specified values (notice negative values are allowed):

word-spacing:10px
letter-spacing:-1px

The first example would set the spaces between words to 10 pixels, while the second would put the letters 1 pixel closer together than usual.

new!More special text effects, like shadowing, word-wrapping, and transformations, are possible with the new CSS3 rules.Read more about them here.

Lists

A very useful, and quite simple, thing to do with styles and graphics is to customize the look of your bullets in unordered lists.

The property involved is list-style-image, and you specify the image to use the same way as with the background images. So to use this nice "thumbs up" graphic check (named newrite.gif) as a bullet, you'd set up your style rule this way:

list-style-image: url(newrite.gif)

This would give you a list like this, with the graphic instead of the usual bullet point:

New features of CSS3:

Here's another example:

Soccer skills to work on:

 You can also use styles to make the normal bullet a different simple shape, like a square or an outlined circle, by using the list-style-type property. You can even have a list with no markers at all, by saying list-style-type:none.

W3Schools details all the possiblities, including variations for ordered lists, too, here.

Advanced Page Enhancements

Under the Page Decoration tab, there's a box that shows you how to specify a background image for your page. Here are some special uses of this feature. Plus you'll see exactly how to put the required style rules into a style sheet.

penguinBefore styles, you could add a background attribute to your tag, but the image would tile, horizontally and vertically, all over the page. You didn't have a choice about how this was done.

Now, with a simple style rule, you can display a background image a single time, in the center of the page; or you can have the image tile vertically and not horizontally, etc.

To review, the property that sets the image is background-image and this is the syntax: background-image: url(xxx.xxx) (xxx.xxx is the name of the graphic file)

The property that governs tiling is background-repeat, and its values can be no-repeat (which will display the image a single time),repeat (which is just the default tiling option), and repeat-x; or repeat-y. These last values will cause the image to be tiled horizontally or vertically, respectively. 

One of the neat things you can do with the vertical or horizontal repeating values is to make a bar down the side of your page or across the top. Just select an image that would look good in that configuration. For a bar down the left side of your page, all you need is something as simple as this line, named navbar.gif

navbar

to make a very attractive (if somewhat garish) side bar, Just attach this style rule to your <body> tag:

body {
background-image: url(navbar.gif);
background-repeat: repeat-y;
}

And you'll have a bar down the side of your page that would look something like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 The repeat-y value is responsible for the vertical-only tiling. A similar effect could be achieved (with a thicker graphic) across the top of the page, by making this value repeat-x.

line

You might want to center an image, for example, a logo, in the middle of your page. In that case, you'd use the no-repeat value so that it would display only once. Then you need another property to tell the browser where that one instance of the graphic is to be placed. It's background-position and W3Schools tells you how to position the graphic in lots of different configurations (note that for some browsers to display this effect correctly, you also need to add background-attachment:fixed to the statement). Here's how you'd position a graphic in the very center (both horizontally and vertically) of a page:

body {
background-image: url(frog.gif);
background-repeat: no-repeat;
background-position: center center;
}

And this is how it would look:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 The new CSS3 features include an opacity property that would allow my frog to display a level of transparency, so you could read the text better over it. Read about it at W3Schoolsnew!

Overlapping Content

One of the most compelling reasons to use CSS positioning is that different elements can overlap one another. As Elated.com aptly remarks at the beginning of its positioning tutorial: "Try doing that using tables!"

The key to this great feature is the z-index property. Just add lines like the ones in red below to your style statements:

.image1
{
*position:absolute;
left:0px;
top:0px;
z-index:1
}

.image2
{
position:absolute;
left:50px;
top:50px;
z-index:2
}

Now, elements (say, images) with the class image1 attached will display in the top left corner of their parent element, and elements with the class image2 will appear 50 pixels to the left and down from that corner. And, the image2 elements will sit on top of the image1's.

Remember: Higher z-index numbers display on top of lower ones.

*(NOTE: I have had some difficulty getting syles positioning coding to work properly; see the disclaimer on the right.)

Overflowing Content

What happens if the content of your box is bigger than the box?

The default is that it really does just overflow, spilling over onto the content below it. CSS provides the means for you to specify a different outcome if you'd rather your box dimensions contain the content.

The option that makes the most sense is overflow:scroll which puts a scroll bar on the box. But you can also just hide the extra content by saying overflow:hiddenSee W3Schools explanation of the property here

Graphics Credits

The elegant graphic line on this page, the stylish penguin, the thumbs up and all the rest, came from Realm Graphics, a nice free graphics site.

Positioning Disclaimer

Regarding the using of styles to position text on your pages: point

Although this capability has been in the CSS toolbox for some years, I have only recently begun to use it on a regular basis. I've found it to be rather tricky and there's still a good bit I don't understand about it.

However, with Dreamweaver (and, presumeably, other HTML editors) it's pretty easy to fiddle around with it and get it to come out ok. The problem is, I don't always know what I've done to get the results I want!

I particularly have trouble mixing positioned and non-positioned items and usually just end up positioning everything since it's so easy in Dreamweaver. You shouldn't have to do this, however, and less-spatially-challenged folks might not have as much trouble with it.

do understand the basic theory of CSS positioning, however, and that's primarily what the following covers, along with a few places where I've found the fundamental logic of the process doesn't always translate the way you think it should onto the page.

I therefore strongly urge you to consult other sources before diving headfirst into CSS positioning.

W3Schools, of course, has clear basic descriptions. I also found the following very helpful:

line

Part of the problem with understanding CSS positioning is that it allows you to do so much! Its very flexibility makes it hard to get your head around it. I've always had better luck learning advanced HTML and CSS features if I have a specific project in mind that I want to make happen. Bringing it down from the abstract to the concrete makes it much more understandable. So don't get discouraged reading the theory, try putting it in to practice!

Using Styles for Positioning Elements

Styles are a much more elegant, flexible, and precise method than tables for putting elements where you want them on a web page. (NOTE: the instructions in this box are very basic).

Before you can understand any positioning details, you need to visualize your web page as a set of boxes. The largest will always be the<html></html> box that encloses the whole shebang. Within that box are the <head></head> box and the <body></body> box. And within the <body> box there can be many other boxes: <p></p>'s, <h1></h1>'s, <span></span>'s, etc. Especially useful in positioning are <div></div> boxes.

The basic property involved in positioning is aptly called position. It is used to place boxes where you want them by creating classes with this element specified and then attaching elements to that class, just as you would for any other properties. Specifying its value is the required first step in CSS positioning. Here are the possible values it can have:

I made relative and absolute red because these are the values used most often. A common method of arranging content on a page involves relatively positioned <div>'s with absolutely positioned <div>'s inside of them. (That's 99% of my positioning experience, at any rate.)

In your style sheet, after you've declared what type of position you want (relative or absolute, for example) you specify how far from its normal position in the flow (relative), or from its normal position within its parent element (absolute) that you want it to appear. You can specify all four corners of the "box," but for practical purposes you just need to specify two. I've gotten in the habit (on the advice of some of the tutorials) of specifying the top and left positions, which refer to the top edge's position and the left edge's position. 

For absolute positioning (which is the easiest to describe) the "normal" position within the parent element is considered the upper left corner, where you see the star in this box:

star

 

 

If you wanted the star to be absolutely positioned down 150 pixels from the top and 100 pixels in from the left side of the box, you'd put it in a <div></div> box with these style properties:

{position:absolute;
left:100px;
top:150px;}

Note that you can use negative numbers in your positioning, too. A negative number specified in the left: position would move the element to the left, and a negative in the top: position would move it up. I know, this means that the element might not be in the box any more, but, oddly enough, that's ok. 

Brainjar's tutorial has very clear visual and verbal descriptions of what happens to boxes with positioning. 

line

That, in a nutshell, is the theory of CSS positioning. In application, as I indicated, things can get more complicated fast. But since there are so many things you can do with the feature, it's probably best, once you have the outline of the theory firmly in mind, that you just jump in and try some positioning. Fiddle with it, return to this guide and the references I've given, read them over again, go back and fiddle some more, and, gradually, based on my experience, it will become clearer and easier to manage.

There are even more things to learn about CSS positioning just over the horizon with CSS3. Read about some of them at W3Schools—take a look at the Box and Flexible Box sections of the new properties reference.new!

Some tips

Based on problems I have experienced, you might find the following helpful:

Last updated:

Back to kathyamen.net