Styles are used to define a set of formatting options, which can be reused to format different HTML elements on a single or multiple Web pages. Styles can be defined in any of the following ways:
Using inline styles
Using an embedded style sheet
Using an external (linked) style sheet
Using Inline Styles
Inline styles are style definitions that are applied to the style property of a particular HTML element, and are placed directly inside the element on which it has to be implemented. Inline styles are used when one wants to apply one-time formatting to an HTML element.
To use inline styles in a Web page, use the style attribute in the relevant HTML tag. For example, if the text of a paragraph has to be displayed in italicized and Arial font, then the style for the <p> tag will be as shown in the following markup.
<p style="font-family:arial;font-style:italic">
......
......
</p>
In the preceding markup, the style applied to the <p> tag will be applied to all the text written within the <p> </p> tag.
Using an Embedded Style Sheet
An embedded style sheet is a group of styles that are defined by using the <style> tag. This tag needs to be placed within the <head> </head> tag on your Web page.
The embedded style sheet is used when one wants to apply a unique style to the various elements on a Web page.
The embedded style sheet enables all the styles to be defined for a Web page all at one place. This reduces the time required to design a Web page because there is no need to define the properties for the tags individually.
For example :
<html> <head>
<title>
An Embedded Style
</title>
<style type="text/css">
h1 { font-style:italic;background:yellow;color:red}
p { font-style:bold;color:blue}
</style>
</head>
<body>
<h1> An Embedded Style </h1>
<p> Embedded style sheet is a part of HTML document.
</p>
</body>
</html>
All the <h1> and <p> tags defined within the Web page will inherit the style defined in the <style> tag.
Using an External (Linked) Style Sheet
The style definitions in an external style sheet are stored in a separate file having the .css extension. An external style sheet can contain styles for individual elements or generic styles that can be applied to any element.
For example:
h1
{
font-weight: bold;
font-size: large;
color: green;
font-family: Verdana, Arial, Sans-Serif;
}
The preceding style can only be applied to the <h1> tags. Generic styles can also be created as shown in example below:
.heading
{
font-weight: bold;
font-size: large;
color: green;
font-family: Verdana, Arial, Sans-Serif;
}
After the .css file is created, it has to be linked with the HTML documents on which the styles are to be implemented. This can be done using the <link> tag. The <link> tag should be defined within the <head> element of the HTML document.
<head>
<link rel=stylesheet href="style.css" type="text/css">
</head>
In the preceding markup, rel=stylesheet specifies that the document will use a style sheet, href="style.css" specifies that the document will refer to the file, style.css, for the style definitions and type="text/css" signifies that it refers to a .css file for picking up the style definitions.