IST263: Lecture 8.

Cascading Style Sheets (cont-ed.).

Background and Color Properties

Color

The property color allows authors to specify the color of an element. This property can take any predefined values (white, blue, etc) as far as RGB indexes. For example:

Code	Result
<span style="color:darkblue;">Sample.Sample.Sample.</span>	Sample.Sample.Sample.

Background Color

The background-color property sets the background color of an element. For example:

Code	Result
<span style="background-color:#98f4f4;">Sample.Sample.Sample.</span>	Sample.Sample.Sample.

Background Image

The background-image property sets the background image of an element. For example:

Code	Result
<style> .back { background-image:url(img/prairie_s.bmp); color:white; background-color:#0a2e68; } </style> ... <div class=back> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Code

Result

<style>
 .back {
   background-image:url(img/prairie_s.bmp);  color:white;  background-color:#0a2e68;
 }
</style>  
...
<div class=back>
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.  
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

When a background image is defined, a similar background color should also be defined for those not loading images.

Background Repeat

The background-repeat property determines how a specified background image is repeated. This property can take one of the following values:

repeat allows to repeat the background image if the image is smaller than the element (default value)
repeat-x allows repeat the image only horizontally
repeat-y allows repeat the image only vertically
no-repeat does not allow to repeat the image

Code	Result
<style> .back { background-image:url(img/prairie_s.bmp); color:yellow; background-repeat: repeat-x; } </style> ... <div class=back> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<style> .back { background-image:url(http://ist.marshall.edu/images/excl.gif); color:yellow; background-repeat: no-repeat; } </style> ... <div class=back> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Code

Result

<style>
 .back {
   background-image:url(img/prairie_s.bmp);  color:yellow;  
   background-repeat: repeat-x;
 }
</style>  
...
<div class=back>
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.  
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

<style>
 .back {
   background-image:url(http://ist.marshall.edu/images/excl.gif);  color:yellow;  
   background-repeat: no-repeat;
 }
</style>  
...
<div class=back>
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.  
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

In these examples background-color was removed to emphasize the absence of the background image.

Background Attachment

The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. This property can be either set to fixed or scroll (default value). For example, the following specifies a fixed background image:

Code	Result
<style> .back { background-image:url(../images/warning.gif); background-repeat: repeat-x; background-attachment: fixed; } </style> ... <div class=back> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Code

Result

<style>
 .back {
   background-image:url(../images/warning.gif);    
   background-repeat: repeat-x;
   background-attachment: fixed;
 }
</style>  
...
<div class=back>
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.  
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Background Position

The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)

The easiest way to assign a background position is with keywords:

Horizontal keywords (left, center, right)
Vertical keywords (top, center, bottom)

Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.

If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

Code Result

<style> .back { background-image:url(../images/warning.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: right center; } </style> ... <div class=back> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Code	Result
<style> .back { background-image:url(../images/warning.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: right center; } </style> ... <div class=back> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Background

The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:

 BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
 BLOCKQUOTE { background: #7fffd4 }
 P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
 TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to left top.

Text Properties

Word Spacing

The word-spacing property defines an additional amount of space between words. The value must be either normal or in the length format; negative values are permitted.

Code	Result
<div style="word-spacing:normal;"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="word-spacing:8px;"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="word-spacing:-4px;"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Code

Result

<div style="word-spacing:normal;">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

<div style="word-spacing:8px;">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

<div style="word-spacing:-4px;">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Letter Spacing

The letter-spacing property defines an additional amount of space between characters. The value must be either normal or in the length format; negative values are permitted.

Code	Result
<div style="letter-spacing:normal"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="letter-spacing:3px;"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="letter-spacing:-2px"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Code

Result

<div style="letter-spacing:normal">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

<div style="letter-spacing:3px;">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

<div style="letter-spacing:-2px">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Text Decoration

The text-decoration property allows text to be decorated through one of five properties:

underline,

overline,

line-through,

blink (doesn't work with IE),

or the default, none.

Code	Result
<div style="text-decoration:underline"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="text-decoration:line-through"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Code

Result

<div style="text-decoration:underline">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

<div style="text-decoration:line-through">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Text Transformation

The text-transform property allows text to be transformed by one of four properties:

capitalize (capitalizes first character of each word)

uppercase (capitalizes all characters of each word)

lowercase (uses small letters for all characters of each word)

none (the initial value)

Code	Result
<div style="text-transform:lowercase"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Text Alignment

The text-align property can be applied to block-level elements (P, H1, etc.) to give the alignment of the element's text. It cane take the following values:

left

right

center

justify

Code	Result
<div style="text-align:right"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="text-align:justify"> The `text-align` property can be applied to block-level elements (`P`, `H1`, etc.) to give the alignment of the element's text. It cane take the following values: </div>	The `text-align` property can be applied to block-level elements (`P`, `H1`, etc.) to give the alignment of the element's text. It cane take the following values:

Code

Result

<div style="text-align:right">
  Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
</div>

Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

<div style="text-align:justify">
  The text-align property can be applied to block-level elements (P, H1, etc.) to give 
the alignment of the element's text. It cane take the following values:
</div>

The text-align property can be applied to block-level elements (P, H1, etc.) to give the alignment of the element's text. It cane take the following values:

Vertical Alignment

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

baseline (align baselines of element and parent)

middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)

sub (subscript)

super (superscript)

text-top (align tops of element and parent's font)

text-bottom (align bottoms of element and parent's font)
The keywords affecting the positioning relative to the element's line are

top (align top of element with tallest element on the line)

bottom (align bottom of element with lowest element on the line)

Code	Result
<div style="font-size:250%"> Sample. Sample. <span style="font-size:30%;">index</span> Sample. Sample. </div>	Sample. Sample. index Sample. Sample.
<div style="font-size:250%"> Sample. Sample. <span style="font-size:30%; vertical-align:middle;">index</span> Sample. Sample. </div>	Sample. Sample. index Sample. Sample.
<div style="font-size:250%"> Sample. Sample. <span style="font-size:30%; vertical-align:top;">index</span> Sample. Sample. </div>	Sample. Sample. index Sample. Sample.

Code

Result

<div style="font-size:250%">
 Sample. Sample. 
 <span style="font-size:30%;">index</span> 
 Sample. Sample. 
</div>

Sample. Sample. index Sample. Sample.

<div style="font-size:250%">
 Sample. Sample. 
 <span style="font-size:30%; vertical-align:middle;">index</span> 
 Sample. Sample. 
</div>

Sample. Sample. index Sample. Sample.

<div style="font-size:250%">
 Sample. Sample. 
 <span style="font-size:30%; vertical-align:top;">index</span> 
 Sample. Sample. 
</div>

Sample. Sample. index Sample. Sample.

Text Indentation

The text-indent property can be applied to block-level elements (P, H1, etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph.

Code	Result
<div style="text-indent:10%;"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Line Height

The line-height property will accept a value to control the spacing between baselines of text. It can be either normal or a number, or a length, or percentage. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Code	Result
<div style="line-height:normal"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="line-height:150%"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="line-height:12px"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.
<div style="line-height:4"> Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. </div>	Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample. Sample.

Follow this link and you'll find a tool that allow you to experiment with CSS.