Back to ICS415 Main

 

Topic Note 4 CSS Revised

 

Contents

 

1. CSS - Text Properties Overview

1.0 Overview
1.1 Table Property summary

2. Unit - URL

2.0 Overview
2.1 Tag
2.2 Code Example
2.3 Output Example
2.4 Description

 

CSS - Text Properties Overview
Back to top

Overview

Text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more. There are three way to embed CSS into HTML code: External Style Sheets, Local Style Sheets, and Inline Style Specification.

Inline Style Specification

For example, if you want to change a color for the sentence encircled by <P> tag and center the sentence, you can just specify the color in <P> using STYLE="".

<P STYLE="color: #000099; text-align: center">Style Sheet</P>

 

Local Style Sheets

You can also define the style in the <STYLE> tag in the <HEAD> tag.

<STYLE TYPE="text/css">
  <!--
    P { color: #000099; text-align: center }
  -->
</STYLE>

Then, you can just encircle the target sentence with <P>.

<P>Style Sheet</P>

 

External Style Sheets

The third ways is to refer the external CSS file in which <P> tag is defined. For instance, externalSytleSheet.css defines the <P> tag.

------ externalStyleSheet.css begin -------

P { color: #000099; text-align: center }

------ externalStyleSheet.css end ---------

Then the external CSS is referred in the <HEAD> tag.

<LINK REL="stylesheet" HREF="externalStyleSheet.css" TYPE="text/css">

Finally, you can just encircle the target sentence with <P>.

<P>Style Sheets</P>

Using either three ways above, we can get exactly the same result:

 

Style Sheets

The overview of each property is in the following table:

 

Table Property Summary

Properties
Description & Example
Possible Value
IE
NN
W3C
color Sets the color of the text color
(ex: #000000)
3.0
4.0
CSS1
p { color: #000000 }
(ex: Displays the paragraph text in orange)
letter-spacing Increases or decreases the space between characters normal
(normal space)
length
(ex: 12px)
4.0
6.0
CSS1
p { letter-spacing: 12px }
(ex: Prevents any extra space from being added between letters in a paragraph)
text-align Aligns the text in an element

 left
right
center
justify
4.0
4.0
CSS1
H3 { text-align: center }
(ex: Centers all level three headlines)
text-decoration Adds decoration to text none
(normal text)
underline
overline
line-though
blink
(blinking text)
4.0
4.0
CSS1
H1 { text-decoration: blink }
(ex: Make all level one headlines blink. We don't recommend that you use blink at all! (and apparently, neither does Microsoft, which doesn't support it.) )
text-indent Indents the first line of text in an element length
(ex: 20px)
%
(ex: 80%)
4.0
4.0
CSS1
p { text-indent: 20px }
(ex: Indents the first line of the paragraph 20 px spaces)
text-transform Controls the letters in an element
 none
capitalize
uppercase
lowercase
4.0
4.0
CSS1
p { text-transform: capitalize }
(ex: Capitalizes the first character of each word in the paragraph)
white-space Sets how white space inside an element is handled normal
(White-space is ignored)
pre
(like the <pre> tag)
nowrap
5.5
4.0
CSS1
p { white-space: nowrap }
(ex: The paragraph will break only with a specific <br> tag)
word-spacing Increases or decreases the space between words normal
length
(ex: 1pt)
6.0
6.0
CSS1
p { word-spacing:1pt }
(ex: Puts an extra 1 point of space between each word in the paragraph)

 

Units - URL

 Back to top

Overview

A URL value is given by url(actualUrl), where actualUrl is, for example, http://www2.hawaii.edu/~takuyay/myPicture.gif. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

 

BODY { background-image: url(myPicture.gif) }

BODY { background-image: url(http://www2.hawaii.edu/~takuyay/myPicture.gif) }

BODY { background-image: url( myPicture.gif ) }

BODY { background-imgae: url('myPicture.gif') }

BODY { background-imgae: url("myPicture.gif") }

 

Tag

url

 

Code Example

In the <HEAD> tag :

<STYLE TYPE="TEXT/CSS">
  <!--
    .urlExample { background-image:     url(image/assign3/myPicture.gif)}
  -->
</STYLE>

In the <TD> tag of the <TABLE> tag :

<TD COLSPAN="2" CLASS="urlExample" HEIGHT="87">
  <DIV ALIGN="CENTER">This is the URL example.</DIV>
</TD>

 

Output Example

This is the URL example.

Description

In the code example, the style sheet for the backgroud is defined, using url. You can also define the this property in the separate CSS file so that you can import the file, using <LINK> tag. For instance, <LINK REL="stylesheet" HREF="../yourStyleSheetName.css" TYPE="text/css">. After describing that in the head tag, you can write the tag wherever you wan to insert. In the example, the code is inserted in the <TR> tag of the <Table> so that the output looks the above.

 

 
© 2002 TAKUYA YAMASHITA ALL RIGHTS RESERVED
Back to top