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.