page 1

Introduction In the older version of HTML, a lot of codes (especially the <FONT> tag) specifying the format of the content, for example the fonts of text in different parts, are needed. However, many of these codes are repetitive and therefore redundant and making the maintenance of web sites extremely tedious. You may imagine that you are the administrator of a web site of 10 pages (this is just a “small” web site) using a sans-serif font (e.g. Arial). One day, you are asked to change all fonts to a serif font (e.g. Times New Roman). In such case, you have to update every <FONT> tag in all 10 pages. In order to ease the job, one may want to separate the font from the page contents and store the common font style elsewhere. This part specifying the common font can therefore be applied to each web page. And as a result, you only need to change the font part whenever you need to update the fonts in all pages. The above example illustrates the basic concept of CSS (Cascading Style Sheet) - separating styles and content of HTML files. Not only fonts can be defined by CSS, many other visual attributes can also be defined by using CSS, for example margins and padding between two components, background properties of components. Basic HTML knowledge Before explaining how to define style rules, certain HTML knowledge have to be known in prior. 1. <DIV> and <SPAN> Tags: <DIV> and <SPAN> are two container tags (with start and end tags) enclosing certain part of a page content, no matter it is text, graphics or something else. However, these two tags have no effects on the enclosed part if their attributes are not set. Format:
<div>…</div> <span>…</span>

id: class: To be discussed later To be discussed later

Hello.<div>This is a test.</div>Test is finished. Hello.<span>This is a test.</span>Test is finished.

<DIV> is different from <SPAN>. <DIV>…</DIV> will form a paragraph but <SPAN>…</SPAN> will not. Therefore, <DIV> is called block-level container tag and <SPAN> is called an inline tag. Moreover, most of the HTML components, for example graphics, hyperlink, text and even <SPAN> container, can be included in a <DIV> container, but not all HTML components can be put into a <SPAN> container.


page 2

2. CLASS and ID Attributes Before explaining the way of defining the style rules, we have to understand two tag attributes, CLASS and ID. These two attributes are used to apply different style to page components. These two tags are common to all HTML tags and are mainly used in those tags within the page body, including <body> tag. Moreover, these two tags can be used together so that two different style rules can be applied to the same component. Format:
<tag_name class="class_name">…</tag_name> <tag_name class="class_name"/> <tag_name id="id_name">…</tag_name> <tag_name id="id_name"/> <tag_name id="id_name" class="class_name">…</tag_name> <tag_name id="id_name" class="class_name"/>

<body id="body_style">…</body> <h1 class="header1_style">…</h1> <hr id="sep_style"/> <p class="para_style" id="this_para_style">…</p>

Be careful that an ID must be unique within one page, but a class can be applied to different components within the same page. Defining Style Rules Many visual attributes of HTML components can be defined through CSS. These include the margin, border, padding, background, fonts and so on. In order to define the styles of certain components, style rules have to be set. All style rules follow the same format – a style name followed by a colon and then the style value and terminated by a colon.
Selector{ property1: value1; property2: value2; … propertyN: valueN; }

If a property can accept more than one parameter, say background, the values are separated by a space. For example, the rule "background: url("background.gif") repeat fixed" tiles and fixes “background.gif” in the background. One or more styles can be set within the same rule. All style rules follow the same format:


page 3

Here, the selector can be one of three types: a. A tag name: Format:
Tag_name{ property1: value1; … }

p { background-color: #CCCCCC; border-bottom: 1px dotted #FF0000; }


This rule will be applied on every text enclosed by <p></p> tag. A tag ID: Format:
#id{ property1: value1; … }

#content{ background: #FF0000; }

This rule will be applied to a component whose id is “content”. If the HTML file has the following segment:
<div>Hello1</div> <div id=”content”>Hello2</div>

“Hello1” will have no visual effect, but “Hello2” will have a red background. c. A class name: Format: i. .class_name{
Property1: value1; … } ii. tag_name.class_name{ Property1: value1; … }


page 4


#id.class_name{ Property1: value1; … }

i. .redText{ color: #FF0000; } ii. p.greenText{ color: #00FF00; } iii.#content.blueText{ color: #0000FF; }

If the content body has the following:
<p>Test 1</p> <p class=”redText”>Test 2</p> <div class=”redText”>Test3</div> <p class=”greenText”>Test4</p> <div class=”greenText”>Test 5</div> <p id=”content” class=”blueText”>Test 6</p>

In this case, the font color of different text will be:
Text Test 1 Test 2 Test 3 Test 4 Test 5 Test 6 Color

Applying Style Rules to Components In order to apply the defined style rules, we have to include them into the HTML file. We have different ways of doing so: 1. Inline Style: STYLE Attribute In HTML 4.0, every HTML tag has a STYLE attribute which defines the styles of its belonging tag. In this method, no selector is needed. Format:
<tag_name style="style1: value1;style2:value2;…">…</tag_name>


page 5

<div style="background-color: #FF0000; ">This is test 1.</div> <p style="background-color:#00FF00;border: 2px solid #0000FF"> This is test 2</p>

2. Internal Style Sheet: <STYLE> Tag Style rules can be defined in the <HEAD> tag by using the <STYLE> container tag. Format:
<STYLE type="text/css"> Rule1…; Rule2…; </STYLE>

<HEAD> <STYLE type="text/css"> <!-p{ background-color: #FF0000; color: #0000FF; } div{ padding: 10px; border: 1px dotted #00FF00; } --> </STYLE> </HEAD>


In the above example, the style sheet defined: 1. All paragraph (<p>) have a red background and blue fonts. 2. All <div> blocks have a 1 pixel dotted green border and 10 pixel padding. External Style Sheet: <LINK> tag In order to reuse a style sheet for many pages, and to ease the maintenance of styles, an external style sheet (whose extension is always “css”) may be used. We may include a CSS file by using <LINK> tag in the <HEAD> section. Format:
<link rel="stylesheet" type="text/css" href="CSS_file" />

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>


page 6


External Style Sheet: @import statement We may include CSS files by using the @import statement in the head section. Format:
<style type="text/css"> @import "file_location" </style>

One has to note that @import statement is not supported by the previous version of Netscape 4.X. However, this compatibility problem leads to another way of using CSS. We may use <LINK> tag and @import statement together so as to provide styles for an older version browser and a later version browser respectively. For example, we may have the following in the head section:
<head> <link rel="stylesheet" type="text/css" href="lofi.css" /> <style type="text/css"> @import "hifi.css" </style> </head>

In this example, older browser will apply “lofi.css” to the page because it cannot recognize the @import statement. However, a later browser will apply “hifi.css” on the page because the @import statement is written after the <LINK> tag. Style Sheet Cascade: If there is collision of properties in two or more style sheets, the latest defined or included one will take effects on the component. Otherwise, the style will be inherited from its parent. Example:
<head> <style type=”text/css”> body{ background-color: #FF0000; color: #00FF00; } .BlueText{ color: #0000FF; } </head> <body> <div>Test 1</div> <div class=”BlueText”>Test 2</div> <div style=”background-color: #FFFFFF;”>Test 3</div> </body>


page 7

In this case, the font and background colors of different text will be:
Text Test 1 Test 2 Test 3 Color

Background Color

Advantages of Using CSS 1. Reduce the HTML files size CSS drastically reduce the size of the website. After downloading CSS files, they can be used throughout the website. Reducing in file size results in faster download of the website and therefore reduce the required bandwidth. 2. Ease the maintenance of the styles in the website CSS makes it very easy to change the style of a document. When we want to change a certain style, what we have to do is open the respective CSS file and make corresponding changes. That will change his position throughout the whole site. The look and layout of a site can be changed beyond recognition just by altering the CSS file. This makes CSS indispensable for large web sites. 3. Increase website accessibility CSS can increase the website accessibility because the HTML content is independent of its style. The HTML content can be written in the way without CSS first and the styles are applied afterwards. For some text browsers or older version browsers that do not support CSS, they will ignore the <STYLE> tags and display the content correctly. 4. Maintain website consistency CSS helps to bring consistency throughout the website design. Designs that are used on a particular page can be easily used throughout the website design.

HTML File 1 Figure 1.

HTML File 2

HTML File 3

Different CSS files are shared among HTML files. Updating any one will result in changes in the appearance of its belonging HTML files


page 8


Result in a more accurate page description by search engine A search engine robot will normally consider the content in the start of html code is more important than the text towards the end of the code. For a table based page the contents of the navigation bar will normally show up as the page description in search engine results. With a CSS page the navigation can be moved to the bottom of the source code, so the search engine displays your content instead of your navigation.

What styles can be defined by CSS? Through CSS, we can define the color, background, box, display, font, text, positioning, list, table, printing (for print version) and aural (for audio browser) properties of HTML component. In this section, we will see what common styles can be defined by CSS. Background and Color Properties:
color: Purpose: Values: Specify the foreground color of an element. Color code (e.g. #FF0000) or mnemonics (e.g. red). Default value is

defined by browser. background-attachment: Purpose: scrolls. Values: Purpose: Values: Purpose: Values: Purpose: Values: right scroll (default)| fixed Specify the background color of an element. Color code or mnemonics. Default value is transparent. Insert a graphic in an element’s background. Location of background image, defined by url("file_path_name"). Define the position of a graphic in an element’s background. 1. top left | top center | right top | left center | center | right center | bottom left | bottom center | bottom background-color: Define whether the background image is fixed in the viewport or



3. Default: Purpose: Values:

<dist_%_from_the_left> < dist_%_from_the_top> <length_from_the_left> <length_from_the_top>

0% 0% Specify whether the background image is tiled. repeat-x | repeat-y | repeat (default) | no-repeat



page 9

background: Purpose: A combined method for the above background properties. Example: background: url(“background.gif”) repeat fixed;

Box Properties: border-color:
Purpose: Values: Define border color. Color code or mnemonics. If one value is provided, it applies to all four borders. If two: the first will apply to the top and bottom the second to left and right. If three: top, right and left, bottom If four: top, right, bottom, left Default: The value of the color property. Example: border-color: #FF0000 #00FF00 #0000FF; border-{bottom | left | right | top}-color: Purpose: Values: Purpose: Value: Specify a border side color. Same as border-color. Specify the border style. none (default), hidden, dotted, solid, double, groove,


ridge, inset, outset.

border-{bottom | left | right | top}-style:
Purpose: Values: Purpose: Values: Default: Purpose: Values: border: Purpose: A combined method for the above border properties. Example: border: 1pt dotted blue; Specify a border side style. Same as border-style. Specify the width of borders. Width of borders measured in different units. middle Specify the width of a border. Same as border-width.


border-{bottom | left | right | top}-width:

border-{bottom | left | right | top}:
Purpose: A combined method for the above border properties. Example: border-left: 2pt solid red;


page 10

height, width:
Purpose: Values: Note: Purpose: Values: Note: margin: Purpose: Values: Purpose: Values: Default: padding: Purpose: Values: Purpose: Values: Default: Specify the padding side width. Widths for border-top, border-right, border-bottom, and border-left Specify one padding side width. <length> | <percentage> | auto 0 Specify the margin side width. Widths for margin-top, margin-right, margin-bottom, and margin-left Specify one margin side width. <length> | <percentage> | auto 0 Specify the height and width of an element. <length> | <percentage> | auto (default) This style can be only used in block and inline-block. Specify the minimum / maximum height and width of an element. <length> | <percentage> | auto (default) These styles are not applicable in Internet Explorer.

min-height/max-height, min-width/max-width:

margin-{bottom | left | right | top}:

padding-{bottom | left | right | top}:

Element Content
Padding Margin


Figure 2. Difference between margin and padding.


page 11

Display Properties:
cursor: Purpose: Values: Default: display: Purpose: Values: Specify the rendering class in which this element belongs. inline | block | list-item | run-in | inline-block | table tableDefine the mouse pointer appearance while over an element. <url> | auto | crosshair | default | pointer | move | auto

{e|ne|nw|n|se|sw|s|w}-resize | text | wait | help | progress

| inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | column | table-cell | table-caption | none. Default: overflow: Purpose: Values: Default: Note: Specify whether content should be clipped when it overflows its container. visible | hidden | scroll | auto visible scroll should result in a scrollbar regardless of whether the content overflows. inline

auto is browser-defined.

Font Properties: font-family:
Purpose: Values: Default: Note: a comma. font-size: Purpose: Values: Default: font-style: Purpose: Values: Default: Specify the face for the current font. normal | italic | oblique normal Specify a font size. <length> | <percentage> | xx-small | x-small | small | medium medium Define preferred font and fallbacks. family or generic (serif, sans-serif, cursive, fantasy, Determined by browser In order to define a list of fonts for fallbacks, font / generic names are delimited by

monospace) Example: {font-family: Times New Roman, sans-serif;}

| large | x-large | xx-large | larger | smaller


page 12

font-variant: Purpose: Values: Default: font-weight: Purpose: Values: Default: font: Purpose: Values: Default: A combined method of the above font properties. Values for these properties: font-style, font-variant, font-weight, Depends on individual properties. Determine weight (boldness) normal | bold | bolder | lighter | 100 (lightest) | 200 | 300 normal Allow for a small capital font normal | small-caps normal

| 400 (equivalent to normal) | 500 | 600 | 700 (equivalent to bold) | 800 | 900 (darkest)

line-height, and font=family Example: {font: 14px Arial, Helvetica, sans-serif bold}

Text Properties:
direction: Purpose: Values: Default: Define the direction (right to left, or left to right) of the contained text. ltr | rtl ltr Specify the distance between the baselines of each line of text in an element. normal | <number> (multiple of the font-height) | <length> normal

Purpose: Values: Default:

| <percentage> (of the font-height) Example: {line-height: 2.5;} is equivalent to {line-height: 250%;} letter-spacing, word-spacing: Purpose: Values: Default: text-align: Purpose: Values: Default: Control horizontal alignment of inline content left | right | center | justify left (unless direction is rtl) Add to the default spacing between characters (letter-spacing) or words normal | <length> normal (word-spacing).

Applied to: Block elements


page 13

text-decoration: Purpose: Values: Default: text-indent: Purpose: Values: Default: Indent the first line of text. <length> | <percentage> 0 Add decorations (such as strikethrough) to text. none | underline | overline | line-through | blink none

Applied to: Block elements text-transform: Purpose: Values: Default: Note: white-space: Purpose: Values: Default: Purpose: Values: Default: Control white space handling. normal | pre | nowrap | pre-wrap | pre-line normal Control the vertical position of an element relative to the current text baseline. baseline | middle | sub | super | text-top | text-bottom baseline Change case. capitalize | uppercase | lowercase | none none The capitalize value will only transform the first character of each word. Both

uppercase and lowercase affect all characters.


Positioning Properties:
bottom, left, right, top: Purpose: Values: Default: Note: clear: Purpose: Values: Default: float: Purpose: Values: Default: Float an element to the left or right, allowing text to flow around it to the other side. none | left | right none Declare whether an element will forbid floating elements to either side.. none | left | right none Specify an offset from one edge of a positioned element’s reference box.. <length> | <percentage> | auto auto A positioned element is one whose position property is defined to something

other than the default, static.


page 14

position: Purpose: Determines whether an element flows with the text (static), occupies a fixed position (absolute or fixed), or is offset from the position it would occupy were it static (relative). Values: Default: Note: z-index: Purpose: Values: Default: Note: the back. Specify the position of an element in a three-dimensional stack (back to front) auto | <integer> auto z-index is usually used when boxes may overlap. Smaller numbers are placed at static | relative | absolute | fixed inline A fixed element will not scroll but an absolute element will.

Applied to: positioned element

List Properties: list-style-image:
Purpose: Values: Default: Replace the bullet in an unordered list with a graphic. <url> | none none

Applied to: Elements with display: list-item list-style-position: Purpose: Values: Default: Place the list-item marker (bullet or number) relative to the content. inside (the content box) | outside (same) outside

Applied to: Elements with display: list-item list-style-type: Purpose: Values: Specify the marker style disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-latin/upper-alpha | upper-latin/upper-alpha | lower-greek | Georgian | armenian Default: list-style: Purpose: Values: A combined method of the above list properties. Values for list-style-type, list-style-position, Depends on the list type Applied to: Elements with display: list-item

list-style-image Example: {list-style: upper-roman inside;} Applied to: Elements with display: list-item

Sign up to vote on this title
UsefulNot useful