Cascading Style Sheets is mainly used for solving the problem of adding styles to HTML multiple times.
There are three types of styles,
Inline CSS
The style attribute should be placed inside of any relevant tag and you can apply any CSS property. But you have to apply the styles individually to all the relevant tags, which makes it harder for re-use.
Also, It’s impossible to use style pseudo-elements(hover, visited,active, etc.,) and classes with inline styles.
<p style=“color: blue; border: 1px solid blue;”>This is a paragraph.</p>
Internal CSS
This can be used in a single document which has a unique style. You can define any style property in <style> tag in the head section.
It has more advantages over inline styles, but still you have to use individual style tags in all pages.
<head>
<style>
p {
color: blue; border: 1px solid blue;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
External CSS :
You can use any styles in a single separate file linked to any no. of pages. It is ideal choice for many web developers. Because it is highly re-usable, your CSS and HTML contents will be crystal clear as both are in separate files, It is also search engine friendly.
– – – – styles.css – – – –
p {
color: blue; border: 1px solid blue;
}
– – – – index.html – – – –
<head>
<link href=“styles.css”>
</head>
<body>
<p>This is a paragraph</p>
</body>