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

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

🚀 𝗔𝗜 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗖𝗼𝘂𝗿𝘀𝗲 😍| 𝗕𝗲𝗰𝗼𝗺𝗲 𝗮𝗻 𝗔𝗜 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿

This AI engineering course online is structured around AI fundamentals, full-stack development, real-world AI projects

💫2000+ Students Placed
🎥 Live Classes + Session Recordings
👨‍💻 1:1 Mentorship & Doubt Support
💼 Interview Preparation & Placement Assistance

𝗕𝗼𝗼𝗸 𝗮 𝗙𝗥𝗘𝗘 𝗗𝗲𝗺𝗼👇:-
​
https://pdlink.in/4fWJVID

🔥 Take the next step towards building your career in AI!

🌐 Web Development Roadmap — Part 28

CSS Text & Fonts

CSS text and font properties help you control how text looks on a webpage.

You can change font styles, sizes, thickness, alignment, spacing, and decoration.

1. font-family

The font-family property defines which font is displayed.

h1 {
    font-family: Arial, sans-serif;
}

p {
    font-family: Georgia, serif;
}

Common font families:

• Arial
• Times New Roman
• Georgia
• Verdana
• Courier New
• Tahoma

You can also provide fallback fonts:

body {
    font-family: Arial, Helvetica, sans-serif;
}

If the first font isn't available, the browser tries the next one.

2. font-size

Controls the size of the text.

h1 {
    font-size: 32px;
}

p {
    font-size: 18px;
}

You can use different units such as px, em, and rem.

3. font-weight

Controls how thick or bold the text appears.

h1 {
    font-weight: bold;
}

p {
    font-weight: normal;
}

Common values:

+-------+------------+
| Value | Meaning    |
+-------+------------+
| 100   | Thin       |
| 300   | Light      |
| 400   | Normal     |
| 500   | Medium     |
| 600   | Semi-bold  |
| 700   | Bold       |
| 900   | Extra bold |
+-------+------------+

The availability of each weight depends on the font.

4. font-style

Controls whether text appears normal, italic, or oblique.

p {
    font-style: italic;
}

Common values:

• normal
• italic
• oblique

5. text-align

Controls the horizontal alignment of text.

h1 {
    text-align: center;
}

Common values:

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

6. text-decoration

Adds or removes decorative lines from text.

h1 {
    text-decoration: underline;
}

Common values:

• underline – Line below text
• overline – Line above text
• line-through – Line through text
• none – Removes decoration

Example:

a {
    text-decoration: none;
}

This is commonly used to remove the default underline from links.

7. text-transform

Controls the capitalization of text.

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

For example, hello world becomes:

• Uppercase: HELLO WORLD
• Lowercase: hello world
• Capitalize: Hello World

8. line-height

Controls the vertical space between lines of text.

p {
    line-height: 1.6;
}

A suitable line height makes paragraphs easier to read.

9. letter-spacing

Controls the spacing between individual characters.

h1 {
    letter-spacing: 2px;
}

10. word-spacing

Controls the spacing between words.

p {
    word-spacing: 5px;
}

11. text-indent

Adds indentation to the first line of a paragraph.

p {
    text-indent: 30px;
}

12. Google Fonts

Google Fonts provides a large collection of fonts that you can use in websites.

For example, you can use the Roboto font.

Add this inside the HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Then apply it using CSS:

body {
    font-family: "Roboto", sans-serif;
}

13. Real-World Example

Let's design a simple heading and paragraph.

HTML:

<div class="content">
    <h1>Learn Web Development</h1>

    <p>
        Start your journey with HTML, CSS and JavaScript.
    </p>
</div>

CSS:

.content {
    font-family: Arial, sans-serif;
    text-align: center;
}

h1 {
    font-size: 32px;
    font-weight: 700;
    color: blue;
    letter-spacing: 1px;
}

p {
    font-size: 18px;
    line-height: 1.6;
    color: gray;
}

This creates a clean heading and readable paragraph.

Double Tap ❤️ For Part-29

𝗚𝗢𝗢𝗚𝗟𝗘 𝟱 𝗙𝗥𝗘𝗘 𝗧𝗘𝗖𝗛 𝗖𝗢𝗨𝗥𝗦𝗘𝗦 𝟮𝟬𝟮𝟲! 🎓💻

Explore 5 FREE Google learning courses to build in-demand technical skills and strengthen your resume! 🚀

✅ FREE Learning Resources
✅ Beginner-Friendly Courses
✅ Learn at Your Own Pace
✅ Explore Hands-On Learning Opportunities
✅ Build Skills for AI, ML & Cloud Careers

🔗 𝗟𝗶𝗻𝗸 :- 👇

https://pdlink.in/4kMcA5X

⚡ Don't wait to upgrade your skills — start learning today!

🌐 Web Development Roadmap: Part 29

CSS Box Model

The CSS Box Model is one of the most important concepts in CSS.

Every HTML element displayed on a webpage is treated as a rectangular box.

The CSS Box Model explains how much space an element occupies and how spacing is calculated.

There are four main components:

• Content
• Padding
• Border
• Margin

1. Content

Content is the actual information inside an HTML element.

It can be:

• Text
• Images
• Videos
• Other HTML elements

Example:

<div class="box">
    Hello World
</div>

.box {
    width: 200px;
    height: 100px;
}

Here, the content area has a width of 200px and a height of 100px.

2. Padding

Padding is the space between the content and the border.

Think of it as the inner spacing of an element.

.box {
    padding: 20px;
}

This adds 20px of space around the content, inside the border.

You can also control individual sides:

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Shorthand:

.box {
    padding: 10px 20px;
}

This means:

• Top and bottom: 10px
• Left and right: 20px

3. Border

A border is the line surrounding the content and padding.

.box {
    border: 2px solid black;
}

A border has three important parts:

border-width → Thickness
border-style → Appearance
border-color → Color

Common border styles:

• solid
• dashed
• dotted
• double
• none

.box {
    border-width: 2px;
    border-style: dashed;
    border-color: blue;
}

You can also create rounded corners:

.box {
    border-radius: 10px;
}

4. Margin

Margin is the space outside the border.

It creates distance between an element and other elements.

.box {
    margin: 20px;
}

This adds 20px of outer spacing around the element.

Individual sides:

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Understanding the Complete Box Model

!Box Model Demystified: Margin, Border, Padding & Content - Euron Daily | Euron Community (https://images.openai.com/static-rsc-4/6QJcx04vBL9VuPb5kAm42ecvX0rwhhY6hbJ2wCXzsWp7qVEOFFzO5qpDH8ddAuR402U1Elwak6mv71o_MeVh_LagfLO16F2oQQtq74fIFPDo3SvJTRKz9Zt2LD4AZmdZDmSDpMr2NOhKUkD6oKj4jRKEu91aVGc9KYwmwZF8iwwPPppNylNX2OKr7jcMX7ta?purpose=fullsize)

Remember the order:

OUTSIDE
┌──────────────────────────┐
│         MARGIN           │
│  ┌────────────────────┐  │
│  │      BORDER        │  │
│  │  ┌──────────────┐  │  │
│  │  │   PADDING    │  │  │
│  │  │  ┌────────┐  │  │  │
│  │  │  │CONTENT │  │  │  │
│  │  │  └────────┘  │  │  │
│  │  └──────────────┘  │  │
│  └────────────────────┘  │
└──────────────────────────┘

5. Understanding Box Size Calculation

By default, CSS uses content-box.

Consider this example:

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

The total width is calculated as:

• Content: 200px
• Left and right padding: 40px
• Left and right border: 10px
• Left and right margin: 20px
• Total space: 270px

So, the element occupies 270px of horizontal space, including its margins.

6. What Is box-sizing?

The box-sizing property controls how the browser calculates an element's dimensions.

There are two commonly used values:

A. content-box

This is the default value.

The specified width applies only to the content.

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
}

Total width excluding margin = 250px.

B. border-box

With border-box, the specified width includes content, padding, and border.

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

Total width excluding margin = 200px.

Many developers use this globally:

* {
    box-sizing: border-box;
}

This makes sizing and layout calculations easier.

HTML:

<div class="card">
    <h2>Laptop</h2>
    <p>Price: ₹50,000</p>
    <button>Buy Now</button>
</div>

CSS:

* {
    box-sizing: border-box;
}

.card {
    width: 300px;
    padding: 20px;
    margin: 20px;
    border: 2px solid gray;
    border-radius: 10px;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: blue;
    color: white;
}

Here:

• Width controls the card's size.
• Padding creates inner spacing.
• Border creates an outline.
• Margin creates outer spacing.
• Border radius rounds the corners.

8. Quick Revision

• content: Actual element content
• padding: Space inside the border
• border: Line around the element
• margin: Space outside the border
• box-sizing: Controls size calculation
• border-radius: Rounds the corners

Key Takeaway

Remember this simple rule:

• Content = What is inside?
• Padding = How much inner space?
• Border = What surrounds it?
• Margin = How much outer space?

Understanding the Box Model will help you control spacing, dimensions, and layouts when designing professional websites.

Double Tap ❤️ For More

🚀 𝗠𝗜𝗖𝗥𝗢𝗦𝗢𝗙𝗧 + 𝗟𝗜𝗡𝗞𝗘𝗗𝗜𝗡 𝗙𝗥𝗘𝗘 𝗖𝗢𝗨𝗥𝗦𝗘𝗦! 🎓🔥

😍 Explore 5 FREE Career Learning Paths to boost your resume!

📊 Data Analytics | ☁️ Cloud Computing | 🤖 AI | 🔐 Cybersecurity | 💻 Software Development

✅ Learn In-Demand Skills
✅ Explore Certificate Opportunities
✅ Perfect for Students, Freshers & Job Seekers

🔗 𝗟𝗶𝗻𝗸 :- 👇

https://pdlink.in/4eOufX9

📲 Share with your friends! 🔥