CSS — Presentation & Layout

Master the box model, selectors, typography, layout systems, and responsive design.

Why CSS Makes Websites Attractive

CSS (Cascading Style Sheets) is the language that brings life to your website’s design. While HTML provides structure, CSS controls colors, spacing, typography, and layouts. It helps transform a plain document into a visually appealing and user-friendly interface.

With CSS you can:

• Control layout — position elements using Flexbox and Grid.
• Enhance typography — choose fonts, set sizes, and improve readability.
• Add colors & themes — apply branding with variables and palettes.
• Create responsiveness — ensure designs adapt to mobiles, tablets, and desktops.
• Animate interactions — smooth transitions and keyframe animations increase engagement.

In short, CSS bridges the gap between structure and creativity, making websites not only functional but also delightful to use.

Box Model & Sizing

* { box-sizing: border-box; }
.card { padding: 1rem; border: 1px solid #ddd; border-radius: 12px; }

CSS Variables & Theming

:root { --brand: #0d6efd; }
.button { background: var(--brand); }

Selectors

Selectors define which elements CSS rules apply to.

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

/* Class */
.title { font-weight: bold; }

/* ID */
#main { padding: 20px; }

/* Attribute */
input[type="text"] { border:1px solid #ccc; }

/* Descendant */
nav a { color: blue; }

Typography

body { font-family: 'Inter', sans-serif; line-height:1.6; }
h1 { font-size:2.5rem; font-weight:800; }
p { font-size:1rem; color:#555; }

Flexbox & Grid

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.flex { display:flex; gap:.5rem; align-items:center; }

Responsive Design (Media Queries)

@media (max-width:768px) {
  body { font-size:14px; }
  .grid { grid-template-columns:1fr; }
}

Transitions & Animations

.btn { transition: transform .2s; }
.btn:hover { transform: translateY(-2px); }

@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
.alert { animation: fadeIn 1s ease-in-out; }

Pseudo-classes & Pseudo-elements

a:hover { color:red; }
input:focus { outline:2px solid #0d6efd; }

p::first-line { font-weight:bold; }
h1::after { content:" ✨"; }