Types of CSS
- External CSS
- Internal CSS
- Inline CSS
1.External CSS
Here some points are given below for external CSS:
- External style sheet is a separate file of CSS.
- File must be saved with .css extension.
- File contains no tag and only contains CSS code.
- File can be used to apply on several html files.
- External style sheet is useful when properties need to be applied on more than one web page on the site.
Example:
HTML file:
<html> <head> <link rel=”style sheet” type=”text/css” href=”mystyle.css” /> </head> <body> <h1> This is heading. </h1> <p> This is a paragraph. </p> <p> This is second paragraph. </p> </body> </html>
CSS file (mystyle.css):
p{
color:blue;
}
h1{
color:red;
}
- Internal CSS:
- Internal style sheet means when CSS is included in the same html file.
- <style> tag must be used to write CSS in html file.
- <style> tag should be in <head> tag.
- Type attribute of style tag specify the type of MIME type (text/css).
- Internal style sheet is useful when page specific properties need to be applied.
- Preference is given to internal style sheet over external style sheet.
Syntax of internal css:
<style type=”text/css”>
ElementSelector{
PropertyName:PropertyValue;
PropertyName:PropertyValue;
}
Example:
<html>
<head>
<style type=”text/css”>
h1{
color:blue;
font-style:italic;
}
</head>
<body>
<h1> This is heading. </h1>
<p> This is a paragraph. </p>
<p> This is second paragraph. </p>
</body>
</html>
3. Inline CSS
- Style attribute can be used with tag representing html element.
- The value of style attribute is any CSS property.
- Each property name-value pair is terminated with a semicolon.
- Inline style has more preference given than internal or external style.
- Inline style is useful when element specific property needs to be applied.
Example:
<html> <head> </head> <body> <p style=”color:gray; font-size:22px;”> This is a paragraph </p> </body> </html>