Identifying the Types of Style Sheet

0
82
views
Style Sheet
Identifying the Types of Style Sheet

The CSS styles can be applied to websites in different ways. For example, you want to apply a unique CSS style on a specific heading of a Web page.

It is also possible that you want to apply different styles on each Web page. In addition, you may want all the pages of your website to be consistent in their style.

Different websites use different ways of implementing styles through CSS. Based on the manner in which CSS styles are applied, these can have
the following categories:

Inline Style

To customize only a few elements on a Web page, inline styles can be applied. For example, you want to display a particular paragraph in red color on one of the Web pages. For this, you can use an inline style.

Inline styles are attached directly with the tag in the HTML document. They are specified by using the style attribute inside an element declaration in the HTML document. The inline styles customize only the tag on which they are applied.

Consider the following code to specify a style for only one of the <P> tags in the HTML document:

<!DOCTYPE HTML> <HTML> <BODY> <P style=”font-size: 24pt; color: red”>Hotel booking from the comfort of your room.</P> <P>Compare and book from more than 5000 hotels. </P> </BODY> </HTML>

In the preceding code, the text inside the first <P> element will be displayed in red color with specific font size. Whereas, the text inside the second <P> element will be displayed in a normal font as no styles have been applied to it. The following figure displays the output derived after applying the inline style on the</P> tag.

Style Sheet
The Output Derived After Applying the Inline Style on </P> Tag

Internal Style Sheet

An internal style sheet is used when there is a need to stylize the multiple occurrences of an element on a Web page with the same style. It is also known as an embedded style sheet. For example, you want to format all the <P> and <H1> tags of a Web page.

In this case, it would be advisable to define separate style rules for the <P> and <H1> tags once and then refer to these definitions, wherever needed. The internal style sheet customizes the elements of only that Web page in which it is contained.

This can be implemented by using an internal style sheet. An internal style sheet is enclosed within the <STYLE> tag inside the head section of the HTML document, as shown in the following code:

<!DOCTYPE HTML> <HTML> <HEAD> <STYLE type=”text/css”> p { color:red; font-size:20pt; font-style:italic; } </STYLE> </HEAD> <BODY> <P> Hotel booking from the comfort of your room.</P> <P> Compare and book from more than 5000 hotels.</P> </BODY> </HTML>

In the preceding code, an internal style sheet has been used to stylize all the <P> tags defined inside the HTML document.

The text inside the <P> tags is displayed, as shown in the following figure.

Style Sheet
The Text Inside the <P> Tags

External Style Sheet

An external style sheet is used when multiple Web pages are to be styled in the same manner to ensure the consistent look and feel across the entire website.

An external style contains only the formatting rules for the desired HTML elements. Therefore, it separates the design of a Web page from its content. An external style sheet can be simultaneously linked to multiple HTML documents.

Therefore, a consistent style can be applied on multiple pages of the website by defining an external style sheet.

An external style sheet is a text document that consists of CSS formatting rules. This document can be written in a simple text editor, such as Notepad, and then saved with the .css file extension.

To associate a Web page with an external style sheet, you need to use the <LINK> tag inside the head section of the HTML document.

The following code displays the <LINK> tag along with its some commonly-used attributes:

<LINK type=”text/css” rel=”stylesheet” href=”externalstylesheet.css” />

In the preceding syntax:

type: Specifies the type of content in the linked document. href: Specifies the location of the linked external style sheet. rel: Specifies the relationship between the CSS document and the HTML document. The rel attribute is specified with value, stylesheet, which specifies that the current HTML document is importing an external style sheet.

Consider the following code to associate an external style sheet with the HTML document:

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> An External Style Sheet </TITLE> <LINK type=”text/css” rel=”stylesheet”href=”externalstyle.css”/> </HEAD> <BODY> <H1> Hotel booking from the comfort of your room. </H1> <P> Compare and book from more than 5000 hotels. </P> </BODY> </HTML>

The <link> tag in the preceding code associates the external style sheet named externalstyle.css with the HTML document. The content of the file,
externalstyle.css is shown in the following code snippet:

p { color:red; font-size:20pt; font-style:italic; } h1 { color:blue; font-size:25pt; font-weight:bold; }

The Web page associated with the external style sheet is displayed, as shown in the following figure.

Style Sheet
The Web Page with Multiple Styles

LEAVE A REPLY

Please enter your comment!
Please enter your name here