What is CSS? Explain the ways by which CSS is included in the Web page.

29views

written 7.8 years ago by

The Cascading Style Sheet is a markup language used in the web document for presentation purpose.
The primary intention of CSS was to separate out the web content from the web presentation.
Various elements such as text, font and color are used in CSS for presentation purpose.
Thus CSS specification can be applied to bring the styles in the web document.
There are 3 ways to use CSS in a HTML page.
- Inline Cascading sheet
- Document level styles sheet
- External level style sheet

Inline Cascading Sheet

The Inline cascading style sheet is a kind of style sheet in which the different styles can be applied to HTML tags. This tag can be applied using following rule:

Tag

{ property:value }

For example:

<p style=”font-family: Calibri; color:orange” >

In this example, styles are applied to tag p. To define more than one attribute, a semicolon is used.

<html>
<head><title>Inline Cascading Style Sheet</title></head>
<body>
<p>this is simple text</p>
<p1 style=”font-size: 40pt; color:red”>This is first sentence</p1>
<p2 style=”font-size: 30pt; font-family: Arial Black”>this is second sentence</p2>
</body>
</html>

Three different sentences are written on a webpage
First sentence is a simple text without any style applied on it, second and third sentence has a different styles applied on it.
This is called inline cascading style sheet since styles can be applied in the occurrence of HTML element.
Advantage: Uniform styles can be applied for the whole document
Disadvantage: It is not a good practice to use this style sheet.

Document Level Style Sheet:

In Document level style sheet, styles are defined in the head and newly defined in the head and newly defined selector tags in body can be used with actual contents.

This is achieved by using style tag in a head section. This helps in identifying that document level style is used.

<html>
<head>
<title> Document level Style Sheet</title>
<style  type=”text/css”>
 h1
{
   font-family: Arial; color:blue;
}
P
{
    font-size:20pt; font-family: verdana
}
</style>
</head>
<body>
<h1>This is text in blue color</h1>
<p>This is text of Verdana family</p>
</body>
</html>

The above program, selectors are defined in the head section only and these HTML elements are used along with the web page contents
Advantage: It helps to decide the layout of the web page and applies unique style to web page.
Disadvantage: This can’t be used when we want to apply style sheet more than one document.

External Style Sheet: - To apply a particular style sheet on a more than one web page, External Style - The desired styles sheet is stored in .css file and then the same file can be used for multiple web pages. - To achieve this, a <link> tag is used. It has following attributes - rel: defines what is to be linked - href: denotes a path name of stylesheet - type: defines the type of fine to link

HTML File:

<html>
<head>
<title> External Style Sheet></title>
<link rel=”stylesheet”  type=”text/css”  href=”sample1.css”/>
</head>
<body>
<h1> this is external style sheet</h1>
</body>
</html>
sample1.css:
h1
{
font-family:Arial;
}

Advantage: When there is a need to change any style, only one file needs to be changed. One Style sheet can be used by multiple web pages.

ADD COMMENT EDIT