Working with Cascading Style Sheets


CASCADING STYLE SHEETS – A Sample

The Cascading Style Sheet is W3C technology that allows document authors to specify the presentation of elements on a web page separately from the structure of the document.

Types are:

  • Inline style sheet
  • Embedded style sheet
  • Linked style sheet

Inline Style Sheet:

This style declares an individual element’s format using attribute style. The attribute style specifies the style for an element.The attribute is specified with the tag itself. Each CSS property is followed by a colon and a value.

Ex. <p style=”font-size:20pt;color:red”> Final Year</p>

Embedded Style Sheet:

These sheets enable a web-page author to embed an entire CSS document in an HTML document’s head section.

Ex. <head>

<title> Embedded Style Sheet</title>

<style>

p {  font-size:20pt;

color:red  }

</style>

</head>

Linked External Style Sheet:

In this style sheet the style information is available on a separate document that contains only the CSS rules. It is used to provide a uniform look and feel to an entire web site.

Generate a separate file with extension css for specifying the style  and make a link with the original file using link tag.

styles.css file

p {  font-size:20pt;

color:red  }

Link tag:

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

Sample Programs:

1. Inline Style Sheet:

<html>

<head>

<title> Inline Style Sheet</title>

</head>

<body>

<p style=”font-size:20pt”> Infant Jesus College of Engineering, Keelavallanadu, Thoothukudi Dist.</p>

<p style=”font-size:18pt;color:red”>Department of Computer Science and Engineering</p>

</body>

</html>

2. Embedded Style Sheet:

<html>

<head>

<title> Embedded Style Sheet</title>

<style>

p {  font-size:20pt;

color:red  }

h1 { font-size:30pt;

color:green }

.special { color:blue}

</style>

</head>

<body>

<h1> Infant Jesus College of Engineering, Keelavallanadu, Thoothukudi Dist.</h1><br>

<p>Department of Computer Science and Engineering</p>

</body>

</html>

3. Linked External Style Sheet:

lss.html file:

<html>

<head>

<title> Linked Style sheet</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<h1> Infant Jesus College of Engineering, Keelavallanadu, Thoothukudi Dist.</h1><br>

<p>Department of Computer Science and Engineering</p>

</body>

</html>

styles.css file

p {  font-size:20pt;

color:red  }

h1 { font-size:30pt;

color:green }

.special { color:blue }

Advertisements