Different Types of Style Sheets
External Style Sheets
An external Style Sheet is a template/document/file containing style information which can
be linked with any number of HTML documents. This is a very convenient way of
formatting the entire site as well as restyling it by editing just one file.
The file is linked with HTML documents via the LINK element inside the
HEAD element. Files containing style information must have extension .css
, e.g. style.css.
<HEAD>
<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">
</HEAD>
Embedded Style Sheets
Embedded style is the style attached to one specific document. The style
information is specified as a content of the STYLE
element inside the HEAD element and will apply to the entire document.
<HEAD>
<STYLE TYPE="text/css">
<!--
P {text-indent: 10pt}
-->
</STYLE>
</HEAD>
Note: The styling rules are written as a HTML
comment, that is, between <!-- and --> to hide the content in browsers
without CSS support which would otherwise be displayed.
Inline Style Sheets
Inline style is the style attached to one specific element. The style is
specified directly in the start tag as a value of the STYLE
attribute and will apply exclusively to this specific element
occurrence.
<P STYLE="text-indent: 10pt">Indented paragraph</P>
Imported Style Sheets
Imported Style Sheet is a sheet that can be imported to (combined with) another sheet.
This allows creating one main sheet containing declarations that apply to the
whole site and partial sheets containing declarations that apply to specific
elements (or documents) that may require additional styling. By importing
partial sheets to the main sheet a number of sources can be combined into one.
To import a style sheet or style sheets include the @import notation or
notations in the STYLE element. The @import notations must come before any
other declaration. If more than one sheet is imported they will cascade in
order they are imported - the last imported sheet will override the next last;
the next last will override the second last, and so on. If the imported style
is in conflict with the rules declared in the main sheet then it will be
overridden.
<LINK REL=STYLESHEET HREF="main.css" TYPE="text/css">
<STYLE TYPE="text=css">
<!--
@import url(http://www.and.so.on.partial1.css);
@import url(http://www.and.so.on.partial2.css);
.... other statements
-->
</STYLE>
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
