Notes 9

Notes 9
— print (last updated: Jul 6, 2009) — print

Box Borders

The appearance or creation of a box's border is controlled by these attributes:

border-style,
border-left-style, border-right-style, border-top-style, border-bottom-style
border-width,
border-left-width, border-right-width, border-top-width, border-bottom-width
border-color,
border-left-color, border-right-color, border-top-color, border-bottom-color
border,
border-left, border-right, border-top, border-bottom

To specify the entire border or some portion of the border (left, right, top, bottom) you need to specify three values:

-style, -width, -color

Border Style

The -style properties are specified with one of these values:

dotted, dashed, solid, double, groove, ridge, inset, outset

Border Width

The -width properties can be any length specified by any measurement specification or can be one of these values:

thin, thick, medium

Border Color

The -color properties can be any color specification.

Complete Border Specification

For example, these 3 declarations specify the entire border (all 4 sides) as (solid, thin, black):

border-style: solid; border-width: thin; border-color: black;

It is common practice to simplify this construction using the border property with which we can specify all three values in one declaration:

border: solid thin black;

Analogously, this group of declarations:

border-left-style: solid; 
border-left-width: thin; 
border-left-color: black;

is equivalent to this one declaration

border-left: solid thin black;

The border-width can be used to specify the width on all four sides clockwise from the top, such as this:

border-width: 1px 2px 3px 4px;

is equivalent to the four specifications:

border-top-width:    1px;
border-right-width:  2px;
border-bottom-width: 3px;
border-left-width:   4px;

Here are some examples

<div style="border: solid thin black; width:200px">
Here is my text.
</div>

Here is my text.

<div style="border-style: ridge; border-color: red; border-width: 0px 0px 8px 4px">
Here is my text.
</div>

Here is my text.

<img src="small-butterfly.jpg" style="border: groove 5px #CC6600" />

Style-generated table lines

For example, we can create red line borders within a table using the following style rules:

table.redlines { border: solid 1px red; }
table.redlines td {
  border: solid 1px red;
  padding: 10px;
}

When applied to this table:

<table class="redlines">
<tr><td colspan="2">A</td></tr>
<tr>
<td>B</td> <td>C</td>
</tr>
</table>

we get this result:

A
B	C

This example illustrates that the default cellspacing setting of the table is not 0. If we do set it to 0 in the following modified table:

<table cellspacing="0" class="redlines">
<tr><td colspan="2">A</td></tr>
<tr>
<td>B</td> <td>C</td>
</tr>
</table>

yields the result:

A
B	C

The result that we effectively double the given line thickness in order to achieve single lines. If you really want the single border (not doubled), you have to limit the border specifications in the style rules, something like this:

table.redlines1 { 
  border-top: solid 1px red; 
  border-right: solid 1px red; 
}
table.redlines1 td {
  border-left: solid 1px red;
  border-bottom: solid 1px red;
  padding: 10px;
}

When applied to this table:

<table cellspacing="0" class="redlines1">
<tr><td colspan="2">A</td></tr>
<tr>
<td>B</td> <td>C</td>
</tr>
</table>

we get this result:

A
B	C

Background Images

The basic three layers of HTML content are these:

Background color layer: the backmost layer
Background image layer: the middle layer
Foreground content layer: the frontmost layer

The color and background-color properties create the appearance for the foreground content (e.g., the text) and background color layers, respectively.

In addition to background colors, background images are common. Some consider them superior to background colors because it give the page a textured as opposed to flat appearance. Background images are typically repeatable in that adjacent copies of the image appear to be somehow extending the full image.

background-image: a graphics file using the following syntax:

background-image: url( GRAPHICS_FILE_OR_HYPERLINK_TO_ONE );

background-repeat: repeat (the default), no-repeat, repeat-x, repeat-y, inherit
background-position: combinations of (left, right) and (top, bottom, center) such as left center, center, etc.
background-attachment: scroll, fixed

Body background image examples

Below we will show the effects of the background style settings on the body element. Suppose we have an HTML document whose body contains 15 repeats of these lines:

<h3>Hello There</h3>
<hr />

Here are some variations of background image usage:

Start with the following style rule which sets the background and foreground colors:
```
body {
   color: red; 
   background-color: #cc33ff; 
}
```
This style rule would create the following effect.
Now we add a background image. For that we'll use the file paper.gif which looks like this:

A typical thing to do is to repeat the background image over the entire page, thus covering up the background color, if any. Suppose we use modify the body rule, adding a new property:
```
body {
   color: red; 
   background-color: #cc33ff; 
   background-image: url( 'paper.gif' );  /* quotes not necessary here */
}
```
This would create the following effect.
The image is repeated both horizontally (repeat-x) and vertically (repeat-y) thereby completely covering up the background color. It is mentioned that the quotes aren't really necessary. The only time they are necessary is if the file name you're referencing has embedded blanks.

To control repeating you have to set background-repeat to something. Here is one possibility:

body {
   color: red; 
   background-color: #cc33ff; 
   background-image: url( 'paper.gif' );
   background-repeat: repeat-y;
}

This would create the following effect.

A non-repeating image is useful in certain circumstances. In that case we typically want to use the background-position attribute. Consider the following "logo" image, obnoxious-reminder.gif, that I want to plaster on my page in the top, right corner:

I would use this code:
```
body {
   color: red; 
   background-color: #cc33ff; 
   background-image: url( 'obnoxious-reminder.gif' );
   background-repeat: no-repeat;
   background-position: top right;
}
```
This would create the following effect.
With a single non-repeated image, it may also be desirable to keep it always present, even if the user scrolls down the page. To control that feature, use the background-attachment property:
```
body {
   color: red; 
   background-color: #cc33ff; 
   background-image: url( 'obnoxious-reminder.gif' );
   background-repeat: no-repeat;
   background-position: top right;
   background-attachment: fixed;
}
```
This would create the following effect.
Scroll the document vertically to see the difference between this one and the previous one.

Background images for other elements

Background images are commonly used for the entire body of the document but can, like background color, be used for any element. For example, using these style rules

.paperbg { background-image: url( 'paper.gif' ); }
.padd5   { padding: 5px; }

applied to

Here's a 
<span class="paperbg padd5">span with paper background</span> 
and
<p class="paperbg padd5" style="width:100px">
an entire paragraph with paper background
</p>

we get:

Here's a span with paper background and

an entire paragraph with paper background

We can add background images and borders to an image to create the effect of a matted, framed picture. Add the style rule:

div.matwith { 
  padding: 20px;
  width: 120px;  /* must be target image width */
  border: groove 5px #CC6600;
}

and apply this and the above to the HTML element:

<div class="matwith paperbg"><img src="small-butterfly.jpg" /></div>

We get this result

The one "trick" here is that the width specified by div.matwith must be equal to the image's width.

Style properties common to images

Images in HTML are actually treated as inline content in HTML, but they do have properties more common to block elements. Consider this paragraph:

Here is an example of an image
<img style="margin:20px" src="small-butterfly.jpg" />
integrated into text. If we try the same thing with
<span style="margin:20px;background-color:yellow">THIS SPAN</span>
we see that the margins are rendered differently.

It is rendered as follows:

Here is an example of an image

integrated into text. If we try the same thing with THIS SPAN we see that the margins are rendered differently.

Floating Images and Boxes

A floating box is an HTML element which integrates within surrounding text by allowing the surrounding text to wrap around it. The style property is this:

float: left or right.

For example, the small butterfly image usage to the immediate right is floating. This is accomplished by placing the image before the text in this section with the float property set to right:

<img style="float:right" src="small-butterfly.jpg" />

Observe what happens when you resize the browser. Additionally, one can use the style property

clear: left or right

to force the text to stop wrapping around and start into a new block.

Without CSS, images are floated by defining the align attribute to one of the values left or right.

Keep in mind that any element whatsoever can be floated in the same manner as an image, it's just that the usage with images is more common. In contrast, for other elements, setting the align attribute does not cause this floating effect!

Pseudoclass specifications

The last addition to the CSS selector is a pseudo-class property which is used in one of these ways:

element:pseudo-class { ... }
.class_name:pseudo-class { ... }
element.class_name:pseudo-class { ... }
:pseudo-class { ... }

These pseudo-class properties are few and quite specific. They are used to specify properties of the element which are dependent not just on the content of the element, but the state of the browser (such as its width, mouse position, etc.) It's easiest to understand through the examples.

Pseudo-class specifications for hyperlinks

Perhaps the most common usage of psuedo-class properties is with the hyperlink (a) element. It has the psuedo-class properties:

a:link: style properties for all hyperlinks which haven't been visited
a:visited: style properties for all hyperlinks when the hyperlink has been visited
a:hover: style properties for all hyperlinks when the mouse is over the hyperlink

The hover rule must be last to ensure that the desired style change takes effect when unvisited or visited.

If, for example, we want all hyperlinks in our document to behave in a certain way we might use these specifications:

a:link { color: green; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }
a:hover { text-decoration: underline; color: magenta; }

To restrict the behavior to only certain specified hyperlinks, we would combine the class specification like this:

a.special:link { color: green; text-decoration: none; }
a.special:visited { color: blue; text-decoration: none; }
a.special:hover { text-decoration: underline; color: magenta; }

When these latter rules are applied to the hyperlink:

<a class="special" href="http://www.yahoo.com">Yahoo</a>

the result is this:

Yahoo

If you use the background-color as a variation, you can create simple rollover-like effects with these psuedo-class properties. For example, given these rule specifications:

a.rollover {
  text-decoration: none;
  color: white;
  background-color: red;
  border: solid 4px yellow;
  padding: 2px 8px 2px 8px;
}
a.rollover:hover {
  text-decoration: none;
  color: white;
  background-color: black;
  border-color: purple;
}

applied to:

<a class="rollover" href="http://www.yahoo.com">Yahoo</a>

the effect is this:

Yahoo

You can't get too carried away with this construction for a number of reasons. Ultimately, the results are more consistent if you create button-like hyperlinks with images.

Other psuedo-class examples

Other examples of a psuedo-class properties are first-letter and first-line as indicated in these examples. Suppose we have defined the following rules:

p.special:first-letter { font-weight: bold; font-size: 200% }
p.intro:first-line { text-transform: uppercase; }

Then the following HTML code

<p class="special">
Long ago and far away, there lived a young man ...
</p>

<p class="intro">
The main point about this lecture is to understand how to use the 
Cascading Style Sheets. The syntax of these is relatively simple, but
they can be used to make many different changes.
</p>

would look like this:

Long ago and far away, there lived a young man ...

The main point about this lecture is to understand how to use the Cascading Style Sheets. The syntax of these is relatively simple, but they can be used to make many different changes.

The effect of the ":first-letter" pseudo-class property could be achieved by regular style properties alone, acting on the first letter; this is simply more convenient. In contrast, the effect of the ":first-line" pseudo-class property depends on the width of the browser to dictate exactly which portion of the paragraph should be transformed to upper case.

Absolutely positioned block-level elements

When you use block-level elements the browser normally lays them out with respect to the current position of the text. This is called the normal flow. Floating boxes are an example of elements which don't exactly follow this rule.

We can explicitly control the positioning feature of elements with the position property whose values are these

static: this is the default, the normal flow
absolute: the position is specified by a combination of the top, left, right and bottom values
fixed: like absolute except the boxes do not move when the page is scrolled.
relative: position is calculated with respect to the normal flow

Here is an example using absolute positioning. Suppose we use these style rules:

div.box { 
  position: absolute;
  width: 150px; height: 150px;
  border: solid thin black;
}

div.yellow { 
  background-color: yellow;
  top: 50px; left: 50px;
}

div.blue { 
  background-color: blue;
  top: 100px; left: 100px;
}

div.title { 
  position: absolute;
  top: 110px; left: 20px;
  color: magenta;
  font-weight: bold;
  font-size: 300%;
}

And they are used like this:

<div class="yellow box"></div>
<div class="blue box"></div>
<div class="title">This is my title</div>

with the following resulting web page.

With absolute positioning one is able to create overlapping boxes. In this case the overlap order is determined by the order in which the boxes appear in the HTML document. However, if we place the boxes are generated in a different order like this:

<div class="title">This is my title</div>
<div class="blue box"></div>
<div class="yellow box"></div>

we get the following resulting web page.

z-index

To avoid getting the order right, we can use the z-index property to set the overlapping order. The z-index property has integer values; the greater the z-index value, the higher it will be on the overlapping order. And so the fix is this:

<div class="title" style="z-index:2">This is my title</div>
<div class="blue box" style="z-index:1"></div>
<div class="yellow box" style="z-index:0"></div>

as can be seen in the following resulting web page.

List Style Properties

The most commonly used property for lists is list-style-type which applies to ul and ol elements equally to set the list marker symbol. Its values are these:

none, disc, circle, square,
decimal, decimal-leading-zero,
lower-alpha, upper-alpha,
lower-roman, upper-roman,
lower-latin, upper-latin, 
... (other less common language choices)

When this style property is used the choice of ol or ul is irrelevant

It has been mentioned that the attributes type and start attributes can be used to control the marker symbol. Both of these are considered deprecated but I know of no way to set the start value for ordered lists using style properties.

Here are some examples:

Using the value square:

<ol style="list-style-type: square">
  <li>x</li>
  <li>y</li>
  <li>z</li>
</ol>

The value lower-alpha:

<ol style="list-style-type: lower-alpha">
  <li>xxx</li>
  <li>yyy</li>
  <li>zzz</li>
</ol>

The value upper-roman and setting the start attribute:

<ol style="list-style-type: upper-roman" start="3">
  <li>xxx</li>
  <li>yyy</li>
  <li>zzz</li>
</ol>

The list-style-position property

The list-style-position property allows the positioning of the list marker symbol relative to the li element's block. Its values are

outside, inside, inherit

Here is a simple example:

List 1: the default value of <tt>list-style-position</tt> is <tt>outside</tt>:
<ol>
  <li>I have to generate at least<br />
       two lines for you to see the effect
  </li>
  <li>something else</li>
</ol>
List 2: here we use the value <tt>inside</tt>:
<ol style="list-style-position: inside">
  <li>I have to generate at least<br />
      two lines for you to see the effect
  </li>
  <li>something else</li>
</ol>

which has this appearance:

List 1: the default value of list-style-position is outside:

I have to generate at least
two lines for you to see the effect
something else

List 2: here we use the value inside:

I have to generate at least
two lines for you to see the effect
something else

The list-style-image property

The marker symbol for lists can be replaced by an image of your choice using the list-style-image property whose values are these:

a URL to some image file, none, inherit

Here is an example using the fllowing image file blueballdot.gif (

) stored in the same directory.

<ul style="list-style-image: url(blueballdot.gif)">
  <li>xxx</li>
  <li>yyy</li>
  <li>zzz</li>
</ul>

Its appearance is this:

Notes 9 — print (last updated: Jul 6, 2009) — print