| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
CSS selectors are patterns used to select the elements you want to style or manipulate in an HTML document. They can be based on element type, class, ID, and many other attributes. Here’s a detailed description of each:
1. Type Selector
The type selector selects all elements of a given type (tag name).
Syntax: 'element { style properties }'
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Type Selector Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>Another paragraph.</p>
<div>This is a div.</div>
</body>
</html>
In this example, the type selector ‘p‘ selects all ‘<p>‘ elements and applies the style ‘color: blue;‘, changing the text color of all paragraphs to blue.
2. Class Selector
The class selector selects all elements with a given class attribute.
Syntax: '.className { style properties }'
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Selector Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">This is a highlighted paragraph.</p>
<p>Another paragraph.</p>
<div class="highlight">This is a highlighted div.</div>
</body>
</html>
In this example, the class selector ‘.highlight‘ selects all elements with the class ‘highlight‘ and applies the style ‘background-color: yellow;‘, changing the background color to yellow for the paragraph and the div with that class.
3. ID Selector
The ID selector selects a single element with a specific id attribute. Unlike classes, which can be used on multiple elements, an id should be unique within a document.
Syntax: '#idName { style properties }'
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID Selector Example</title>
<style>
#main-header {
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<h1 id="main-header">This is the main header</h1>
<h1>This is another header</h1>
</body>
</html>
In this example, the ID selector ‘#main-header‘ selects the element with the id ‘main-header‘ and applies the styles ‘font-size: 24px;‘ and ‘color: green;‘, changing the font size and color of that specific header.
Combining Selectors
CSS selectors can be combined to apply styles more specifically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combined Selectors Example</title>
<style>
p.highlight {
background-color: yellow;
color: red;
}
#unique-paragraph {
font-style: italic;
}
</style>
</head>
<body>
<p class="highlight" id="unique-paragraph">This is a unique highlighted paragraph.</p>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a regular paragraph.</p>
</body>
</html>
In this example:
- ‘
p.highlight‘ selects all’<p>‘ elements with the class ‘highlight'and applies the styles ‘background-color: yellow;‘ and ‘color: red;‘. - ‘
#unique-paragraph‘ selects the element with the id ‘unique-paragraph‘ and applies the style ‘font-style: italic;‘.
