🎓 CSS – First Lecture
1. What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style and design webpages.
HTML makes the structure, CSS makes the design.
👉 Example:
HTML = Skeleton (structure of body)
CSS = Clothes & Colors (design of body)
2. Meaning of CSS (Word by Word)
Cascading → Order of applying styles (last or more specific rule wins).
Style → Design/look (color, font, size, background, etc.).
Sheets → A file containing all style rules (.css).
3. Types of CSS
1. Inline CSS → Style written inside a single HTML tag.
2. Internal CSS → Style written inside <style> tag in the same HTML file.
3. External CSS → Style written in a separate .css file and linked to HTML.
4. Example of CSS
(a) Inline CSS
<p style="color:red;">This is a red text</p>
Output: Text will appear in red color.
(b) Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello Students</h1>
</body>
</html>
Output: Heading is blue and centered.
(c) External CSS
👉 Create two files:
HTML File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Welcome Students</h1>
</body>
</html>
[Link] File:
h1 {
color: green;
font-family: Arial;
}
Output: Heading is green with Arial font.
5. Why Use CSS?
Makes websites attractive.
Separates content (HTML) from design (CSS).
Saves time: One stylesheet can style many pages.
Provides better control over layout.
📝 Task for Students
👉 Create a simple webpage with:
1. A heading styled with Inline CSS (any color).
2. A paragraph styled with Internal CSS (different font & background color).
3. Another heading styled with External CSS (in [Link] file).
