CSS Syntax and Selectors
Learn the basic syntax of CSS, including properties, values, and selectors. Understand different types of selectors (element, class, ID, etc.).
CSS Basics Example
Introduction
This is an introduction to CSS basics. We'll cover syntax, selectors, and how to apply styles to your HTML elements.
CSS is essential for making your web pages look good and be user-friendly.
CSS Syntax
CSS rules consist of a selector and a declaration block.
The declaration block contains one or more declarations, each consisting of a property and a value.
Example: p { color: blue; font-size: 16px; }
CSS Selectors
Selectors are used to target the HTML elements you want to style.
- Element Selectors: Target HTML elements by their name (e.g.,
p
,h1
,body
). - Class Selectors: Target elements with a specific class attribute (e.g.,
.highlight
). Use the `.` symbol followed by the class name. - ID Selectors: Target a single element with a specific ID attribute (e.g.,
#introduction
). Use the `#` symbol followed by the ID. IDs should be unique on a page. - Grouping Selectors: Apply the same styles to multiple elements (e.g.,
h1, h2, h3
). - Descendant Selectors: Target elements that are descendants of another element (e.g.,
section p
targets all <p> elements inside <section> elements).