CSS - PPTprime

1. What Is CSS and Why It Truly Matters

CSS stands for Cascading Style Sheets.

HTML defines structure.
CSS defines presentation.

Without CSS:

Websites would look like documents from the 1990s
No layout control
No responsive design
No visual hierarchy
No branding

CSS is what transforms information into experience.

Modern CSS is no longer “just colors and fonts”:

It handles layouts
Animations
Responsiveness
Accessibility
Design systems
Performance

2. How CSS Works (The Mental Model You Must Have)

CSS works on three core principles:

Selectors – what to style
Properties – what aspect to change
Values – how to change it

selector {
  property: value;
}

Example:

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

3. Ways to Apply CSS

3.1 Inline CSS ❌ (Avoid)

<p style="color:red;">Text</p>

Problems:

Unmaintainable
Not reusable
Breaks separation of concerns

3.2 Internal CSS ⚠️

<style>
  p { color: blue; }
</style>

Used for:

Prototypes
Small demos

3.3 External CSS ✅ (Best Practice)

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

Why it’s best:

Clean
Scalable
Cacheable
Industry standard

4. CSS Selectors (Very Important)

4.1 Basic Selectors

p { }        /* Element */
.class { }   /* Class */
#id { }      /* ID */
* { }        /* Universal */

4.2 Attribute Selectors

input[type="text"] {
  border: 1px solid black;
}

4.3 Grouping Selectors

h1, h2, h3 {
  font-family: Arial;
}

4.4 Descendant vs Child

div p { }    /* Any p inside div */
div > p { }  /* Direct child only */

4.5 Pseudo-classes

a:hover { }
a:visited { }
input:focus { }
li:first-child { }

4.6 Pseudo-elements

p::first-letter { }
p::before { }
p::after { }

5. CSS Box Model (Non-Negotiable Concept)

Every element is a box.

Box Model Components:

Content
Padding
Border
Margin

box-sizing: border-box;

⚠️ Always use this globally:

* {
  box-sizing: border-box;
}

6. CSS Units (Where Most Beginners Fail)

Absolute Units:

px (pixels)

Relative Units:

% (parent based)
em (relative to parent font size)
rem (relative to root font size)
vw / vh (viewport)

Modern best practice:

Use rem for typography
Use % or fr for layout
Avoid px for fonts

7. Colors in CSS

Color Formats:

color: red;
color: #ff0000;
color: rgb(255,0,0);
color: rgba(255,0,0,0.5);
color: hsl(0,100%,50%);

Accessibility Rule:

Text contrast ratio ≥ 4.5:1

8. Typography in CSS

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

Key properties:

font-family
font-size
font-weight
line-height
letter-spacing

9. CSS Display Property

display: block;
display: inline;
display: inline-block;
display: none;

`display: none` vs `visibility: hidden`

none → removed from layout
hidden → occupies space

10. Positioning (Classic Interview Topic)

position: static;   /* default */
position: relative;
position: absolute;
position: fixed;
position: sticky;

Key Rule:

Absolute elements position relative to nearest positioned ancestor

11. Float (Legacy Knowledge)

float: left;
clear: both;

Used historically.
Today replaced by Flexbox & Grid.

12. Flexbox (Modern Layout Power)

Enable Flexbox:

.container {
  display: flex;
}

Core Concepts:

Main axis
Cross axis

Common Properties:

justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;

Child Control:

flex: 1;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;

Flexbox is one-dimensional.

13. CSS Grid (True Layout Mastery)

Enable Grid:

.container {
  display: grid;
}

Define Columns:

grid-template-columns: repeat(3, 1fr);

Define Rows:

grid-template-rows: auto 1fr auto;

Placement:

grid-column: 1 / 3;
grid-row: 2 / 4;

Grid is two-dimensional.

14. Responsive Design (Mandatory Skill)

Media Queries:

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Mobile-First Rule:

Write base CSS for mobile
Add breakpoints upward

15. CSS Transitions

button {
  transition: all 0.3s ease;
}

Best Practice:

Transition only what changes
Avoid transition: all in production

16. CSS Animations

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

div {
  animation: fadeIn 1s ease;
}

17. Z-Index & Stacking Context

position: relative;
z-index: 10;

Rules:

z-index works only on positioned elements
New stacking contexts can override expectations

18. CSS Variables (Custom Properties)

:root {
  --primary: #2563eb;
}

button {
  background: var(--primary);
}

Benefits:

Theming
Maintainability
Dynamic updates via JS

19. Forms Styling (Hard but Important)

input, select, textarea {
  padding: 0.75rem;
  border-radius: 6px;
}

Tips:

Use :focus-visible
Avoid removing outlines completely

20. Accessibility in CSS

Do not hide focus outlines
Maintain contrast
Respect reduced motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
  }
}

21. CSS Performance Best Practices

Avoid deeply nested selectors
Minimize repaints
Use transform instead of top/left
Avoid heavy shadows

22. Common CSS Mistakes (Interview Gold)

❌ Overusing !important
❌ Not understanding specificity
❌ Fixed widths everywhere
❌ Ignoring mobile
❌ Mixing layout techniques randomly

23. CSS Specificity (Critical)

Priority order:

Inline styles
IDs
Classes
Elements

#id > .class > element

24. Real-World CSS Architecture (Intro)

BEM methodology
Utility-first CSS
Component-based styling
Design tokens

(We can go very deep here in Part 2)

25. How Senior Developers Use CSS

They think in terms of:

Systems
Constraints
Reusability
Scalability
Accessibility
Performance

Not just “making it look good”.

26. CSS Interview Preparation Strategy

Master:

Flexbox
Grid
Box model
Positioning
Specificity
Responsive design

If you know these well, you clear 90% CSS interviews.

27. Final Words: CSS Is a Career Skill

CSS is not easy.
CSS is not trivial.
CSS is deceptively deep.

The best UI engineers:

Respect CSS
Practice daily
Build components
Study real designs
Debug layouts patiently

If HTML is the skeleton, CSS is the muscle and skin.