Introduction
CSS (Cascading Style Sheets) is the backbone of web design, allowing developers to control the look and feel of websites. To effectively style web pages, you need to understand CSS selectors and properties. In this guide, we’ll break down the basics and how they help define the appearance of HTML elements.
What Are CSS Selectors?
CSS selectors are patterns used to target specific HTML elements for styling. They tell the browser which elements to apply styles to. There are different types of selectors:
1. Universal Selector (*
)
Applies styles to all elements on a page.
* {
margin: 0;
padding: 0;
}
2. Element Selector
Targets specific HTML elements like <p>
, <h1>
, and <div>
.
p {
color: blue;
}
3. Class Selector (.
)
Selects elements with a specific class attribute.
.red-text {
color: red;
}
<p class="red-text">This text will be red.</p>
4. ID Selector (#
)
Targets an element with a unique ID.
#header {
background-color: black;
color: white;
}
<div id="header">Welcome</div>
5. Grouping Selector (A, B
)
Applies styles to multiple elements at once.
h1, h2, h3 {
font-family: Arial, sans-serif;
}
6. Descendant Selector (A B
)
Targets elements inside a specific container.
div p {
font-size: 18px;
}
<div>
<p>This paragraph inside a div will be affected.</p>
</div>

What Are CSS Properties?
CSS properties define how elements look and behave. They are paired with values to control appearance.
1. Text Styling Properties
Property | Description | Example |
---|---|---|
color | Sets text color | color: blue; |
font-size | Defines text size | font-size: 20px; |
font-weight | Adjusts text boldness | font-weight: bold; |
text-align | Aligns text | text-align: center; |
2. Box Model Properties
Property | Description | Example |
margin | Space outside an element | margin: 10px; |
padding | Space inside an element | padding: 15px; |
border | Adds a border | border: 2px solid black; |
width | Sets element width | width: 100px; |
3. Background and Layout Properties
Property | Description | Example |
background-color | Sets background color | background-color: lightgray; |
display | Defines element display type | display: flex; |
position | Positions elements | position: absolute; |
flex-direction | Controls flex container layout | flex-direction: row; |
Conclusion
CSS selectors and properties are essential for styling web pages. Mastering their basics helps you create visually appealing and user-friendly websites. By using the right selectors and properties, you can enhance the structure, readability, and performance of your web designs.