CSS Basics

CSS (Cascading Style Sheets) is used to style HTML elements. It

controls the layout, colors, fonts, and responsiveness of web pages.

Why Learn CSS?

✅ Enhances the look and feel of web pages

✅ Controls layout and positioning
✅ Enables responsive design for different screen sizes
✅ Improves user experience and accessibility
Selectors in CSS

CSS selectors are patterns used to select and style HTML elements.
📌 Basic Syntax:
css

selector {
property: value;
}

Example:

css

p {
color: blue;
}

Here:

p → Selector (targets `<p>` elements)

color → Property (defines text color)
blue → Value (sets text color to blue)

1. Simple Selectors

1.1 Element Selector

📌 Targets HTML elements directly.

css

h1 {
font-size: 24px;
}

✅ Styles all `<h1>` elements on the page.

1.2 Class Selector (`.`)

📌 Targets elements with a specific class.

css

.my-class {
color: red;
}

✅ Use: `<p class="my-class">Hello</p>`

1.3 ID Selector (`#`)

📌 Targets a specific element with an ID.

css

#unique-id {
background-color: yellow;
}

✅ Use: `<div id="unique-id">Content</div>`

🚨 Note: IDs should be unique on a page!

2. Pseudo-class Selectors

📌 Apply styles based on an element’s state.

Example: Hover Effect

css

button:hover {
background-color: green;
}

✅ Changes button color when hovered over.

Common Pseudo-classes:

`:hover` → On mouse hover

`:focus` → When an input field is active
`:nth-child(n)` → Selects nth child of a parent

Example:

css

ul li:nth-child(2) {
color: purple;
}

✅ Styles only the 2nd `<li>` in a `<ul>`.

3. Multiple Selectors

📌 Apply the same style to multiple elements.

Example:

css

h1, h2, p {
color: darkblue;
}

✅ Styles h1, h2, and p elements together.

Additional Notes

✔ CSS Specificity: IDs ( ) > Classes (

`#id` ) > Elements ( `.class` `h1,
).
✔ Inheritance: Some properties (like ) are inherited by child
p`
`color`
elements.
✔ Box Model: Understanding , , , and
`margin` `padding` `border`
is crucial.
✔ Responsive Design: Use
`width`
queries for mobile-friendly
`@media`
layouts.

References:

📌 MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS

📌 W3Schools: https://www.w3schools.com/css/
📌 CSS Tricks: https://css-tricks.com
Let me know if you need more topics covered! 🚀

CSS Selectors Explained

CSS selectors help target and style specific HTML elements. They
allow developers to apply styles efficiently and maintain cleaner
code.

1️⃣ Element Selector

📌 Targets all elements of a specific type (tag name).
📌 Syntax:
css

tagname {
property: value;
}

✅ Example:
css

p {
font-size: 18px;
color: #333;
}

🔹 Styles all elements on the page.

`<p>`

💡 Best Use: Apply styles when all elements of a specific type should
look the same.

2️⃣ Class Selector ( `.`)

📌 Targets elements with a specific class attribute.

📌 Classes can be shared by multiple elements.
📌 Syntax:
css

.classname {
property: value;
}

✅ Example:
css

.highlight {
background-color: yellow;
font-weight: bold;
}

🔹 Usage in HTML:
html

<p class="highlight">This is highlighted text.</p>

💡 Best Use: Use classes to reuse styles across multiple elements

without affecting others.

3️⃣ ID Selector ( `#`)

📌 Targets a single unique element using its ID attribute.

📌 Each ID should be unique on a page!
📌 Syntax:
css

#idname {
property: value;
}

✅ Example:
css

#main-heading {
font-size: 24px;
color: blue;
}

🔹 Usage in HTML:
html

<h1 id="main-heading">Welcome</h1>

💡 Best Use: IDs are often used for JavaScript interactions or

unique page elements like navigation bars.

🚨 Warning: Avoid using IDs for styling unless necessary, as they

have higher specificity than classes.

4️⃣ Pseudo-class Selectors

📌 Apply styles based on an element’s state.
📌 Common Pseudo-classes:
`:hover` → When the mouse is over an element
`:focus` → When an input field is clicked
`:nth-child(n)` → Selects the nth child of a parent

📌 Syntax:
css

selector:pseudo-class {
property: value;
}

✅ Example:
css

button:hover {
background-color: green;
color: white;
}

🔹 Changes button color when hovered.

💡 Best Use: Use pseudo-classes to enhance user interactions
dynamically.

5️⃣ Multiple Selectors

📌 Apply the same style to multiple elements at once.
📌 Separate selectors using a comma ( ). `,`

📌 Syntax:
css

selector1, selector2 {
property: value;
}

✅ Example:
css

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

🔹 Styles h1, h2, and p elements together.

💡 Best Use: Helps avoid code duplication and keeps styles
consistent across multiple elements.

🔹 Additional Notes
✔ CSS Specificity: IDs ( ) > Classes (
`#id` ) > Elements`.class`
( ).
✔ Best Practices: Prefer classes over IDs for styling.
`tagname`

✔ Box Model: Remember , , , and

`margin` `padding` `border` `width`
are key for layout.
✔ Avoid Redundant Code: Use multiple selectors and class-based
styles instead of repeating rules.

📌 References:
🔗 MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
🔗 W3Schools: https://www.w3schools.com/css/
🔗 CSS Tricks: https://css-tricks.com
Let me know if you need further improvements! 🚀

Exploring CSS Selectors & Styling Methods

CSS offers multiple ways to select elements and apply styles.

Choosing the right method improves code organization,
maintainability, and efficiency.

1️⃣ Universal Selector ( `*`)

📌 Applies styles to all elements on the page.

📌 Useful for resetting margins, padding, and applying global
styles.
📌 Syntax:
css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

✅ Example:
css

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

🔹 Styles all elements with Arial font.

💡 Best Use: Great for CSS resets and global styling.
2️⃣ Nested Selectors
📌 Targets elements inside a specific parent element.
📌 Helps organize styles efficiently.
📌 Syntax:
css

parent child {
property: value;
}

✅ Example:
css

nav ul li {
list-style: none;
}

🔹 Targets inside inside .

`<li>` `<ul>` `<nav>`

💡 Best Use: Ideal for menus, forms, and layouts with structured
elements.

3️⃣ Attribute Selector

📌 Targets elements based on attributes.
📌 Useful for styling input fields, buttons, and custom
attributes.
📌 Syntax:
css

element[attribute="value"] {
property: value;
}

✅ Example:
css

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

🔹 Targets only text input fields.

💡 Best Use: Style specific types of elements without adding extra
classes.

How to Add Styling to HTML?

CSS can be added using three methods:

1️⃣ Inline CSS (Avoid unless necessary ❌)

2️⃣ Internal CSS (For single-page styles)
3️⃣ External CSS (Best practice ✅)
4️⃣ Inline CSS
📌 Applied directly inside an HTML tag using attribute.
📌 Should be avoided as it makes code harder to maintain.
`style`

📌 Syntax:
html

<p style="color: red; font-size: 20px;">This is inline CSS.</p>

💡 Best Use: Temporary styles or quick fixes. Prefer classes

instead.

5️⃣ Internal CSS ( `<style>` Tag)

📌 Written inside the section of an HTML file.

📌 Affects only that specific HTML file.
`<head>`

📌 Syntax:
html

<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>

✅ Example:
html

<h1>Internal CSS Example</h1>

💡 Best Use: Good for small projects or single-page styles.

6️⃣ External CSS ( `.css` File) ✅
📌 Best practice for styling – keeps HTML clean.
📌 Can be reused across multiple pages.
📌 Linked using the tag in HTML.
`<link>`

📌 Syntax (HTML - inside ) `<head>`

html

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

📌 Syntax (CSS - `styles.css` file)

css

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

✅ Example:
html

<h1>External CSS Example</h1>

💡 Best Use: Always use external stylesheets for large projects!

7️⃣ Relationship Between HTML & CSS Files
📌 If HTML & CSS are in different files, they must be linked!
📌 Use inside the
`<link>` to connect the CSS file.
`<head>`

🔹 Example File Structure:

bash

/project-folder
├── index.html
├── styles.css

✅ Correct Link (Inside `index.html`)

html

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

💡 Best Use: Keeps HTML & CSS separate, making maintenance

easier.

🔹 Additional Notes
✔ Use External CSS for better scalability.
✔ Avoid Inline Styles unless necessary.
✔ Attribute Selectors are great for styling input fields, links, and
buttons.
✔ Nested Selectors keep code structured and organized.
✔ Universal Selector is useful for CSS resets.
📌 References:
🔗 MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
🔗 W3Schools: https://www.w3schools.com/css/
🔗 CSS Tricks: https://css-tricks.com
Let me know if you need more details! 🚀

CSS Specificity & Box Model

CSS applies styles based on specificity, which determines which

rules take precedence. Additionally, the Box Model is fundamental
to how elements are displayed.

1️⃣ Specificity in CSS

📌 Specificity determines which CSS rule is applied when
multiple rules target the same element.
📌 Higher specificity wins over lower specificity.
📌 If specificity is the same, the last defined rule is applied.
🔹 Specificity Order (Lowest to Highest):
1️⃣ Type Selectors & Pseudo-elements ( , , )
2️⃣ Class Selectors, Attribute Selectors & Pseudo-classes (
`h1` `p` `::before`
`.class`,
, )
3️⃣ ID Selectors ( )
`[type="text"]` `:hover`

4️⃣ Inline Styles (

`#id`
)
5️⃣ (Overrides everything, use cautiously 🚨)
`style="color:red;"`
`!important`

📌 Example:
css

p { color: blue; } /* Type Selector - Least Specific */

.class { color: green; } /* Class Selector - More Specific */
#id { color: red; } /* ID Selector - Even More Specific */

✅ HTML:
html

<p id="id" class="class" style="color: orange;">Hello</p>

🔹 Final color: 🔶 Orange (Inline styles win).

💡 Best Practice:
✔ Avoid using unless absolutely necessary.
✔ Use specific selectors smartly to prevent conflicts.
`!important`

2️⃣ Box Model in CSS

📌 The Box Model describes how elements are structured.
📌 Every element is a rectangle with four key parts:
1️⃣ Content – The actual text or image inside the element.
2️⃣ Padding – Space between content and border.
3️⃣ Border – Surrounds the padding and content.
4️⃣ Margin – Space outside the border, separating elements.
✅ Example Visualization:
css

┌────────── Margin ─────────┐

│ ┌──────── Border ──────┐ │
│ │ ┌──── Padding ────┐ │ │
│ │ │ Content │ │ │
│ │ └─────────────────┘ │ │
│ └──────────────────────┘ │
└───────────────────────────┘

📌 CSS Example:
css

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

💡 Best Practice:
✔ Use `box-sizing: border-box;` to include padding and border in
width/height calculations.

3️⃣ Colors in CSS

📌 CSS supports multiple ways to define colors:
🔹 1. Hexadecimal Colors
📌 Uses format, where RR, GG, and BB are hex values (00
`#RRGGBB`
to FF).

css

color: #ff0000; /* Red */

color: #00ff00; /* Green */
color: #0000ff; /* Blue */

🔹 2. RGB Colors
📌 Uses `rgb(red, green, blue)`, where values range from 0 to 255.

css

color: rgb(255, 0, 0); /* Red */

color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */

🔹 3. Predefined Color Names

📌 CSS provides 140+ predefined color names.
css

color: red;
color: blue;
color: yellow;

🔹 4. RGBA Colors (with Transparency)

📌 Uses , where alpha (0 to 1)
`rgba(red, green, blue, alpha)`
controls transparency.

css

color: rgba(255, 0, 0, 0.5); /* 50% transparent red */

🔹 5. HSL Colors (Hue, Saturation, Lightness)

📌 Uses .
`hsl(hue, saturation%, lightness%)`

css

color: hsl(0, 100%, 50%); /* Red */

🔹 6. HSLA Colors (HSL + Alpha)

📌 Same as HSL but with transparency.
css

color: hsla(0, 100%, 50%, 0.5); /* 50% transparent red */

💡 Best Practice:
✔ Use RGBA or HSLA for transparency effects.
✔ Use Hex or RGB for solid colors.
🔹 Additional Notes
✔ Specificity matters – ID selectors are stronger than classes.
✔ Box Model controls layout – margin, padding, border affect
spacing.
✔ Use Hex, RGB, or HSL for colors – pick based on readability and
flexibility.

📌 References:
🔗 MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
🔗 W3Schools: https://www.w3schools.com/css/
🔗 CSS Tricks: https://css-tricks.com
Let me know if you need more details! 🚀

🎨 Colors in CSS
Colors in CSS can be defined in multiple ways, each with its own
advantages. The most commonly used methods are Hexadecimal,
RGB, and Predefined Color Names.

1️⃣ Hexadecimal Colors ( `#RRGGBB`)

📌 Hexadecimal colors use a 6-digit code that represents Red,

Green, and Blue (RGB) components.
📌 The format is: , where each pair represents a color
`#RRGGBB`
intensity between (lowest) and
`00` (highest). `FF`

🔹 Example:
css

color: #ff0000; /* Red */

color: #00ff00; /* Green */
color: #0000ff; /* Blue */
color: #000000; /* Black */
color: #ffffff; /* White */

✅ Shorter Hex Format ( )

📌 If both digits in a pair are the same, you can shorten the code to
`#RGB`

3 characters.

css

color: #f00; /* Same as #ff0000 (Red) */

color: #0f0; /* Same as #00ff00 (Green) */
color: #00f; /* Same as #0000ff (Blue) */

💡 Best Practice:
✔ Use hex colors for compact and widely supported color
definitions.
✔ Use shorter hex format when possible to reduce file size.
2️⃣ RGB Colors ( `rgb(red, green, blue)`)

📌 RGB values allow you to specify colors using red, green, and
blue intensity levels between and .
📌 The format is:
`0` `255`
.
`rgb(red, green, blue)`

🔹 Example:
css

color: rgb(255, 0, 0); /* Red */

color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */
color: rgb(255, 255, 255); /* White */
color: rgb(0, 0, 0); /* Black */

✅ Using Percentage Values ( `0% to 100%`)

css

color: rgb(100%, 0%, 0%); /* Red */

color: rgb(0%, 100%, 0%); /* Green */
color: rgb(0%, 0%, 100%); /* Blue */

💡 Best Practice:
✔ Use RGB when you need clearer color intensity control.
✔ Percentages are less common but can be useful for dynamic
color changes.

3️⃣ RGBA Colors ( `rgba(red, green, blue,

alpha)`)

📌 RGBA is like RGB, but includes an alpha (transparency) value.

📌 The format is: , where alpha
`rgba(red, green, blue, alpha)`
ranges from (fully transparent) to
`0` (fully opaque). `1`

🔹 Example:
css

color: rgba(255, 0, 0, 0.5); /* 50% transparent red */

color: rgba(0, 255, 0, 0.3); /* 30% transparent green */
color: rgba(0, 0, 255, 0.7); /* 70% transparent blue */

💡 Best Practice:
✔ Use RGBA for transparency effects like overlays and hover
effects.
✔ Avoid excessive transparency to maintain readability.
4️⃣ Predefined Color Names
📌 CSS has 140+ predefined color names that work across all
browsers.
📌 These names are human-readable and don't require code
interpretation.
🔹 Example:
css

color: red;
color: blue;
color: green;
color: yellow;
color: pink;
color: cyan;
color: magenta;
color: orange;
color: brown;
color: purple;
color: gray;

💡 Best Practice:
✔ Use predefined names for quick styling without remembering
hex codes.
✔ They are easy to read, but less flexible compared to hex/RGB.
5️⃣ HSL Colors ( `hsl(hue, saturation,
lightness)`)

📌 HSL stands for Hue, Saturation, and Lightness.

📌 The format is: .
📌 Hue ( ) defines the color type (0=red, 120=green,
`hsl(hue, saturation%, lightness%)`
`0-360`
240=blue).
📌 Saturation ( ) defines color intensity (0% is grayscale,
`0%-100%`
100% is full color).
📌 Lightness ( ) defines brightness (0% is black, 100% is
`0%-100%`
white).

🔹 Example:
css

color: hsl(0, 100%, 50%); /* Red */

color: hsl(120, 100%, 50%); /* Green */
color: hsl(240, 100%, 50%); /* Blue */
color: hsl(60, 100%, 50%); /* Yellow */
color: hsl(0, 0%, 50%); /* Gray */

💡 Best Practice:
✔ Use HSL for better human readability and easy color
adjustments.
✔ Perfect for designers who think in terms of hue, saturation, and
brightness.

6️⃣ HSLA Colors ( `hsla(hue, saturation,

lightness, alpha)`)

📌 HSLA is HSL with an added Alpha (transparency) value.

📌 The format is: .
📌 Alpha ranges from (transparent) to (opaque).
`hsla(hue, saturation%, lightness%, alpha)`
`0` `1`

🔹 Example:
css

color: hsla(0, 100%, 50%, 0.5); /* 50% transparent red */

color: hsla(120, 100%, 50%, 0.3); /* 30% transparent green */
color: hsla(240, 100%, 50%, 0.7); /* 70% transparent blue */

💡 Best Practice:
✔ Use HSLA for transparency effects without modifying
hue/saturation.
✔ Ideal for backgrounds, overlays, and hover effects.
📝 Summary & Best Practices
✔ Use Hex ( ) for compact and widely supported color
`#RRGGBB`
definitions.
✔ Use RGB ( ) when you need precise color intensity
`rgb()`
control.
✔ Use RGBA ( ) for transparency effects.
✔ Use Predefined Colors for quick styling.
`rgba()`

✔ Use HSL ( ) for intuitive color adjustments.

✔ Use HSLA (
`hsl()`
) for smooth transparency effects.
`hsla()`

📌 References
🔗 MDN Docs: https://developer.mozilla.org/en-
US/docs/Web/CSS/color
🔗 W3Schools: https://www.w3schools.com/css/css_colors.asp
🔗 CSS Tricks: https://css-tricks.com
Let me know if you need further explanations! 🚀

Fonts in CSS control text appearance, weight, style, and

emphasis. They make web pages more readable and visually
appealing.

1️⃣ Font Family ( `font-family`)

📌 Defines the typeface of text.

📌 Uses a priority list where the first available font is applied.
📌 Always include a generic family ( , ,
`sans-serif` `serif`
) as a fallback.
`monospace`

🔹 Syntax:
css

font-family: "Arial", "Helvetica", sans-serif;

🔹 Example:
css

p {
font-family: "Times New Roman", Times, serif;
}

✅ If is unavailable, it falls back to

`"Times New Roman"` `"Times"`,
then to .
`serif`

💡 Best Practice:
✔ Always use multiple fonts to ensure availability.
✔ Use web-safe fonts for compatibility across devices.
🔗 Web-safe font list:
https://www.w3schools.com/cssref/css_websafe_fonts.php

2️⃣ Font Weight ( `font-weight`)

📌 Controls text thickness.

📌 Can be numeric (100-900) or keywords ( `normal`, `bold`, etc.).

🔹 Syntax:
css

font-weight: normal; /* Default */

font-weight: bold; /* Bold text */
font-weight: 400; /* Same as normal */
font-weight: 700; /* Same as bold */

🔹 Example:
css

h1 {
font-weight: bold;
}

p {
font-weight: 300;
}

✅ Common values:
`100` (Thin)
`300` (Light)
`400` (Normal)
`700` (Bold)
`900` (Extra Bold)

💡 Best Practice:
✔ Use numeric values for better control over weight.
✔ Ensure proper contrast for readability.
3️⃣ Font Style ( `font-style`)

📌 Defines text appearance (normal, italic, oblique).

🔹 Syntax:
css

font-style: normal; /* Default */

font-style: italic; /* Italic text */
font-style: oblique; /* Slanted text */

🔹 Example:
css

p {
font-style: italic;
}

💡 Best Practice:
✔ Use italic for emphasis (quotes, citations).
✔ is rarely used—prefer
`oblique` . `italic`

4️⃣ Emphasis & Importance

📌 Used to highlight important text using HTML and CSS.
🔹 HTML Tags:
html

<b>Bold</b> <!-- Does not add importance -->

<strong>Strong</strong> <!-- Adds importance (SEO-friendly) -->

<i>Italic</i> <!-- Does not add importance -->

<em>Emphasized</em> <!-- Adds importance (SEO-friendly) -->

🔹 CSS Equivalent:
css

strong {
font-weight: bold;
}

em {
font-style: italic;
}

✅ SEO Note:
`<b>` and `<i>` are visual only.
`<strong>` and `<em>` add meaning & importance, improving
SEO.

💡 Best Practice:
✔ Use instead of , and instead of `<i>`.
✔ Helps with screen readers & accessibility.
`<strong>` `<b>` `<em>`

5️⃣ How to Add External Fonts?

📌 Use Google Fonts or custom fonts with `@import` or `@font-
face`.

🔹 Google Fonts (Recommended)

✅ Free, easy to use, and loads fast.
🔹 Steps:
1️⃣ Visit https://fonts.google.com.
2️⃣ Choose a font and copy the or `@import`.
3️⃣ Add it to your CSS file.
`<link>`

🔹 Using (Best for Performance)

`<link>`

html

<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght
</head>

css

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

🔹 Using `@import` (Less Performance Efficient)

css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@

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

💡 Best Practice:
✔ Use for better loading speed.
✔ Use multiple font weights for design flexibility.
`<link>`

🔹 Custom Fonts with `@font-face`

📌 Use your own font files ( , `.ttf` `.woff`).

📌 Define a local font in CSS using `@font-face`.

🔹 Example:
css

@font-face {
font-family: "MyCustomFont";
src: url("fonts/myfont.woff2") format("woff2"),
url("fonts/myfont.woff") format("woff");
}

p {
font-family: "MyCustomFont", sans-serif;
}

✅ Formats:
`.woff2` (Best for modern browsers)
`.woff` (Better compatibility)
`.ttf` (Larger size, use only if necessary)

💡 Best Practice:
✔ Use for best performance.
✔ Always include a fallback font.
`.woff2`

📌 Summary & Best Practices

✔ Use with multiple options for better compatibility.
✔ Use
`font-family`
with numeric values for finer control.
✔ Use
`font-weight`
instead of for styling.
✔ Use
`font-style: italic;` `<i>`
and
`<strong>` for meaningful emphasis (better for
`<em>`
SEO).
✔ Use Google Fonts ( ) for best performance.
✔ Use
`<link>`
only for custom fonts.
`@font-face`

📌 References
🔗 MDN Docs: https://developer.mozilla.org/en-
US/docs/Web/CSS/font
🔗 W3Schools: https://www.w3schools.com/css/css_font.asp
🔗 Google Fonts: https://fonts.google.com
🔗 CSS Tricks: https://css-tricks.com/snippets/css/using-font-face/
Let me know if you need more details! 🚀

📏 CSS Units: Absolute, Percentage &

Relative
CSS units define sizes of elements like width, height, padding, and
font sizes. They are categorized into absolute, percentage, and
relative units.

1️⃣ Absolute Units

📌 Fixed sizes that do not change based on the screen or parent
element.
📌 Best for print but less flexible for responsive designs.
🔹 Common Absolute Units:
Unit Meaning Example

`px` Pixels (Most common) `width: 200px;`

`cm` Centimeters `width: 2cm;`

`mm` Millimeters `width: 10mm;`

`in` Inches `width: 1in;`

`pt` Points (1/72 inch) `font-size: 12pt;`

`pc` Picas (1/6 inch) `font-size: 2pc;`

🔹 Example:
css

.box {
width: 100px; /* Fixed width */
height: 50mm; /* Fixed height */
}

✅ Best Use Case: Print styles, exact dimensions.

❌ Avoid for Web (px is better for screens).
2️⃣ Percentage Units ( `%`)

📌 Relative to the parent element's size.

📌 Useful for responsive designs.
🔹 Syntax:
css

width: 50%; /* 50% of the parent’s width */

height: 30%; /* 30% of the parent’s height */

🔹 Example:
css

.container {
width: 80%; /* 80% of the parent */
height: 50%; /* 50% of the parent */
}

✅ Best Use Case: Flexible layouts, responsive elements.

❌ Depends on parent size, may require adjustments.
3️⃣ Relative Units
📌 Adjust based on font size, viewport, or document size.
📌 Better for responsive design.
📌 Relative to Font Size
Unit Meaning Example
Relative to the parent’s `font-size: 2em;` (Twice the
`em`
font-size parent’s size)
Relative to the root `font-size: 1.5rem;` (1.5 ×
`rem`
(`html`) font-size root size)

🔹 Example:
css

body {
font-size: 16px;
}

p {
font-size: 2em; /* 32px (16px × 2) */
}

h1 {
font-size: 1.5rem; /* 24px (Root: 16px × 1.5) */
}

✅ Best Use Case:

`em`:Scales with parent size (nested elements).
`rem`: Consistent sizing across the document.

❌ Avoid `em` for global styles (it may cause unexpected scaling).

📌 Relative to Viewport (Screen Size)

Unit Meaning Example
Viewport width (1vw = 1% of `width: 50vw;` (50% of
`vw`
screen width) screen width)

Viewport height (1vh = 1% of `height: 100vh;` (Full

`vh`
screen height) screen height)

🔹 Example:
css

.fullscreen {
width: 100vw; /* Full screen width */
height: 100vh; /* Full screen height */
}

✅ Best Use Case:

`vw`: Full-width backgrounds, fluid typography.
`vh`: Full-page sections (hero banners, fullscreen modals).

❌ Beware: `vh` can cause scrolling issues on mobile.

📌 Best Practices & Summary

✔ Use for precise control (icons, borders).
✔ Use for flexible layouts inside containers.
`px`

✔ Use for consistent typography across the page.

`%`

✔ Use & for full-screen elements.

`rem`

✔ Avoid absolute units ( , , ) for web.

`vw` `vh`
`cm` `mm` `in`

📌 References
🔗 MDN Docs: https://developer.mozilla.org/en-
US/docs/Web/CSS/length
🔗 W3Schools: https://www.w3schools.com/cssref/css_units.asp
🔗 CSS Tricks: https://css-tricks.com/fun-viewport-units/
Let me know if you need more details! 🚀

To create a card like the one in the image, we will use HTML and CSS.

📌 Steps to Create a Stylish Card

1️⃣ HTML Structure
html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-sca
<title>Course Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="card">
<img src="course-image.jpg" alt="Course Thumbnail" class=

<div class="card-content">
<h3 class="course-title">WEB DEVELOPMENT <span>BOOTCAM
<p class="course-subtitle">Web Development Master Cou

<div class="card-footer">
<span class="price">₹4500</span>
<span class="old-price">₹6999</span>
<span class="discount">42% off</span>
</div>
</div>
</div>

</body>
</html>

2️⃣ CSS Styling

css

/* Import Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
background-color: #121212;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.card {
width: 300px;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}

.card:hover {
transform: scale(1.05);
}

.card-image {
width: 100%;
height: auto;
}

.card-content {
padding: 15px;
text-align: center;
}

.course-title {
font-size: 18px;
font-weight: 700;
background: black;
color: white;
padding: 5px;
border-radius: 5px;
}

.course-title span {
color: yellow;
}

.course-subtitle {
font-size: 14px;
color: #444;
margin-top: 5px;
}

.card-footer {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 10px;
}

.price {
font-size: 18px;
font-weight: bold;
color: #2ecc71;
}

.old-price {
font-size: 14px;
text-decoration: line-through;
color: #999;
}

.discount {
font-size: 14px;
font-weight: bold;
color: white;
background-color: #2ecc71;
padding: 3px 6px;
border-radius: 4px;
}

✅ Key Features Used

✔ Card Design: Box-shadow, border-radius, hover effect.
✔ Typography: Google Font Poppins for modern style.
✔ Pricing Section: Strike-through for old price, bold for the
discount.
✔ Hover Effect: Subtle zoom using .
✔ Flexbox Layout: For aligning price, old price, and discount
`transform: scale()`

badge.

📌 References
🔗 MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
🔗 W3Schools: https://www.w3schools.com/css
🔗 CSS Tricks: https://css-tricks.com/
Let me know if you need improvements! 🚀

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 1/1