Styles—Basic Concepts Styles—Basic Concepts Indentation deserves special mention, I feel, 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: text-indent: 5pt |
|
|
|
Custom spacing effects of other kinds can be achieved by using the word-spacing or letter-spacing properties, with values set to one of the same choices of measures, for example: word-spacing:10px The first example would set the spaces between words to 10 pixels, while the second would space individual letters three centimeters apart. |
A special type of style rules called a pseudoclass (don't ask me why) is used to modify the look of links on your pages, another effect that is impossible without styles. 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) and 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 another 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 was 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 { 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. Check the CSShark site for more ideas.
|
In "plain" HTML if you add a background attribute to your <body> tag, the image you select will tile, horizontally and vertically, all over the page. You don't have a choice about how this happens, either. But 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. The property that sets the image is background-image. This is the syntax: background-image: url(xxx.xxx) (xxx.xxx, of course, 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. This method is the one often used to create a navigation bar at the left of the screen without using frames or tables. To do this, you simply construct a thin graphic of the width you want your navigation bar to be. (See the Illustration section of this guide for more information on creating graphics.) Something like this, for example:
Then make your style rule: body { To see what this page would look like, click here. |
To position the background image, use the property background-position. If you wanted a page with my dancing frog as a background image, appearing once in the center of the screen, this would be your style rule: body { In this style rule you've set the background image to the correct file; you've told the browser not to repeat, or tile, the image, and you've told it to position the image in the center both horizontally and vertically (other position options are left or right, for horizontal, which is the first coordinate given; and top or bottom, for the vertical coordinate). To see how this page would look, click here. These background image properties can be used to set backgrounds for other elements of a page as well as the <body>. Tables and table cells, for example, which in "plain" HTML could not have background images. To do this, just use table or td as a selector, or create a custom class to apply only to particular tables or cells.
|
Another cool, yet very 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 above. So to use my dancing frog as a bullet (not really recommended since it's too big) you'd set up your style rule this way:
list-style-image: url(frog.gif)
To see a page with a more practical customized-bulleted list, click here.
Back to Styles—Basic Concepts main page
Back to Intermediate HTML main page
