Introduction
Rules can be applied to an HTML document in three ways, as inline style directions, as a style element embedded in the head section of HTML file and as an external file that can be either linked to or imported into document.Inline styles
Style information can be added to an individual element by adding style attribute within HTML tag of that element. Value of style attribute is one or more standard style declarations, as shown here:
html page code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body><div style="font-size: large; font-weight: bolder; font-style: normal; color: #FF0000; background-color: #FFFF00">
Hello World
</div>
</body>
</html>
Although a perfectly valid use of style information, inline styles are equivalent to <font> tag in the "pollute" document with presentation information. Style information is still tied to each individual content element and any changes would need to be made in every file, rather than globally. Inline styles are best used to override higher-level styles.
Embedded style sheet
A more compact method for adding style sheets is to embedding a style block, in the top of HTML document, using the <style> element. Following example shows sample rules embedded in a HTML document:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 {
font-size :x-large;
}
.inner {
color:orange;
background-color :green;
}
</style>
<title></title>
</head>
<body><div class="inner">
<h1>Hello World</h1>
</div>
</body>
</html>
Output of the code is :
<style> element must be placed within <head> tag in the document. It is usually necessary to place HTML comment tags (<!-and->) around the <style> contents. This hides style information from browsers that don’t understand the <style> tag (otherwise, they could display the rules as text in browser window).
Currently, Cascading Style Sheets (CSS) are the style sheet language only, but the W3C has prepared for possibility of additional languages to be added in the future by providing type attribute within the <style> element. Only viable style type as of this writing is text/css. If the type attribute some browsers may ignore entire style sheet.
External style sheet
The powerful way to use styles is to collect them all in a separate text document and create links to that document from all HTML pages in a site. In this way, you can make stylistic changes consistently across a whole site by editing style information in a single document. This is a powerful tool for large-scale sites.
These are two ways to refer to external style sheets from within an HTML document.
- Linking. The most standard and best-supported method is to create a link to that document using <link> tag in <head> of document as shown here:
<link href="StyleSheet.css" rel="stylesheet" />
The rel attribute defines linked document’s
relation to the current document- a “style sheet”. The href attribute provides
URL to the file containing style sheet information.
Style sheet document is a simple text
document that contains a collection of style sheet rules. It may not contain
HTML tags, particularly structural tags that set up an HTML document (<head>,
and <body>).
Style sheet. css file
body {
background-color :black;
}
.fontclass {
color :white ;
font-size :medium;
}
.html file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title></title>
</head>
<body><div class="fontclass">
<h1>Hello World</h1>
</div>
</body>
</html>
Output File
2. Importing. An alternative to linking is to import external style sheets into <style> element using <style> the @import function as shown:
First Stylesheet.css file code
@import url(StyleSheet2.css);
.fontclass {
color :white ;
font-size :medium;
}
Second Stylesheet.css file code
body {
background-color :green;
}
Advantage to importing is, multiple style sheets can be applied to same Document (only one style sheet can be “linked” to a document). When additional import functions are added within <style> element, style information from the last file read (the one at the bottom of the list) will take precedence over previous ones.
Major drawback to import is limited browser support (it is currently only supported by Internet Explorer 4.0).
