There are three basic way to apply CSS in html document.
1.Inline style
2.Internal style
3.External style.
Inline style:Inline style are applied directly to the html by using "style" attribute.
Example:
<p style="color:blue;>Your text</p>
Use inline style sparingly and only when a single element has a unique style to be applied.
Internal style: Internal style are specified within the <head> </head> tag of on html documents and apply to the whole document. Example-:
<head>
<title>CSS Internal style example</title>
<style type="text/css">
p{
color:blue;
}
</head>
Use internal style when a single page has a unique style to be applied.
External style: External style are specified in on separate Css file and included into html documents in which they are to applied.Example-:
p{
color:blue;
}
The following example shows how to include external style sheet name style.css into an html document.Notice that the <link>tag is specified within <head> </hed> tag.
<html>
<head>
<title>External style Example</title>
<link rel="stylesheet " type="text/css" href="style.css"/>
</head>
External style sheet are recommended when the style are to be applied across multiple html documents.This allow for consistency throughout on entire web site and any style changes automatically apply to all files that include the style sheet.
CSS cascading order:
When multiple style are specified by any of the methods,the style cascade into a single style by following this list in order of increasing priority.
1.Browser default
2.External style sheet
3.Internal style sheet
4.Inline style sheet
Therefore an inline style has the highest priority meaning it will override the same Internal style or in an external style sheet or in a browser(a default value).
1.Inline style
2.Internal style
3.External style.
Inline style:Inline style are applied directly to the html by using "style" attribute.
Example:
<p style="color:blue;>Your text</p>
Use inline style sparingly and only when a single element has a unique style to be applied.
Internal style: Internal style are specified within the <head> </head> tag of on html documents and apply to the whole document. Example-:
<head>
<title>CSS Internal style example</title>
<style type="text/css">
p{
color:blue;
}
</head>
Use internal style when a single page has a unique style to be applied.
External style: External style are specified in on separate Css file and included into html documents in which they are to applied.Example-:
p{
color:blue;
}
The following example shows how to include external style sheet name style.css into an html document.Notice that the <link>tag is specified within <head> </hed> tag.
<html>
<head>
<title>External style Example</title>
<link rel="stylesheet " type="text/css" href="style.css"/>
</head>
External style sheet are recommended when the style are to be applied across multiple html documents.This allow for consistency throughout on entire web site and any style changes automatically apply to all files that include the style sheet.
CSS cascading order:
When multiple style are specified by any of the methods,the style cascade into a single style by following this list in order of increasing priority.
1.Browser default
2.External style sheet
3.Internal style sheet
4.Inline style sheet
Therefore an inline style has the highest priority meaning it will override the same Internal style or in an external style sheet or in a browser(a default value).
0 comments :