Basic CSS Selectors
Selectors in CSS allow styles to be applied to HTML elements effectively. Understanding their use is essential for web page design.
Syntax
The basic syntax for using selectors in CSS is:[selector] { [property]: [value]; }
Some examples of selectors include: * (universal), element, .class (by class), and #id (by ID).
Purpose
Selectors are fundamental for applying styles to specific elements. For example, they allow:
- Applying color to all h1 headings.
- Styling all elements with a specific class.
- Modifying the style of a unique element by its ID.
Exercises
Interactive Test 1: Drag and Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
color: red;
h1
#my-id
.my-class
h1 { color: red; }
Completa el código:
Indicates which element or group of elements the styles will be applied to.______
Defines the text color.______
Selector that selects all HTML elements of the specified type.______
Selector that selects all HTML elements with the specified class attribute.______
Selector that selects the HTML element with the specified ID attribute.______
Interactive Test 2: Fill in the blanks. In this case, we want to create a red h1 title.
Rellena los huecos en cada casilla.
h1 { color: ; }
Practical Exercise:
Statement:
Write a CSS rule to make all paragraphs have a red text color.
Basic Selectors
| Selector | Description |
|---|---|
| h1 | Selects all h1 elements. |
| .class | Selects all elements with the class 'class'. |
| #id | Selects the element with the id 'id'. |
| div > p | Selects all p elements that are direct children of a div. |
| ul li | Selects all li elements inside a ul. |
| * | Selects all elements. |
* Write your CSS code and apply to see the results.