There are THREE ways in which style sheets can be inserted to an HTML document.
Inline Styles within a single HTML element
When a style is intended for a single place or item on the entire website, a single tag CSS isused. As the term suggests, a single tag CSS affects only a single tag in a HTML document
for which it is defined. Inline styles are used for this purpose. In inline style the style
attribute must be used in the relevant tag that renders the style. The style attribute may
have any CSS property.
The following example shows how a change in the color and the right margin of a paragraph
is brought which is different from the rest of the page.
<p style="color: teal; margin-right: 40px";>
This paragraph has different style
</p>
Internal Style Sheet inside the <head> element of an HTML page
When a style is intended to appear at several places on a single web page, a CSS style isused which is defined once for the entire page. Internal style sheets (or embedded style
sheets) are used for this purpose. Internal style sheets are also called embedded style
sheets.
The following example shows how an internal style sheet is inserted.
<head>
<style type="text/css">
<!--body {font-family: verdana, Helvetica, sans-serif; color: blue;}--!>
</style>
</head>
Linking an External Style Sheet
The third and the most powerful method of inserting a style sheet is to link the HTMldocument to an external style sheet. When a style is intended to appear at more than one
page in the website, a CSS style is used which is described in an external CSS file. External
style sheets (or linked style sheets) are used for this purpose. External style sheets are also
called linked style sheets.
Inserting an external style sheet provides complete ease to the designer and also save lot
of time whereby the designer can change the look of several pages, or of the entire
website by making the necessary change in only one file. The external style sheet is linked
to each of the pages with the <link> tag which goes inside the head section.
The following example shows how an external file is linked to a document:
<head>
<link rel="stylesheet" type="text/css" href="abcd.css" />
</head>
The browser will read the style definitions as given in file abcd.css and display the page
accordingly.
An external style sheet can be written in any text editor and saved with .css extension.
There should not be any HTML tags in the file.
Following is an example of a style sheet file:
body {background-color: pink;}
h1 {font-size: 30pt;}
h2 {color: black;}
p {margin-left: 20px;}
The Hierarchy
There are three types of Cascading Style Sheets Inline
Embedded and
Linked/(or) External
The above 3 styles follow a hierarchy
The “cascading” refers to the hierarchy of control
Inline style takes preference Then Embedded styles rules follow
The Linked external style sheet instructions will be used if Inline or Embedded
instructions are not present
Whenever any conflict arises as to which style rule should be used first, a style rule with higher
preference will get preference.
The following chart explains this principle. The chart is only a brief reference to resolve style
conflicts.
If multiple style rules are in conflict for a given selector, the scale shown in the chart will help
you in determining the order of style rules to be used.
A style rule with higher importance will be preferred than an identical style rule with lower
importance.
0 comments:
Post a Comment