CSS Basics | CodeVerse

01 What is CSS?

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colors, fonts, spacing, positioning, and animations.

/* CSS Syntax */
selector {
  property: value;
}

p {
  color: #6366f1;
  font-size: 18px;
  line-height: 1.6;
}

💡 3 Ways to Add CSS: Inline (style=""), Internal (<style>), External (<link>). External is best practice!

02 Selectors & Specificity

Selectors target HTML elements. Specificity determines which styles win when multiple rules apply.

/* Element Selector */
p { color: blue; }

/* Class Selector */
.highlight { background: yellow; }

/* ID Selector */
#header { font-size: 24px; }

/* Universal */
* { margin: 0; padding: 0; }

📌 Specificity: Inline > ID > Class > Element > Universal

03 Colors & Backgrounds

CSS supports HEX, RGB, RGBA, HSL, gradients, and background images.

body {
  background: linear-gradient(135deg, #6366f1, #06b6d4);
}

.card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

04 The Box Model

Every element is a box: Content → Padding → Border → Margin.

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #6366f1;
  margin: 30px;
  box-sizing: border-box;
}

💡 Always use box-sizing: border-box globally for predictable sizing.

05 Typography

Control text appearance with fonts, sizes, weights, spacing, and effects.

h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

06 Flexbox

One-dimensional layout system for alignment, spacing, and distribution.

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

07 CSS Grid

Two-dimensional layout system for complex page structures.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

🚀 Magic: repeat(auto-fit, minmax(280px, 1fr)) = fully responsive grid!

08 Transitions

Smooth property changes on hover and state changes.

.btn {
  background: #6366f1;
  transition: all 0.3s ease;
}
.btn:hover {
  background: #4f46e5;
  transform: translateY(-3px);
}

09 Keyframe Animations

Multi-step animations with @keyframes for looping or one-shot effects.

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero {
  animation: fadeUp 1s ease forwards;
}

10 Responsive Design

Media queries and fluid units make your site work on every screen size.

/* Mobile First */
.container { padding: 15px; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 30px; max-width: 750px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1100px; }
}

11 Position & Display

Control element positioning and visibility with position and display properties.

static

Default flow

relative

Offset from itself

absolute

Relative to nearest positioned parent

fixed

Relative to viewport

sticky

Toggles between relative & fixed

display

block, inline, flex, grid, none

12 CSS Variables

Custom properties for reusable values and easy theming.

:root {
  --primary: #6366f1;
  --bg: #0b0b12;
  --radius: 14px;
}

.card {
  background: var(--bg);
  border-radius: var(--radius);
}

13 Pseudo-classes & Elements

Style element states and create decorative virtual elements.

/* Pseudo-classes */
a:hover { color: #ec4899; }
li:first-child { font-weight: bold; }

/* Pseudo-elements */
.quote::before { content: '"'; }
.divider::after { content: ''; }

14 Best Practices & BEM

Write maintainable CSS with naming conventions like BEM and organized structure.

/* BEM: Block__Element--Modifier */
.card { }          /* Block */
.card__title { }   /* Element */
.card--featured { } /* Modifier */

/* Organize: Variables → Reset → Layout → Components → Utils → Media */