About Lesson
CSS (Cascading Style Sheet):
CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of a document written in HTML or XML. In simpler terms, CSS is used to control the layout, appearance, and styling of HTML elements on a webpage.
Here’s a brief overview of what CSS does in HTML:
Styling HTML Elements:
- CSS allows you to apply styles such as colors, fonts, margins, padding, and borders to HTML elements. This helps in controlling the visual presentation of the content.
Layout Control:
- CSS provides mechanisms for controlling the layout of a webpage. You can adjust the positioning of elements, create responsive designs, and control the flow of content on the page.
Consistency Across Webpages:
- By using external CSS files or embedding styles within an HTML document, you can ensure a consistent look and feel across multiple pages of a website.
Separation of Concerns:
- CSS promotes the separation of content and presentation. HTML is used for structuring the content, and CSS is used for styling. This separation makes the code more modular and easier to maintain.
Responsive Design:
- CSS allows you to create responsive designs that adapt to different screen sizes and devices. This is crucial for providing a good user experience on both desktop and mobile devices.
Three Ways To Add CSS:
1. Inline CSS:
Inline CSS in HTML is added directly to an HTML element using the style attribute.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Inline CSS</h1>
<p style="font-size: 16px; line-height: 1.5; color: #333;">This is a paragraph with inline CSS styling. It has a custom font size, line height, and color.</p>
<div style="background-color: #f2f2f2; padding: 10px;">
<p>This is a div with a custom background color and padding.</p>
</div>
</body>
</html>Output:
2. Internal CSS:
Internal CSS in HTML is added within the <style> tag in the document’s <head> section.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: rgb(215, 193, 215);
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
color: #555;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>This is a paragraph of text on the webpage. It is styled using internal CSS to set the font size, line height,
and color.</p>
</body>
</html>Output:
3. External CSS:
To add an external CSS file to an HTML document, you need to link to the external stylesheet using the <link> element in the <head> section of your HTML file.
Example:
File: style.css
CSS
body {
font-family: Arial, sans-serif;
background-color: rgb(209, 184, 233);
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
color: #555;
}
File: demo.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="demo.css" />
<title>CSS</title>
</head>
<body>
<h1>External CSS</h1>
<p>This is a paragraph of text on the webpage. It is styled using external CSS to set the font size, line height,
and color.</p>
</body>
</html>Output:
