Types
The Cascading Style Sheet (CSS) is a programming language used to style web pages that incorporate HTML components. It controls the background colour, font size, font family, colour, and other properties of web page elements.
There are three ways in which CSS can be used to style HTML elements. They are as follows:
- Inline CSS
- Internal CSS
- External CSS
CSS properties:
On a single page, you can declare many style sheets. If multiple style sheets describe styles for an HTML tag, the order listed below will be used.
- Any styles defined in the internal and external style sheets are overridden by Inline styles since Inline has the highest precedence.
- Internal or Embedded is the second most important option, and it takes precedence over the styles in the external style sheet.
- External style sheets are given the least amount of weight. If no styles are defined in the inline or internal style sheets, the HTML tags are styled using external style sheet rules.
Inline CSS
This style helps us to apply a unique style to any element. To use this style, we just have to add the style attribute to the required element.
Internal CSS
This style is declared inside the < head > element using the < style> tag. It can be used when we have a unique webpage.
External CSS
This style is used when we want to change the entire appearance of a website by just changing one file. This style is declared inside the < head > element using the < link> tag. Every HTML page must contain a reference to the style file. There should be no HTML tags in the external CSS file.
Example No.1:
<![CDATA[
<html>
<html lang="en-US">
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<p>Website</p>
</body>
</html>]]>
OUTPUT:
Example No.2:
<![CDATA[
<html>
<html lang="en-US">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Knowledge2life</h1>
<p>Website</p>
</body>
</html>
]]>
OUTPUT:
