🌐 Web Development Roadmap — Part 23

🎨 CSS Fundamentals

What is CSS?

CSS stands for Cascading Style Sheets.

CSS is used to style and design HTML webpages.

HTML creates the structure, while CSS controls how that structure looks.

HTML

  ↓

Structure & Content 

CSS

  ↓

Design & Appearance 

JavaScript

  ↓

Behavior & Interactivity 

Why Do We Need CSS?

Without CSS, a webpage mostly looks like plain structured content.

With CSS, we can control:

• Colors

• Fonts

• Text size

• Spacing

• Borders

• Backgrounds

• Width and height

• Layout

• Alignment

• Responsive design

• Animations

Basic CSS Syntax

selector {
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 32px;
}

Here:

h1          → Selector

color       → Property

blue        → Value

font-size   → Property

32px        → Value 

Connecting CSS with HTML

HTML:

<h1>Welcome to My Website</h1>
<p>I am learning CSS.</p>

CSS:

h1 {
    color: blue;
}

p {
    font-size: 18px;
}

The browser combines the HTML and CSS to display the styled webpage.

CSS Rules

A CSS rule can contain multiple properties:

.card {
    width: 300px;
    padding: 20px;
    background-color: lightgray;
    border-radius: 10px;
}

This allows us to style the entire

.card

element.

CSS Comments

Comments are ignored by the browser and are useful for explaining code.

/* This is a CSS comment */

h1 {
    color: blue;
}

Real-World Example

Think of building a house:

HTML  → Structure of the house

CSS   → Paint, furniture, spacing and appearance

JavaScript → Electrical systems and interactive features 

Key Takeaway

HTML defines what is on the webpage.

CSS defines how it looks.

JavaScript defines how it behaves. 

Double Tap ❤️ For More

🌐 Web Development Roadmap — Part 24

Adding CSS to HTML

There are 3 main ways to add CSS to an HTML page:

1. Inline CSS

2. Internal CSS

3. External CSS

1. Inline CSS

CSS is written directly inside the HTML element using the style attribute.

<h1 style="color: blue;">Welcome</h1>

Here:

style → attribute

color → property

blue → value

You can add multiple properties:

<p style="color: red; font-size: 20px;">
    Hello World
</p>

Inline CSS is useful for quick testing, but it is generally not recommended for larger websites.

2. Internal CSS

CSS is written inside a <style> element, usually in the <head> section.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h1>Welcome</h1>
    <p>I am learning CSS.</p>
</body>
</html>

Internal CSS is useful when styling a single HTML page.

3. External CSS

CSS is stored in a separate .css file.

Project:

my-website/
├── index.html
└── style.css

index.html

<head>
    <link rel="stylesheet" href="style.css">
</head>

style.css

h1 {
    color: blue;
}

p {
    font-size: 18px;
}

The <link> element connects the HTML file with the CSS file.

Why External CSS Is Usually Preferred

Imagine a website with 20 pages.

Instead of writing the same CSS inside every HTML page:

index.html
about.html
contact.html
products.html
...

we can use one CSS file:

style.css
             ↙    ↓    ↘
        index   about   contact
        .html   .html    .html

This makes the website:

• Easier to maintain

• More organized

• Reusable

• Easier to update

• Better suited for larger projects

Best Practice

For modern web development, you will usually work with external CSS:

<link rel="stylesheet" href="style.css">

This keeps your HTML focused on structure and your CSS focused on presentation.

Double Tap ❤️ For More

🌐 Web Development Roadmap — Part 25

CSS Selectors

CSS selectors tell the browser which HTML elements you want to style.

Basic structure:

selector {
    property: value;
}

For example:

p {
    color: blue;
}

This means: select all

<p>

elements and make their text blue.

1. Element Selector

Selects all elements of a particular HTML tag.

<h1>Hello</h1>
<p>Welcome</p>
<p>Learning CSS</p>

p {
    color: blue;
}

All

<p>

elements become blue.

2. Class Selector

A class is used when you want to apply the same style to multiple elements.

HTML:

<p class="highlight">Important text</p>
<p class="highlight">Another important text</p>

CSS:

.highlight {
    color: red;
}

The

.

indicates a class selector.

.highlight

    ↑

  class

3. ID Selector

An ID identifies a specific element.

HTML:

<h1 id="main-title">My Website</h1>

CSS:

#main-title {
    color: green;
}

The

#

indicates an ID selector.

#main-title

     ↑

    ID

An ID should generally be unique within a page.

4. Universal Selector

The

*

selects all elements.

* {
    margin: 0;
}

This applies the rule to all elements.

5. Grouping Selector

You can style multiple selectors with the same CSS rule.

Instead of:

h1 {
    color: blue;
}

h2 {
    color: blue;
}

p {
    color: blue;
}

You can write:

h1, h2, p {
    color: blue;
}

This keeps the CSS cleaner.

6. Descendant Selector

Selects an element that exists inside another element.

HTML:

<div>
    <p>Hello</p>
</div>

<p>Outside</p>

CSS:

div p {
    color: red;
}

Only the

<p>

inside the

<div>

is selected.

div
 └── p  ← selected

p       ← not selected

7. Child Selector

The

>

selects only direct children.

<div>
    <p>Direct child</p>

    <section>
        <p>Nested paragraph</p>
    </section>
</div>

div > p {
    color: blue;
}

Only the first

<p>

is selected because it is a direct child of

<div>

.

8. Attribute Selector

You can select elements based on their attributes.

For example:

<input type="text">
<input type="email">

input[type="email"] {
    border: 2px solid blue;
}

Only the email input is selected.

Quick Reference

p

→ Element

.highlight

→ Class

#main-title

→ ID

*

→ All elements

h1, p

→ Grouping

div p

→ Descendant

div > p

→ Direct child

input[type="email"]

→ Attribute 

Important Rule

When building websites, you'll use class selectors very frequently because classes are reusable and work well with component-based styling.

One class can style many elements.

Double Tap ❤️ For More

𝗕𝗘𝗦𝗧 𝗙𝗥𝗘𝗘 𝗣𝗬𝗧𝗛𝗢𝗡 𝗖𝗘𝗥𝗧𝗜𝗙𝗜𝗖𝗔𝗧𝗜𝗢𝗡𝗦 𝗜𝗡 𝟮𝟬𝟮𝟲! 🎓

Discover some of the best FREE Python learning and certification opportunities

✅ Free Python Learning Resources
✅ Beginner-Friendly Courses
✅ Practical Programming Knowledge
✅ Explore Available Certificates & Badges
✅ Strengthen Your Resume & LinkedIn Profile

🔗 𝗟𝗶𝗻𝗸 :- 👇

https://pdlink.in/4iVDpmN

📌 SAVE this post & SHARE with friends preparing for tech careers! 🔥

🌐 Web Development Roadmap, Part 26

CSS Colors & Backgrounds

CSS colors and backgrounds help you control the appearance of webpage elements.

You can change text colors, background colors, background images, and more.

1. CSS Color Property

The color property changes the text color of an element.

<h1>Welcome to My Website</h1>
<p>Learning CSS is fun.</p>

h1 {
    color: blue;
}

p {
    color: red;
}

You can use predefined color names such as:

• red

• blue

• green

• black

• white

• orange

• purple

• gray

• pink

• yellow

2. HEX Colors

HEX stands for hexadecimal color notation.

It uses a # followed by six characters.

h1 {
    color: #FF0000;
}

p {
    color: #0000FF;
}

Some common HEX colors:

• Red: #FF0000

• Green: #00FF00

• Blue: #0000FF

• Black: #000000

• White: #FFFFFF

• Yellow: #FFFF00

3. RGB Colors

RGB stands for:

• R = Red

• G = Green

• B = Blue

Each value ranges from 0 to 255.

h1 {
    color: rgb(255, 0, 0);
}

This produces red.

Examples:

.red {
    color: rgb(255, 0, 0);
}

.green {
    color: rgb(0, 255, 0);
}

.blue {
    color: rgb(0, 0, 255);
}

4. RGBA Colors

RGBA adds an alpha channel to RGB.

The alpha value controls transparency.

It ranges from 0 to 1.

.box {
    background-color: rgba(255, 0, 0, 0.5);
}

Here:

• 1 = Fully opaque

• 0.5 = 50% opacity

• 0 = Fully transparent

5. HSL Colors

HSL stands for:

• H = Hue

• S = Saturation

• L = Lightness

Example:

h1 {
    color: hsl(0, 100%, 50%);
}

Another example:

p {
    color: hsl(240, 100%, 50%);
}

This produces blue.

6. Background Color

The background-color property changes the background of an element.

body {
    background-color: lightblue;
}

h1 {
    background-color: yellow;
}

You can use color names, HEX, RGB, RGBA, or HSL values.

7. Background Images

You can add images as backgrounds using background-image.

body {
    background-image: url("background.jpg");
}

This displays an image behind the webpage content.

8. Background Size

The background-size property controls how the background image fits inside an element.

body {
    background-image: url("background.jpg");
    background-size: cover;
}

Common values:

• cover — Covers the entire container.

• contain — Fits the entire image inside the container.

• auto — Uses the original image dimensions.

9. Background Repeat

By default, background images may repeat if they are smaller than their container.

body {
    background-image: url("pattern.png");
    background-repeat: no-repeat;
}

Other values:

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

10. Background Position

Controls where the background image appears.

body {
    background-image: url("background.jpg");
    background-position: center;
}

• center

• top

• bottom

• left

• right

11. Background Shorthand

You can combine multiple background properties into one declaration.

body {
    background: lightblue url("background.jpg") no-repeat center / cover;
}

This sets the background color, image, repeat behavior, position, and size.

Real-World Example: Website Banner

<div class="banner">
    <h1>Welcome to Our Website</h1>
    <p>Learn web development with us.</p>
</div>

```css
.banner {
background-color: #1E3A8A;
color: white;
padding: 50px;
text-align: center;
border-radius: 12px;
}`


This creates a simple website banner with a dark blue background and white text.

Quick Revision

color → Changes text color

background-color → Changes background color

background-image → Adds background image

background-size → Controls image size

background-repeat → Controls image repetition

background-position → Controls image placement

Double Tap ❤️ For More

𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝘄𝗶𝘁𝗵 𝗚𝗲𝗻𝗔𝗜 - 𝗣𝗮𝘆 𝗔𝗳𝘁𝗲𝗿 𝗣𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁 😍

💰 Highest Salary: ₹41 LPA
📈 Average Salary: ₹7.4 LPA
🎓 2,000+ Students Placed
🏢 500+ Hiring Partners

𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗡𝗼𝘄 👇 :-

https://pdlink.in/3SuUeuD

🔥 Take the first step towards your high-paying tech career in 2026!

𝗝.𝗣. 𝗠𝗢𝗥𝗚𝗔𝗡 𝗙𝗥𝗘𝗘 𝗩𝗜𝗥𝗧𝗨𝗔𝗟 𝗣𝗥𝗢𝗚𝗥𝗔𝗠𝗦 𝟮𝟬𝟮𝟲! 🎓

Explore J.P. Morgan's FREE Virtual Job Simulation Programs

✅ 100% FREE Virtual Learning
✅ Work on Practical, Industry-Based Tasks
✅ Learn at Your Own Pace
✅ Build Valuable Professional Skills

🎯 Perfect For:- College Students | Freshers | Graduates | Job Seekers

🔗 𝗟𝗶𝗻𝗸 👇:-

https://pdlink.in/3X8KJmE

⚡ Learn New Skills • Gain Practical Exposure • Boost Your Career!

🚀 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗖𝗼𝘂𝗿𝘀𝗲 📊

Learn Excel, SQL, Python & Power BI Live Online Data Analytics Program

💰 Highest Salary: ₹12.6 LPA
📈 Average Salary: ₹5.7 LPA
🏢 500+ Partner Companies

𝗔𝗽𝗽𝗹𝘆 𝗡𝗼𝘄👇 :-

https://pdlink.in/45vk5ph

🔥 Turn your interest in data into practical, job-ready skills!

🌐 Web Development Roadmap, Part 27

CSS Units (px, %, em, rem, vh, vw and fr)

CSS units define the size of elements, text, spacing, widths, heights, and layouts.

For example, when you write:

h1 {
font-size: 32px;
}
The px defines the size of the heading.

CSS units are divided into two main categories:

• Absolute units
• Relative units

1. Pixels (px)

Pixels are commonly used to define fixed sizes.

.box {
width: 300px;
height: 200px;
padding: 20px;
}
Here:

• Width = 300 pixels
• Height = 200 pixels
• Padding = 20 pixels

Use pixels when you need a specific size.

2. Percentage (%)

Percentage defines a size relative to the parent element's corresponding dimension.

<div class="parent">
<div class="child">Hello</div>
</div>
`
.parent {
width: 600px;
}

.child {
width: 50%;
}

The child width will be 300px because it is 50% of its parent's 600px width.

3. EM (em)

em is a relative unit.

For font size, it is calculated relative to the inherited font size of the parent.

.parent {
font-size: 20px;
}

.child {
font-size: 2em;
}

The child font size becomes 40px.

Calculation:

20px × 2 = 40px

Note: For properties such as padding and margin, em is based on the font size of the element itself.

4. REM (rem)

rem stands for Root EM.

It is calculated relative to the font size of the root HTML element.

By default, browsers generally use 16px as the root font size.

html {
font-size: 16px;
}

h1 {
font-size: 2rem;
}


16px × 2 = 32px

So the heading will have a font size of 32px.

Difference between em and rem:

• em depends on the relevant element's inherited or own font size, depending on the property.
• rem depends on the root HTML font size.

5. Viewport Height (vh)

vh represents a percentage of the viewport height.

1vh = 1% of viewport height.

.hero {
height: 100vh;
}

This makes the element as tall as the viewport.

Useful for:

• Full-screen sections
• Landing pages
• Hero sections

6. Viewport Width (vw)

vw represents a percentage of the viewport width.

1vw = 1% of viewport width.

.container {
width: 80vw;
}

This makes the container 80% of the viewport width.

• Responsive layouts
• Full-width sections
• Flexible sizing

7. FR Unit

fr stands for fractional unit.

It is mainly used with CSS Grid to divide available space into fractions.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

This creates three equal-width columns.

Another example:

.container {
display: grid;
grid-template-columns: 2fr 1fr;
}

The first column gets twice the available space of the second column.

8. Other CSS Units

Some additional units you should know:

• cm, Centimeters
• mm, Millimeters
• in, Inches
• pt, Points
• pc, Picas
• vmin, 1% of the smaller viewport dimension
• vmax, 1% of the larger viewport dimension
• ch, Based on the width of the "0" character
• ex, Based on the x-height of the font

9. Practical Example

Let's create a responsive card using different CSS units.

HTML:

<div class="card">
<h2>Learn Web Development</h2>
<p>Start learning HTML, CSS and JavaScript.</p>
</div>

CSS:

.card {
width: 80%;
max-width: 500px;
padding: 2rem;
margin: 5vh auto;
background-color: lightblue;
border-radius: 1rem;
}

.card h2 {
font-size: 2rem;
}

.card p {
font-size: 1rem;
}

`

This example combines percentages, pixels, rem, and vh to create a flexible layout.

10. Quick Comparison

• px: Meaning Pixels · Common usage Fixed sizing
• %: Meaning Percentage · Common usage Relative sizing
• em: Meaning Relative to font size · Common usage Text and spacing

- rem: Meaning Relative to root font size · Common usage Consistent typography
- vh: Meaning Viewport height · Common usage Full-screen sections
- vw: Meaning Viewport width · Common usage Responsive widths
- fr: Meaning Fraction · Common usage CSS Grid layouts

Key Takeaways

- Use

px

for fixed dimensions.

- Use

%

for relative sizing.

- Use

em

and

rem

for scalable typography and spacing.

- Use

vh

and

vw

for viewport-based sizing.

- Use

fr

to divide available space in CSS Grid.

Understanding CSS units is essential for creating responsive websites that work across mobile phones, tablets, and desktops.

Double Tap ❤️ For More