Cascading Style Sheets do an excellent job of controlling the appearance of text. Specifying the color, weight, and other styles of text is fairly easy. CSS also allow you to set attributes for the way text is aligned on the page and its position. As with the attributes you explored on the earlier pages, alignment and positioning can be inherited.

Click here to get the code for this next step of the tutorial. It will open in a new window, and you can copy and save it into NotePad.

Find the style called .BlueText. It is in the head portion of the document and looks like this:

.BlueText {
color: #000066;
background-color: #FFFFFF;
}

(You can see what this page page looks like by clicking here. It will open in a new window.)

Add the alignment attribute. It is easy, just a snippet of code so the style now looks like:

.BlueText {
color: #000066;
background-color: #FFFFFF;
text-align: center;
}

Save the file and view it in your browser. The text for that portion of the Web page will now be centered. You can also align the text so that it is aligned left, right, or justified. Experiment with the alignment by trying each of these attributes:

text-align: center; (Click here to see the text center aligned.)

text-align: right; (Click here to see the text right aligned.)

text-align: justify; (Click here to see the text left aligned.)

Save your file each time and view it in the browser. You will see the text change alignment with each change.

The red and green boxes you see on the right side of your screen in this tutorial are positioned there using Cascading Style Sheets. Text (and other elements, as a matter of fact) can have locations specified using styles. The full intricacies of CSS positioning techniques are beyond this introductory tutorial. But, the are explained in detail in many CSS reference books and on the World Wide Web Consortium (W3C) Web site.

 

 

 

 

 

To give you an idea of how positions are specified, the the box on the right contains code for a style called .ExampleBox. (.ExampleBox actually is defining the box on the right!)

One important attribute of the style is the float. You will notice that it is written as :

float; right;

This attribute causes the box to be positioned on the right hand side of the screen. You can also specify a left float. Using more sophisticated coding, you can specify positioning on screen based on the number of pixels from the edge of the page. But this can be quite complicated.

Other attributes include visibility and z-index. Visibility specifies if the style is to be displayed on the screen. Inherited visibility means that whether or not the element is appears on the screen comes from the parent style "up" the cascade. If the visibility is specified as hidden, the element is not displayed, but the space for the element is kept open. Visibility can also be specified as visible, and then the element will appear no matter what the parent style says.

Z-index refers to what can be considered "stacking" order. Stacking order can be specified as either a particular numerical value or as automatic.

Borders, Backgrounds, and Decorative Stuff

As you have seen, Cascading Style Sheets are very good at controlling presentation of text by specifying color and other attributes. But CSS will also do some fancier formatting. Borders are an excellent example.

The traditional HTML border attribute displays a rather unpleasant border around a table. You can see an example by clicking here. It will open in a new window. The border has an old-fashioned 3-D effect so that it almost resembles a picture frame. The attributes for the border are placed in the opening half of the table tag. The code for the 2 pixel border in the example is border="2". You can see it in the code snippet below:

<table width="90%" border="2" cellpadding="0" cellspacing="0" id="MainTable">

But a more modern border can be applied to the table using Cascading Style Sheets. To see an example of a red 2 pixel border, click here and it will open in a new window.

That is a solid, 2 pixel wide red border. The style for that is written as an id. The code is:

#MainTable {
border: 2px solid #990000;
}

You can see how it is applied to the table by checking the opening table tag:

<table width="90%" border="0" cellpadding="0" cellspacing="0" id="MainTable">

With CSS you are not limited to simple solid borders. You can also created dashed, dotted, and ridged borders. Borders can be specified as double, outset, or inset. Examples can be viewed by clicking here.

You do not have to be satisfied with borders that are the same on all four sides. Each side can have a different attribute if you wish.

 

 

 

Border thickness can also be specified separately.

 

 

You can even go completely wild and specify different styles for each border.

 

 

Experimenting with borders is a good idea. They may not appear identical in different browsers. Borders can be applied to certain HTML elements, such as tables, and can be applied as attributes to styles. For instance, the border that surrounds this section of text is defined in a class named .SpanBox.

Borders will appear different depending on which tag or element they are applied to. For instance in the line below

This is an example of .SpanBox applied to a <p> tag

the box extends full width of the parent style. If there was no parent element, the border would extend the full width of the screen. You can see that by clicking here.

In this line the class .SpanBox has been applied to a span tag. This means that it starts and ends with the span tag and does not extend the full width of the parent element or the screen.

The same principles are true with backgrounds. They can be applied to a span tag, as is demonstrated here, or they can be applied to other tags, such as the <p> tag, as shown below:

Here is the class .BackgroundSample applied to a <p> tag.

You can be very creative with backgrounds. They can be either images, or colors. The class .BackGroundSample uses a color. Here is the code for the style:

.BackgroundSample {
background-color: #CCCCFF;
padding-right: 3px;
padding-left: 3px;
color: #000000;
}

 

If you were to make a similar style, but with a different name, that used a background image, it would look like this:

.BackGroundCheckeer {
color: #000000;
background-image: url(images/checker.gif);
padding-top: 3px;
padding-left: 3px;
}

The image is named checker.gif and is in the images folder. The padding attribute is not necessary to make the background work. It is there only to make the text more easily read. An example of the background is here:

This line has the style .BackGroundCheckeer applied to it.

Background images can be used in several different ways. The following examples will each open in a new window.

Click here to see the background image applied to a table.

Click here to see the background image repeat only on the x-axis at the top.

Click here to see the background image repeat only on the y-axis on the left side.

Click here to see the background image displayed once at the center of the table. (It is a little hard to see, so look carefully).

Try experimenting a little! Here is the code for a basic page, it will open in a new window. Either copy and paste it into a new file with NotePad or save the page as princess9.htm.

Click here to open a copy of the background image check.gif. Save the image into the same folder as princess9.htm on your computer.

Open the file pricess9.htm in your browser. If you want to see what it should look like, click here.

Find the style that describes the body of the page. It is in the head section and looks like this:

body {
color: #000000;
background-image: url(checker.gif);
}

Now edit the style so that it looks like this:

body {
color: #000000;
background-image: url(checker.gif);
background-repeat: repeat-x;
}

The background image will appear only across the top. Now change the style to:

body {
color: #000000;
background-image: url(checker.gif);
background-repeat: repeat-y;
}

The image will be displayed on the left edge of the page. Edit the style again to:

body {
color: #000000;
background-image: url(checker.gif);
background-repeat: no-repeat;
background-position: 30% 30%;
}

The image will be shown only once (it doesn't repeat) and will be displayed 30% of the screen height from the top, and 40% of the screen width from the left.