Basics of HTML

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

Links

One of the most widely used styling effect is making your links appear as something other than the default blue, underlined, words that look so 20th century! A special type of style rules called a pseudoclass (don't ask me why) is used to modify the look of links.

There are four properties that can be affected

• the look of links before they are visited
• their look after they've been visited
• the look of them when the mouse is over them (hovering)
• the look of them when they are active (in the split second between the mouse click and the display of the linked page)

This last property is really not worth specifying, since it hardly ever shows up to a user. But the other three can be used to very nice effect on your pages. The most common way they are used is to change the color of links and do away with the line under them. But I also like changing the hover property, so that users have that visual cue when they are able to click on a link. This is how these classes should be entered into a stylesheet:

a:link {property: value}
a:visited {property: value}
a:hover {property: value}
a:active {property: value}

They have to be entered in this particular order, but if there is any state that you don't want to change from the default, just leave that one out and the rest will still work.

For example, if you want your links to be green before visiting, not underlined, and red after visiting, plus purple when the mouse is over them, (and if you don't care about the active state of the link) this is what you would have in your stylesheet:

a:link {
color: green;
text-decoration: none;
}
a:visited {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: purple 
}

Notice that the key to getting rid of underlined links is text-decoration: none, and you have to specify it for each of the link states.

If you should want to add a link effect in an inline style, this is the syntax:

<a style="property: value" href="xxx.htm">

For example, to remove the underlining from the link, you'd type this:

<a style="text-decoration: none" href="xxx.htm">

All kinds of helpful effects are possible for your links. You can give them a background color, make the text larger when the mouse is over them, etc. There are even fancier effects possible with the latest standards, including a transition property can do neat things with hover. Read about it at W3Schools. 

Indentation and other Spacing Effects

Indentation 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.

More special text effects, like shadowing, word-wrapping, and transformations, are possible with the current rules.Read more about them here. (Look for "text-decoration" in the menu.)

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  (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:

Fancy features:

• transitions
• transformations
• text effects
• columns

Here's another example:

Soccer skills to work on:

• Shooting
• Passing
• Trapping
• Throw-ins
• Fancy moves

 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.

Before 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: 

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.

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 current CSS rules 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 W3Schools. 

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:hidden. See W3Schools explanation of the property here

Positioning Disclaimer

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

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.

I 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, if somewhat dated:

• Learn CSS Positioning in 10 Steps: a good introduction
• Brainjar's tutorial: very clear explanation
• Elated.com's tutorial: also good examples

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:

• static: this is the default position value that you've been using all the time and just didn't know it! It simply refers the to the normal left-to-right, top-down flow of HTML elements. 
• fixed: this value places the element in a fixed position relative to the browser window; in other words, it doesn't move when the window is scrolled (I've never personally used this value. See this W3Schools page for an example)
• relative: this value positions the element a specified distance from its normal position in the static flow (a simple definition that is quite tricky in application)
• absolute: this value places the element at a specified position within the first parent element that has a position other than static

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:

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. 

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.

Some tips

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

• If a positioned element like an image appears in an odd place, put it inside a properly positioned <div></div> box. This seems to help, even if, strictly logically, it shouldn't make any difference.
• If a relatively positioned element doesn't show up where you want it in the flow of your page, just add or subtract pixels from the top: and/or left: values until it looks right without trying to understand why it's where it is—life is just too short!
• Web authors with more visual/spatial sense than I have can probably find good uses for the float: properties in positioning content. Brainjar's tutorial does a good job explaining the theory of this aspect of positioning (the float section starts towards the bottom of this link).

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.

Last updated: