Okay, let's break this down step-by-step. We’re going to discuss Cascading Style Sheets (CSS), which is a fundamental part of web design. CSS controls how web pages look by defining the style of elements on a webpage, such as text, images, and layout. There are mainly three types of css Inline Css, Internal Css & External Css.
What is CSS?
CSS stands for Cascading Style Sheets. Think of it as the instructions that tell a webpage how to look. If HTML is the skeleton of a webpage, CSS is the skin and clothes that make it presentable. It controls the visual style of HTML elements on a web page. For example:
• How big or small text should be.
• What color the background is.
• How far apart paragraphs should be.
• Where images should be placed.
CSS is often used in three ways:
1. Inline CSS: Applied directly to an HTML element.
2. Embedded CSS: Defined in the <style > tag within the HTML document.
3. External CSS: Stored in a separate .css file, which is linked to the HTML document.
Let’s go through each of these methods with examples to make it clearer.
1. Inline CSS
Inline CSS is applied directly within the HTML tag using the style attribute. This method is useful when you want to apply styles to a specific element without affecting others.
Example:
html
<p style="color: blue;" >This text will be blue. </p >
Here, the text inside the <p > tag will be blue, but this style won’t affect other paragraphs.
2. Embedded CSS
Embedded CSS is defined within the <style > tag inside the HTML document’s <head > section. This allows you to style multiple elements at once and keep the styles within the same document.
Example:
html
<!DOCTYPE html >
<html >
<head >
<style >
p {
color: red;
font-size: 18px;
}
</style >
</head >
<body >
<p >This text will be red and 18px in size. </p >
</body >
</html >
Here, the CSS is applied to all <p > elements in the document, so all paragraphs will be red and 18px in size.
3. External CSS
External CSS is the most flexible method. You create a separate .css file and link it to your HTML document. This is ideal for larger websites because you can apply the same styles to multiple HTML files by linking them to the same CSS file.
Example (HTML file):
<!DOCTYPE html >
<html >
<head >
<link rel="stylesheet" type="text/css" href="styles.css" >
</head >
<body >
<p >This text will follow the styles defined in styles.css. </p >
</body >
</html >
Example (CSS file styles.css):
p {
color: green;
font-size: 20px;
}
In this case, the <p > elements in the HTML file will be green and 20px in size, as defined in the external styles.css file.
Cascading Order
The reason it's called "Cascading" Style Sheets is because of how styles are applied in order. If there are multiple styles for the same element, CSS follows a specific priority:
1. Inline CSS (highest priority).
2. Embedded CSS.
3. External CSS (lowest priority, unless overridden).
This is helpful because it allows you to apply general styles globally, and then override them when needed.
Summary
• Inline CSS: Quick, but not reusable or efficient for large projects.
• Embedded CSS: Keeps styles in the same document but can make it harder to maintain.
• External CSS: Best for larger websites because it separates content and style, and styles can be reused across many pages.