CSS Introduction
CSS stands for (Cascading Style Sheets). It is used to style and design HTML webpages. It controls colors, fonts, layout, spacing, and overall appearance.
What is CSS?
CSS describes how HTML elements should be displayed on screen, or other media. It allows you to separate content (HTML) from design (CSS).
Example 1: Inline CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color: red;">This text is red</p>
</body>
</html>
Output
This text is red
Example 2: Internal CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Styled using internal CSS</p>
</body>
</html>
Output
Styled using internal CSS
Explanation:
• CSS controls the appearance of HTML elements
• Inline CSS is written inside HTML tags
• Internal CSS is written inside the
• CSS controls the appearance of HTML elements
• Inline CSS is written inside HTML tags
• Internal CSS is written inside the
<style> tag
Types of CSS
✔ Inline CSS – written inside HTML elements
✔ Internal CSS – written inside
✔ External CSS – written in a separate
✔ Internal CSS – written inside
<style> tag✔ External CSS – written in a separate
.css file
Frequently Asked Questions (FAQ)
Why should we use CSS?
CSS makes webpages visually attractive and easier to maintain by separating design from content.
Which CSS type is best?
External CSS is best for large websites because it keeps code clean and reusable.
Can one HTML page use multiple CSS files?
Yes. You can link multiple CSS files to a single HTML document.