|
|
Different types of CSS styles
June 24, 2008 – 6:30 pmCSS gives flexibility in using different style property locally by overriding the global declared styles in external style sheet. Following are the 3 different types of styles.
- Inline or embedded style sheet
- Internal style sheet
- External style sheet
Inline or embedded style sheet
These styles can be added directly within HTML tags. This gets highest priority than Internal and external defined styles. It means it overrides the existing style and applies the inline style.
<style type="text/css">
h2 {background-color:#ffff00;} /*Internal style sheet*/
</style>
<h2 style="background-color: #cccccc;">Heading tag</h2> <!-- inline style sheet -->
The above code outputs the heading tag with background color #cccccc by overriding the color #ffff00.
Internal Style Sheets
This type of style is defined inside the body tag of the page. The style defined here get overrides the external styles. Here is an example of Internal styles.
<head>
<title>Page title</title>
<style type="text/css">
p {
font-family: verdana, arial, sans-serif;
background-color: #cccccc;
}
</style>
</head>
<body >
<p> This paragraph is having font family verdana with background color #cccccc</p>
</body>
External Style sheets
These styles are created in some another file and are linked from the required page.
<link rel="stylesheet" href="css/style.css" type="text/css">
The above tag is to be placed within the head tags of the page. here style.css will have all the styles for different tags and classes.
