Home > Article > Web Front-end > CSS: selectors and properties
In this lecture, we'll dive into the building blocks of CSS: selectors and properties. These are essential concepts that allow you to target specific elements on your webpage and style them effectively.
CSS selectors are patterns used to select the HTML elements you want to style. Different types of selectors allow you to apply styles to various elements based on their tag, class, ID, attributes, and more.
Element (Type) Selector:
p { color: green; }
This will change the color of all e388a4556c0f65e1904146cc1a846bee elements to green.
Class Selector:
.highlight { background-color: yellow; }
In your HTML, any element with class="highlight" will have a yellow background.
<p class="highlight">This is highlighted text.</p>
ID Selector:
#header { font-size: 24px; }
Only the element with id="header" will have a font size of 24px.
<div id="header">Welcome to My Website</div>
Group Selector:
h1, h2, h3 { color: blue; }
This rule will make all 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, and 684271ed9684bde649abda8831d4d355 elements blue.
Descendant Selector:
div p { font-style: italic; }
This will make all e388a4556c0f65e1904146cc1a846bee elements inside a dc6dce4a544fdca2df29d5ac0ea9906b italicized.
<div> <p>This text is italicized because it's inside a div.</p> </div>
CSS properties define what aspects of the selected elements you want to style. Each property is followed by a value that specifies the desired outcome.
Color:
h1 { color: red; }
Background-Color:
body { background-color: #f0f0f0; }
Font-Size:
p { font-size: 16px; }
Margin:
.box { margin: 20px; }
Padding:
.content { padding: 10px; }
Let’s combine what we’ve learned with a simple example.
HTML:
8ca2b4eb17525146e680c309e9dfa6a5 4a249f0d628e2318394fd9b75b4636b1Welcome to CSS Basics473f0a7621bec819994bb5020d29372a 03c914392195facb4bb03ef129401e65This is an introduction to CSS selectors and properties.94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeSelectors help you target elements, and properties allow you to style them.94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68
CSS:
/* ID Selector */ #container { border: 2px solid black; padding: 10px; } /* Element Selector */ h1 { color: purple; } /* Class Selector */ .intro { background-color: lightblue; font-size: 18px; } /* Group Selector */ h1, p { font-family: Arial, sans-serif; } /* Descendant Selector */ #container p { margin-bottom: 15px; }
In this example:
Next Up: In the next lecture, we'll explore the CSS Box Model and learn how margins, borders, padding, and content come together to define the layout of your web elements. See you there!
LinkedIn- Ridoy Hasan
-
The above is the detailed content of CSS: selectors and properties. For more information, please follow other related articles on the PHP Chinese website!