CSS selectors are used to target HTML elements so you can apply styles to them. The most common basic selectors are Element, Class, and ID selectors. Understanding these is the first step in learning CSS.
Element Selector
The element selector targets HTML elements by their tag name. It applies the same style to all elements of that type.
Example explanation
If you use the p selector, it will style all paragraph elements on the page.
Example code
p
color blue
font size 16px
This means every paragraph will have blue text and a font size of 16 pixels.
Class Selector
The class selector is used to style one or more elements with the same class name. It is more flexible than the element selector because it can be reused multiple times.
To use a class selector, you add a class attribute in HTML and then target it in CSS using a dot before the class name.
Example explanation
If you create a class called box, you can apply the same style to different elements.
Example code
dot box
background color lightgray
padding 10px
In HTML, you can use it like this
div class box
This is a styled box
div
You can use the same class on multiple elements across your webpage.
ID Selector
The ID selector is used to style a single unique element. Each ID should only be used once on a page.
To use an ID selector, you add an id attribute in HTML and target it in CSS using a hash symbol before the ID name.
Example explanation
If you create an ID called header, it will style only that specific element.
Example code
hash header
color red
font size 24px
In HTML, it looks like this
div id header
This is the header section
div
Key Differences
Element selector targets all elements of a specific type
Class selector can be used multiple times and is reusable
ID selector is unique and used for one specific element
Conclusion
Basic selectors are essential for styling web pages. Element selectors are simple, class selectors are flexible, and ID selectors are specific. Mastering these will help you build well-structured and styled websites.
If you want, I can create practice exercises or a full lesson plan for your training website.