STYLE SHEETS 1

<< TAG ATTRIBUTES, SOUNDS FILES, ANIMATIONS

STYLE SHEETS 2 >>

E-COMMERCE IT430

Lesson 10

STYLE SHEETS

Suppose you want all headings to appear in a 24-point font but the first one to appear in a

40-point font. For that you can use in line style for 40pt font heading.

Example <HTML> <head> <style> h1 {font-size:24pt; Color:Blue} </style> </head> <body> <h1

style="font-size:40pt;Color:red">This heading has font-size 40-point</h1> <h1>This heading has 24-

point font-size</h1> </body></html>

Result is shown in Fig. 1 below.

Fig. 1

Applying a style to a section <DIV> tag is used to divide a page into separate sections. Browser inserts a

line break before the <DIV> tag and after the </DIV> end tag. By including the "style" attribute inside

the <DIV> tag, one can apply an inline style to everything inside <DIV> and </DIV> tags.

Example - <DIV> tag

<HTML>

<body>

<h1>This heading uses a 30-point font</h1>

This sentence will have 30-point font

<h2>This heading, too</h2>

</DIV>

</body></html>

E-COMMERCE IT430

Result is shown in Fig. 2 below.

Fig. 2

Applying a style to a word or phrase Use <SPAN> and </SPAN> and insert the style attribute inside the

<SPAN> tag. <SPAN> tag does not provide any line break. Example <HTML> <body> <h1> This

<Span style="font-size:40pt">heading </Span> has font-size 40-point </h1> </body> </HTML>

Result is shown in Fig. 3 below.

Fig. 3

Method # 4: style classes

They are used when you want to apply a specific style to a number of different tags and sections throughout

the document. Set up a style class within the <style> tag or within an external style sheet file, e.g;

Classname {style definitions go here}. Add a "class" attribute to the tags you want the styles applied to and

put it equal to classname (without the dot).

Example style classes <HTML> <HEAD><TITLE>Style Sheets: Style Classes</TITLE> </HEAD>

<STYLE> <!--.Text1{font-size: 20pt;color:red;text-align:center} .Text2{font-size: 16pt;color:green;text-

align:center} --> </STYLE> <BODY> <DIV CLASS="Text1"><h1>This text is in red</h1></DIV>

<DIV CLASS="Text2"><h2>This text is in green</h2></DIV> </BODY> </HTML>

Result is shown in Fig. 4 below.

Fig. 4

E-COMMERCE IT430

Using styles to control fonts

<HTML>

<HEAD>

<TITLE>Style Sheets: Font Sizes</TITLE>

</HEAD>

<BODY>

Our store offers books on following subjects:<br>

<SPAN

STYLE="font-size:

xx-small">Physics</SPAN>,

<SPAN

STYLE="font-size:

small">Math</SPAN>, <SPAN STYLE="font-size: small">Computer Science</SPAN>, <SPAN

STYLE="font-size:

medium">Literature</SPAN>,

<SPAN

STYLE="font-size:

large">E-

commerce</SPAN>,

<SPAN

STYLE="font-size:

x-large">History</SPAN>

and<SPAN

STYLE="font-size: xx-large">Islam</SPAN> <br> You can also buy <SPAN STYLE="font-size:

smaller">DVDs</SPAN> and <SPAN STYLE="font-size: larger">music CDs</SPAN>. <br> We

offer<SPAN STYLE="font-size: 24pt">Greeting Cards</SPAN>, too. </BODY></HTML>

Result is shown in Fig. 5 below.

Fig. 5

Font family styles

<HTML>

<HEAD>

<TITLE>Style Sheets: Font Families</TITLE>

<STYLE>

<!--

.fonttype1 {font-size: 20pt; font-family: "Times New Roman"}

.fonttype2 {font-size: 20pt; font-family: Arial}

.fonttype3 {font-size: 18pt; font-family: "Courier New"}

-->

</STYLE> </HEAD> <BODY BGCOLOR="yellow"> <DIV CLASS="fonttype1">This sentence is

in Times New Roman</DIV> <DIV CLASS="fonttype2">This one is in Arial Font Type</DIV>

<DIV CLASS="fonttype3">This is in Courier New Font Type</DIV> <HR> <DIV STYLE="font-

size:34pt;color:red"> <DIV STYLE="font-family: Arial">The Arial Font Family</DIV> <DIV

STYLE="font-family: Tahoma">This line is in Tahoma Font Family</DIV> </DIV>

</Body></HTML>

E-COMMERCE IT430

Result is shown in Fig. 6 below.

Fig. 6

Font weight styles

The font weight controls the thickness of text. Predefined weight values are

normal,bold,bolder,lighter. Specific weight values are in the range 100 900.

<HTML> <HEAD><TITLE>Font Weights</TITLE> </HEAD> <BODY bgcolor=yellow> <DIV

STYLE="font-size:20pt"> You can find books in this shop on <SPAN STYLE="font-family: 'Courier

New',Courier">subjects such as:</SPAN> <BR> <SPAN STYLE="font-weight:

100">Physics</SPAN>, <SPAN STYLE="font-weight: 200">Math</SPAN>, <SPAN STYLE="font-

weight: 300">History</SPAN>, <SPAN STYLE="font-weight: 400">Fiction</SPAN>, <SPAN

STYLE="font-weight: 500">Poetry</SPAN>,

<SPAN STYLE="font-weight: 600">E-commerce</SPAN>, <SPAN STYLE="font-weight:

700">Computer Science</SPAN>, <SPAN STYLE="font-weight: 800;font-

style:italic;color:red">Sociology</SPAN>, <SPAN STYLE="font-weight: 900;font-

style:italic;color:red">Music</SPAN> </DIV></BODY> <HTML>

Result is shown in Fig. 7 below.

Fig. 7

Indenting the first line of a paragraph

We can use the property text-indent keeping its value in inches or centimeters.

<HTML>

<HEAD>

<TITLE> Indenting the first line </TITLE>

<STYLE>

<!--

P {text-indent: 0.5in}

-->

</STYLE>

E-COMMERCE IT430

</HEAD>

<BODY>

<P>

Faith, unity and discipline are the qualities through which we can progress as a nation. The focus of our

young generation must be on receiving modern education. </P> <P>Religion can play a very important

role in the life of an individual. Islam teaches a complete way of life. It ensures success in this world and

hereafter. The need is to understand the real message of Islam. </P> </BODY></HTML>

Result is shown in Fig. 8 below.

Fig. 8

Aligning the text

We can use the property `text-align' keeping its value as left, right, center or justify. Consider

the following example:

<HTML> <BODY> <TABLE bgcolor=yellow BORDER="1"> <TR> <TD WIDTH="25%"

STYLE="text-align: left"> Hypertext Markup Language was initially developed in America for military

purposes. Now it is a popular tool for creating web pages. It is a language of tags. It has a fixed vocabulary.

It is not case sensitive. </TD> <TD WIDTH="25%" STYLE="text-align: center"> Hypertext Markup

Language was initially developed in America for military purposes. Now, it is a popular tool for creating

web pages. It is a language of tags. It has a fixed Vocabulary. It is not case sensitive. </TD> <TD

WIDTH="25%" STYLE="text-align: right"> Hypertext Markup Language was initially developed in

America for military purposes. Now, it is a popular tool for creating web pages. It is a language of tags. It

has a fixed vocabulary. It is not case sensitive. </TD>

<TD WIDTH="25%" STYLE="text-align: justify"> Hypertext Markup Language was initially developed

in America for military purposes. Now, it is a popular tool for creating web pages. It is a language of tags. It

has a fixed vocabulary. It is not case sensitive. </TD> </TR> </TABLE></Body></HTML> Result

is shown in Fig. 9 below.

Fig. 9

E-COMMERCE IT430

Text decoration styles

We can use the property `text-decoration' in inline styles as follows: <HTML> <HEAD><TITLE>Text

Decoration</TITLE> </HEAD> <BODY> <H2 STYLE="text-decoration: none">Introduction to E-

commerce</H2> <H2 STYLE="text-decoration: line-through">Introduction to E-commerce</H2>

<H2 STYLE="text-decoration: overline">Introduction to E-commerce</H2> <H2 STYLE="text-

decoration: underline">Introduction to E-commerce</H2> </BODY> </HTML>

Result is shown in Fig. 10 below.

Fig. 10

Working with the upper case and lowercase letters

The property named "text-transform" is used which has four values capitalize, lowercase,

none and uppercase.

<HTML> <HEAD><TITLE>Style Sheets: Text Transform</TITLE> </HEAD> <BODY> <H2

STYLE="text-transform: capitalize"> We love Pakistan</H2> <H2 STYLE="text-transform:

lowercase"> We love Pakistan</H2> <H2 STYLE="text-transform: none"> We love Pakistan</H2>

<H2 STYLE="text-transform: uppercase"> We love Pakistan</H2> </BODY> </HTML>

Result is shown in Fig. 11 below.

Fig. 11

Coloring the web page with color styles

Using Cascading Style Sheets one can apply a background color or image to sections of one's

page or even to individual words.

Syntax:

E-COMMERCE IT430

background-color:blue

background-color:#0000FF

background-image:URL(filename)

Example Color Styles <HTML> <HEAD><TITLE>Backgrounds using Style Sheets</TITLE>

</HEAD> <BODY> <DIV STYLE="background-color: yellow; color: blue"> This is an example of

some blue text in yellow background using Style Sheets. </DIV><Br> <DIV STYLE="background-

color: green; color: white"> This example uses a different background color and a different font color

using style sheets. Style sheets provide us more flexibility and a greater editing control over the content.

</DIV> <P>We can also use different background style to <SPAN STYLE="background-color:

red">highlight individual words</SPAN> as in the present case.

<P>

<DIV STYLE="background-image: URL(image2.gif); font-size: 16pt;color:white"> <B>We are studying

e-commerce. E-commerce is an emerging concept that describes the process of buying and selling or

exchanging of products, services and information via computer networks including the internet</B>

</DIV>

</Body></HTML>

Result is shown in Fig. 12 below.

Fig. 12

Table of Contents: