Module 3 : CSS Syntax & Selectors Basics
Introduction
CSS (Cascading Style Sheets) is used to style HTML elements, allowing developers to control the layout, colors, fonts, and positioning of elements on a webpage. This module provides a detailed breakdown of CSS syntax and different types of selectors, including elements, classes, and IDs, with practical exercises and examples.
1. Understanding Basic CSS Syntax
CSS Rule Structure
A CSS rule consists of three main parts:
Selector: Specifies which HTML elements the style applies to.
Property: Defines what aspect of the element is being styled.
Value: Specifies the styling applied to the property.
Example:
css code
p { color: blue; font-size: 16px; }
p → Selector (targets all <p> elements)
color → Property (changes text color)
blue → Value (applies the color blue)
font-size: 16px; → Another property-value pair (sets font size to 16px)
2. CSS Selectors: Types & Usage
Selectors allow us to target specific HTML elements. Below are the most common types:
2.1 Element Selector
The element selector targets all instances of a specific HTML tag.
Example:
css code
h1 { color: red; }
This rule will make all <h1> elements have red text.
2.2 Class Selector
A class selector applies styles to multiple elements by using a dot (.) before the class name. Classes are reusable and allow flexibility.
Example:
css code
.highlight { background-color: yellow; }
HTML:
html code
<p class="highlight">This text has a yellow background.</p>
The .highlight class is applied to the paragraph, giving it a yellow background.
Practical Exercise:
Create an HTML page with three paragraphs.
Apply a class to one paragraph and change its font color.
Observe how the class applies the style.
2.3 ID Selector
An ID selector applies styles to a single, unique element. IDs are prefixed with # and should not be repeated within the same page.
Example:
css code
#main-title { font-size: 24px; text-align: center; }
HTML:
html code
<h1 id="main-title">Welcome to My Website</h1>
The #main-title ID styles only the <h1> element with that specific ID.
Practical Exercise:
Create an HTML page with a title.
Apply an ID selector to style the title.
Try adding another element with the same ID and see what happens.
2.4 Combining Selectors
We can combine multiple selectors to apply styles efficiently.
Example:
css code
h1, p { color: navy; }
This applies the same color style to both <h1> and <p> elements.
2.5 Descendant & Child Selectors
Descendant Selector (space between selectors) applies styles to elements inside a parent.
Child Selector (> symbol) applies styles to direct children.
Example (Descendant Selector):
css code
div p { color: green; }
This applies to all <p> elements inside <div>.
Example (Child Selector):
css code
div > p { color: orange; }
This applies only to <p> elements that are direct children of <div>.
Practical Exercise:
Create a <div> with multiple nested <p> elements.
Use both descendant and child selectors to see the difference.
3. Practical Examples & Exercises
Exercise 1: Styling Different Selectors
Create an HTML page with:
A <div> containing a <h1>, <p>, and <span>.
Apply element, class, and ID selectors.
Example Code:
html code
<!DOCTYPE html> <html lang="en"> <head> <style> h1 { color: blue; } .highlight { background-color: yellow; } #unique-text { font-weight: bold; } </style> </head> <body> <h1>CSS Selectors</h1> <p class="highlight">This is highlighted text.</p> <p id="unique-text">This text is bold.</p> </body> </html>
Observe how each selector applies styling.
Exercise 2: Combining Selectors
Modify the above code to:
Apply styles to all <p> elements inside <div>.
Use both class and ID selectors in a single rule.
4. Best Practices for CSS Selectors
Use classes instead of IDs for styling (IDs should be reserved for JavaScript functionality).
Use meaningful names for classes (e.g., .error-message instead of .red-text).
Group similar selectors to avoid repetition (h1, h2, h3 { color: black; }).
Avoid deeply nested selectors to keep the CSS maintainable.
Conclusion
Understanding CSS syntax and selectors is fundamental to styling web pages. By practicing different selector types and their combinations, you can efficiently control the appearance of HTML elements. Use the exercises to build confidence and experiment with CSS rules.
No comments:
Post a Comment