Types of CSS (Cascading Style Sheet)
CSS (Cascading Style Sheets) is used to style and layout of web pages, and controlling the appearance of HTML elements. CSS targets HTML elements and applies style rules to dictate their appearance.
Below are the types of CSS:
- Inline CSS
- Internal or Embedded CSS
- External CSS
1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This method allows for specific styling of elements within the HTML document, overriding any external or internal styles.
<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
Inline CSS
</p>
Output
Inline CSS
2. Internal or Embedded CSS
Internal or Embedded CSS is defined within the HTML document’s <style> element. It applies styles to specified HTML elements. The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the <style> tag inside the head section of the HTML file.
<!DOCTYPE html>
<html>
<head>
<style>
.main {
text-align: center;
}
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">Internal CSS</div>
<div class="geeks">
Implementation of Internal CSS
</div>
</div>
</body>
</html>
Output
internal CSS
3. External CSS
External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="GFG">External CSS </div>
<div id="geeks">
This shows implementation of External CSS
</div>
</div>
</body>
</html>
body {
background-color: powderblue;
}
.main {
text-align: center;
}
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
#geeks {
font-style: bold;
font-size: 20px;
}
Output
External CSS
Note: Inline CSS has the highest priority, so it overrides internal and external styles. Internal CSS comes next, overriding external styles, while external CSS is applied only if no inline or internal styles are set.
