CSS

CSS

Cascading Style Sheets (CSS) is the fundamental language used to describe the presentation of a document written in HTML.

For our project, we use Tailwind, which classes are tighly coupled with CSS attributes

Basic syntax

selector {
  property: value;
}

Box model and layout

Box Model: Every element is a rectangular box. It consists of:

• content: The actual item (text/image).
• padding: Space between content and border.
• border: Line surrounding the padding.
• margin: Space outside the border.

Display

Indicates how elements behave in the flow

• block: Takes full width, starts on a new line (e.g., <div>, <p>).
• inline: Takes only necessary width, no new line (e.g., <span>, <a>).
• inline-block: Flows like inline but respects width/height/margin

Overflow and scroll

Indicates how to handle a content larger than its container

Example

.container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* Enforces snapping points */
}
.child {
  scroll-snap-align: start;
}

Flexbox

• for one dimensional layouts (row or column)

Example

.navbar {
  display: flex;
  justify-content: space-between; /* Spacing along main axis */
  align-items: center;            /* Alignment along cross axis */
}

Grid

• for 2 dimensional layouts

Example

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 20px;
}

Positioning and layering

Position

• static (Default): Normal flow.
• relative: Offset relative to itself; establishes a context for absolute children.
• absolute: Removed from flow; positioned relative to nearest positioned ancestor.
• fixed: Relative to the viewport.
• sticky: Toggles between relative and fixed based on scroll.

layering

z-index attribute controls the depth of elements (higher is more visible)

Selectors and combinators

• simple selection using .class, #id, element
• attribute : input[type="text"]
• combinators
  • div > p (Direct child)
  • div + p (Adjacent sibling).
  • div ~ p (General sibling).
• pseudo-classes : state-based selectors like :hover, :focus, or hierarchical like :nth-child(2)
• pseudo-elements : select specific parts like ::before, ::after, ::first-letter

Visual styling and typography

• colors can be expressed in hex (#333), or with rgba(255, 255, 255, 0.9 format
• backgrounds can specify an url
• custom fonts can be defined with @font-face or imported
• text can be styled with text-align, line-height, letter-spacing

Decorators

• borders
• shadow, ex box-shadow: 0 4px 6px rgba(0,0,0,0.1);
• filters, ex filter: blur(5px) grayscale(100%);

Units

• px: Absolute.
• rem: Relative to root HTML font size (Accessible standard).
• em: Relative to parent font size.
• vw/vh: Percentage of viewport width/height.

Animation and motion

• transition : changes property values over time
• transform : modify coordinates : scale, rotate, translate
• keyframe animations : for complex sequences

Variables

Example

:root {
  --primary-color: #3498db;
}
.btn {
  background: var(--primary-color);
}

Responsive design with media-queries

Example

@media (max-width: 768px) { .container { flex-direction: column; } }

Do's & Don'ts

✅ Do	❌ Don't
Use Classes for styling to keep specificity low and reusable.	Use IDs for styling (high specificity makes overriding difficult).
Use Flexbox and Grid for layout structures.	Use float, inline-block, or tables for structural layout.
Use relative units like rem or em for font sizes and spacing.	Use fixed px units for everything (harms accessibility and responsiveness).
Implement a Mobile-First approach (use min-width in media queries).	Design for desktop first and force-fit for mobile later using max-width.
Use Shorthand properties (e.g., margin: 10px 20px) to clean up code.	Write every property individually when not necessary (e.g., listing all 4 margins separately).
Use CSS Variables (Custom Properties like --primary-color) for theming.	Hardcode hex color values repeatedly across multiple files.
Use CSS Preprocessors (SASS/SCSS) to nest selectors and manage complexity.	Nest selectors too deeply (more than 3 levels) which impacts performance and readability.

Resources

Type	Resource	Notes
📄	MDN Web Docs - CSS	Complete
💻	22 CSS Concepts	-
💡	Important CSS Concepts	-

Legend: 📄 Doc, 📘 Book, 🎥 Video, 💻 GitHub, 📦 Package, 💡 Blog