Lecture Notes Of Class 2:
Basic Selectors
Objective:
By the end of this class,
students will understand and be able to use basic CSS selectors, including
element, class, and ID selectors, to apply styles to HTML elements.
Topics:
1.
Element Selector:
- Definition: The
element selector targets HTML tags and applies styles to them. For
example, using h1, p, or div selectors allows you to style all instances
of those tags on the page.
- Example:
css
Copy code
p {
color: blue;
font-size: 16px;
}
This will make all <p>
elements blue and set their font size to 16px.
2. Class
Selector:
- Definition: The
class selector targets elements with a specific class attribute. It is
reusable, meaning you can apply the same style to multiple elements with
the same class name.
- Syntax: The
class selector is prefixed with a dot (.).
- Example:
css
Copy code
.highlight
{
background-color: yellow;
}
This will apply a yellow
background to all elements with the class highlight, like <div
class="highlight">.
3. ID
Selector:
- Definition: The
ID selector targets elements with a specific id attribute. It is unique,
meaning it should be applied to only one element per page.
- Syntax: The
ID selector is prefixed with a hash symbol (#).
- Example:
css
Copy code
#header {
font-size: 24px;
font-weight: bold;
}
This will style the element with
id="header" by setting the font size to 24px and making the text
bold.
Lab
Exercise:
Task:
Create an HTML page and apply
styles using element, class, and ID selectors.
Instructions:
1. Create an
HTML file with the following structure:
o
A header (<h1>) with the text "Welcome
to My Webpage".
o
A paragraph (<p>) with some text about the
website.
o
Two div elements with different content, one for a
section called "Introduction" and another called
"Services".
o
A button inside the "Services" section
with the text "Click Me".
2. Use the
following CSS to style these elements:
o
Apply a color to all <p> elements.
o
Create a class named .intro to style the
"Introduction" section with a background color.
o
Apply an ID selector to style the header <h1>
with a unique font size and color.
o
Use a class to change the font size of the
"Services" section.
Example
HTML Code:
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>Basic Selectors
Example</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<h1 id="header">Welcome to
My Webpage</h1>
<p>This is a website about web
development tutorials.</p>
<div class="intro">
<h2>Introduction</h2>
<p>This section will give you a
brief overview of what we do.</p>
</div>
<div class="services">
<h2>Services</h2>
<p>We offer various web
development services.</p>
<button>Click Me</button>
</div>
</body>
</html>
Example
CSS Code (styles.css):
css
Copy code
/*
Element Selector */
p {
color: green;
font-size: 16px;
}
/* Class
Selector */
.intro {
background-color: lightgray;
padding: 10px;
}
/* ID
Selector */
#header {
font-size: 36px;
color: darkblue;
}
/* Class
Selector for Services Section */
.services
h2 {
font-size: 24px;
color: darkorange;
}
Expected
Outcome:
- The
<p> elements will have green text and a font size of 16px.
- The
"Introduction" section will have a light gray background and
some padding.
- The
header (<h1>) will be styled with a large, dark blue font.
- The
"Services" section's header (<h2>) will be styled with a
dark orange color and slightly larger font.
Summary:
- The element
selector targets HTML tags.
- The class
selector targets elements with a specific class, and multiple elements
can share a class.
- The ID
selector targets unique elements with a specific id.
No comments:
Post a Comment