Lecture Notes Of Class 1:
Introduction to CSS
Objective:
Understand the role of CSS in web
development.
Topics:
1. What
is CSS?
CSS (Cascading Style Sheets) is a
stylesheet language used to control the layout and presentation of HTML
elements. It allows web developers to apply styles such as colors, fonts,
spacing, and positioning to elements within an HTML document.
Key points:
- Purpose:
CSS is responsible for making web pages look appealing and improving the
user experience by controlling visual design aspects like fonts, colors,
layout, and responsiveness.
- Separation
of Concerns: CSS separates the content (HTML) from the
presentation (styling), making the code easier to maintain and update.
- Cascading
Effect: The term “cascading” refers to the order of
precedence in CSS rules, allowing styles to be applied from different sources
(inline, internal, external).
2. CSS
Syntax
The basic syntax of CSS consists
of:
- Selector:
Identifies the HTML element(s) to which the styles will be applied.
- Declaration
Block: Contains one or more declarations enclosed
in curly braces {}.
- Declaration: A
rule that defines the property and value.
Syntax Structure:
css
Copy code
selector
{
property: value;
}
Example:
css
Copy code
h1 {
color: blue;
font-size: 24px;
}
- Selector: h1
(the element to target).
- Property: color
and font-size (the styles to apply).
- Value: blue
and 24px (the values of the properties).
3.
Inline, Internal, and External CSS
CSS can be applied in three
different ways:
- Inline
CSS: Styles are applied directly within HTML tags
using the style attribute. This is useful for applying styles to
individual elements.
Example:
html
Copy code
<h1 style="color:
red; font-size: 30px;">Welcome to CSS!</h1>
- Internal
CSS: Styles are defined within the <style>
tag in the head section of the HTML document. This method is ideal for
applying styles to an entire page.
Example:
html
Copy code
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
- External
CSS: Styles are defined in a separate .css file
and linked to the HTML document using the <link> tag. This is the
best approach for styling multiple pages on a website.
Example:
html
Copy code
<head>
<link rel="stylesheet" href="styles.css">
</head>
Lab
Exercise:
Task:
Create an HTML page and style it using inline CSS.
1. Create
the HTML structure: Create a simple HTML page with a heading and
paragraph.
Example:
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Demo</title>
</head>
<body>
<h1>Welcome to CSS!</h1>
<p>This is a simple page styled with
inline CSS.</p>
</body>
</html>
2. Apply
Inline CSS: Use inline CSS to change the text color of the heading and the
background color of the paragraph.
Updated Example:
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Demo</title>
</head>
<body>
<h1 style="color: green; text-align:
center;">Welcome to CSS!</h1>
<p style="background-color:
lightblue; font-size: 18px;">This is a simple page styled with inline
CSS.</p>
</body>
</html>
In this exercise, you will:
- Apply
inline CSS to style the page.
- Experiment
with changing text color, font size, and background color to get familiar
with CSS properties.
Summary:
- CSS is
crucial for designing and styling web pages, making them visually
appealing.
- There
are three types of CSS: inline, internal, and external.
- You
learned about the CSS syntax and how to apply styles directly
within HTML tags using inline CSS.
No comments:
Post a Comment