Day 7 – CSS Properties, Selectors & Units

Anime Day 7 – CSS Properties, Selectors & Units
Anime

Day 7 – CSS Properties, Selectors & Units

July 29, 2025

✨ Blog Post: Day 7 – CSS Properties, Selectors & Units

📥 Download Notes + Code Examples (PDF)
👉 Click here to download Day 7 Notes (Add your actual PDF link)

📝 Introduction

Welcome to Day 7 of our 15-Day Web Development Series. Today, we dive into the fundamentals of CSS properties, selectors, and units — the essential tools that let you transform a plain HTML page into a visually engaging website.

🎯 What Are CSS Properties?

CSS properties are the rules you use to style HTML elements — including layout, color, spacing, and more.

✅ Syntax

selector {
property: value;
}

🔍 Example

p {
color: blue;
font-size: 18px;
}

🧱 Common CSS Properties Explained

Property Purpose Example
color Sets the text color color: red;
background-color Sets the background color background-color: lightblue;
font-size Controls text size font-size: 20px;
padding Adds space inside the element padding: 10px;
margin Adds space outside the element margin: 15px;
border Creates a border around the element border: 1px solid black;

🎯 CSS Selectors

Selectors target HTML elements to apply CSS styles.

1. Universal Selector

Applies styles to all elements.

* {
box-sizing: border-box;
}

2. Element Selector

Targets all elements of a specific tag.

h1 {
color: green;
}

3. Class Selector

Targets elements with a specific class name.

.box {
padding: 20px;
}

4. ID Selector

#header {
background-color: gray;
}

5. Group Selector

h1, h2, h3 {
font-family: sans-serif;
}

📐 CSS Units: Absolute vs Relative

Understanding CSS units is key for responsive design.

📏 Absolute Units

  • px → Pixels (fixed)

  • cm, mm, in → For print (rare in web)

p {
font-size: 16px;
}

📏 Relative Units

  • % → Relative to parent element

  • em → Relative to parent’s font size

  • rem → Relative to root font size

  • vw, vh → Viewport width/height

div {
width: 80%;
padding: 1.5em;
}

💡 Example: Styled Box

🔹 HTML

<div class="card">
<h2>Hello CSS</h2>
<p>This is a styled card.</p>
</div>

🔹 CSS

.card {
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
font-family: Arial;
}

🧪 Practice Task

  1. Create a paragraph with class="content" and style it with:

    • Font-size: 18px

    • Line-height: 1.5

    • Text-align: justify

  2. Create a div with id="wrapper" and style it with:

    • Background: #e0e0e0

    • Padding: 30px

    • Border-radius: 10px

✅ Summary – Key Takeaways

  • CSS properties control how HTML looks.

  • Use selectors (.class, #id, element) to apply styles effectively.

  • Units like px, %, em, and rem affect layout responsiveness.

  • Group selectors and consistent units keep code clean.

Leave a Reply

Your email address will not be published. Required fields are marked *