A CSS style sheet can be linked to an HTML document in 3 ways.
1) Internal Style Sheet
2) External Style Sheet
3) In-line style
1) Internal Style Sheet :-
The Internal style sheet is written within the HEAD element of the HTML document. This style applied only to the documents in which it is defined and not referenced by any other web document.
Syntax :- <style type="text/css">
selector { property: value;}
</style>
The above syntax contains : -
Starting and ending tags of the Style element.
The style element contains a type attribute with value text/css.
The declaration consists of a selector followed by curly braces.
The curly braces hold a property followed by a colon, which is further followed by a value and followed by a semicolon.
Example :
<head>
<style type="text/css">
p {
font-family:candara;
color:cyan;
}
</style>
</head>
Advantages of using Internal style sheets :
- · Affects only the page in which they are placed. If you are working on a large site and need to test styles before loading them on the site as a whole, then internal style sheets can be great tool as they allow you to test the styles on a single page.
- · Allows you to test the styles on a single page.
Disadvantages of using Internal style sheets :-
- · Affects only the page to which they applied. If you want to use same styles in several documents, you need to repeat them for every page.
- · Increases the page load time because the entire CSS file needs to be implemented first to apply CSS.
2) External Style Sheet
Here
CSS file is written outside the HTML document and the reference of the CSS file
is placed in the HTML document. In external style sheet, the style sheet rules
are saved into a text file with the .css extension. Once you have a style sheet
document, you can link it with your web pages in the following two ways
i) Linking : Refers to the HTML link element, which
is used to link a style sheet.
<link rel=”stylesheet” type=”text/css” href=”test/css”/>
Here…
rel attribute specifies what you are linking.
type attribute specifies the MIME
type for the browser
href
attribute specifies the path of the .css file.
In the above code, the value of the rel attribute is set to
style sheet, value of the type attribute is set to text/css and that of the
href attribute is set to test.css.
ii) Importing : Here the @import
keyword is used followed by the Uniform Resource Identifier(URI) of the style sheet to which you want to
import the style rules.
<style type=”text/css”>
@import
url(‘demostyle.css”)
H1 {color:blue;}
</style>
In the above code @import keyword followed by the URI of the
style sheet named demostyle.css is used.
Advantages of External Style Sheets :-
Allows you to control the look and feel of several documents
in one go and do not need to define a specific style for every element.
Allows you to easily group your styles in a more efficient
way.
Disadvantages of External Style Sheets :-
Increases the download time as the entire CSS file has to be
downloaded to apply the style to the HTML document.
Displays the web page only after the entire style sheet is
loaded.
3) Inline style:-
These
styles are written in a single line separated by semicolons. These properties are placed inside the style attribute of the HTML element, on which you want to
apply the style.
<p style=”background:cyan; color:black; border:2px solid
white;”>
In the above code the <p> is styled.
Advantages of inline style :-
Provides highest precedence over internal and external style
sheets.
Provides and easy and quick approach to add a style sheet in
a web page. You don’t need to create a whole new document or edit a new element
in the head of your document to add an inline style.
Disadvantages of inline style :-
Makes a document difficult to maintain and increases the download
time. Inline style must be applied to every element on which you want to apply
a style.
Doesn’t allow to style pseudo-elements, which are used to
add special effects to the selectors.
2 comments:
excellent...
Thaks richard..
Post a Comment