Assignments Of Class 2: Basic Selectors
Assignment 1: Apply Styles Using Element Selector
Task:
Create an HTML page with three <p> elements. Use the element selector to style them with different colors and font sizes.
Solution:
1. Create the HTML structure with 3 <p> elements:
html
Copy code
<html>
<head>
<title>Element Selector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
</body>
</html>
2. Apply styles using the element selector (p) to change the color and font size of all <p> elements in the styles.css file:
css
Copy code
p {
color: red;
font-size: 18px;
}
Explanation:
- The p selector targets all <p> elements and applies the same styles (red color and 18px font size) to them.
Assignment 2: Style a Specific Class Using Class Selector
Task:
Create an HTML page with a <div> that has a class highlight. Style it using the class selector to change its background color.
Solution:
1. Create the HTML structure with a <div>:
html
Copy code
<html>
<head>
<title>Class Selector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="highlight">
This is a highlighted section.
</div>
</body>
</html>
2. Apply the class selector .highlight in styles.css to change the background color:
css
Copy code
.highlight {
background-color: yellow;
}
Explanation:
- The .highlight selector targets the element with the class="highlight" and changes its background color to yellow.
Assignment 3: Apply Multiple Classes to Different Elements
Task:
Create an HTML page with two sections using the same class and style them differently using class selectors.
Solution:
1. Create the HTML structure:
html
Copy code
<html>
<head>
<title>Multiple Classes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">
This is the first box.
</div>
<div class="box">
This is the second box.
</div>
</body>
</html>
2. Apply styles using the .box class in styles.css:
css
Copy code
.box {
background-color: lightblue;
width: 200px;
height: 100px;
margin: 10px;
}
Explanation:
- Both <div> elements with the box class will share the same styles: a light blue background, fixed width, height, and margin.
Assignment 4: Style an Element Using ID Selector
Task:
Create an HTML page with an element that has a specific ID (header). Use the ID selector to style it.
Solution:
1. Create the HTML structure with an id="header" element:
html
Copy code
<html>
<head>
<title>ID Selector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="header">Welcome to My Website</h1>
</body>
</html>
2. Apply the ID selector #header in styles.css to change the font size and color:
css
Copy code
#header {
font-size: 36px;
color: darkblue;
}
Explanation:
- The #header selector targets the element with id="header" and styles it with a larger font size and dark blue color.
Assignment 5: Combine Element and Class Selectors
Task:
Create an HTML page with a <p> element inside a <div> with the class content. Style both the <p> element and the .content class.
Solution:
1. Create the HTML structure:
html
Copy code
<html>
<head>
<title>Combined Selectors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<p>This is a paragraph inside a content div.</p>
</div>
</body>
</html>
2. Apply the combined styles in styles.css:
css
Copy code
.content {
padding: 20px;
background-color: lightgray;
}
.content p {
color: green;
font-size: 16px;
}
Explanation:
- The .content class styles the <div> with padding and a background color.
- The .content p selector specifically targets <p> elements inside the .content class, changing their color to green.
Assignment 6: Use ID Selector for a Unique Element
Task:
Create an HTML page with a unique section that has an ID footer. Style it using the ID selector to position it at the bottom of the page.
Solution:
1. Create the HTML structure:
html
Copy code
<html>
<head>
<title>Footer Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="footer">This is the footer section.</div>
</body>
</html>
2. Apply the #footer ID selector in styles.css:
css
Copy code
#footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
Explanation:
- The #footer ID selector positions the footer at the bottom of the page using position: fixed and bottom: 0.
Assignment 7: Style Multiple Elements Using Class Selector
Task:
Create an HTML page with multiple <div> elements and style them using the same class.
Solution:
1. Create the HTML structure:
html
Copy code
<html>
<head>
<title>Multiple Class Selector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
2. Apply the .box class selector in styles.css:
css
Copy code
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
display: inline-block;
}
Explanation:
- The .box class styles all <div> elements with the same class, giving them a fixed size, background color, and margin.
Assignment 8: Use Element, Class, and ID Selectors Together
Task:
Create a page with a header (<h1>), a paragraph (<p>), and a div (<div>). Use element, class, and ID selectors together to style them.
Solution:
1. Create the HTML structure:
html
Copy code
<html>
<head>
<title>Combined Selectors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="header">Header Section</h1>
<p class="info">This is a paragraph.</p>
<div class="content">
This is a content div.
</div>
</body>
</html>
2. Apply combined styles in styles.css:
css
Copy code
#header {
font-size: 32px;
color: blue;
}
.info {
color: gray;
font-size: 14px;
}
.content {
background-color: lightyellow;
padding: 15px;
}
Explanation:
- The #header ID selector styles the <h1> element.
- The .info class styles the <p> element.
- The .content class styles the <div> element.
Assignment 9: Create a Button with ID and Class Selector
Task:
Create an HTML page with a button and use both ID and class selectors to style it.
Solution:
1. Create the HTML structure:
html
Copy code
<html>
<head>
<title>Button Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="btn" id="submitBtn">Submit</button>
</body>
</html>
2. Apply the styles in styles.css:
css
Copy code
.btn {
padding: 10px 20px;
border-radius: 5px;
background-color: lightgreen;
}
#submitBtn {
font-size: 18px;
color: white;
}
Explanation:
- The .btn class applies general styles to the button (padding, border-radius, background color).
- The #submitBtn ID selector targets the button with a unique ID and changes its font size and text color.
Assignment 10: Styling Links Using the Class Selector
Task:
Create an HTML page with several links, and style them using a class selector.
Solution:
1. Create the HTML structure:
html
Copy code
<html>
<head>
<title>Links Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#" class="link">Home</a>
<a href="#" class="link">About</a>
<a href="#" class="link">Contact</a>
</body>
</html>
2. Apply the .link class selector in styles.css:
css
Copy code
.link {
color: blue;
text-decoration: none;
padding: 5px;
}
.link:hover {
color: red;
}
Explanation:
- The .link class styles all <a> elements by removing the underline (text-decoration: none) and changing the color to blue.
- The :hover pseudo-class changes the color to red when the user hovers over the link.
No comments:
Post a Comment