Launch offer
Business website $150 USD Custom plugin $200 USD Ready in 5 days
Get a quote
malekimtiyajmca@gmail.com
CSS

CSS Complete Tutorial (109 Topics with Flexbox, Grid, Responsive Design & Final Project)

Complete CSS tutorial covering selectors, box model, Flexbox, Grid, responsive design, animations, architecture, and a final HTML & CSS responsive website project.

August 21, 2026 By malekimtiyajmca@gmail.com 15 min read

This complete CSS tutorial covers 109 topics — from selectors and the box model to Flexbox, Grid, responsive design, animations, architecture, and a final HTML & CSS website project.

Course roadmap

1. Introduction to CSS

CSS (Cascading Style Sheets) styles HTML. This series covers syntax, layout, typography, responsive techniques, modern features, architecture, and a complete responsive website project.

  1. Learn selectors and the box model.
  2. Build layouts with Flexbox and Grid.
  3. Ship a responsive HTML/CSS final project.

Learning path

Selectors + box model
Typography + visuals
Flexbox + Grid
Responsive + effects
Architecture + best practices
Final responsive site

2. What is CSS?

CSS separates look from structure: colors, spacing, layout, and responsive behavior live in stylesheets.

CSS role

HTML → structure
CSS → presentation
JS → behavior

3. Types of CSS

External stylesheets scale best; inline is for rare one-offs; internal can suit tiny demos.

Three types

Inline → style=""
Internal → <style> in head
External → .css file via <link>

4. Inline CSS

Use sparingly — hard to maintain and overrides cascade unexpectedly.

Inline example

<p style="color: teal; margin: 0;">Hello</p>

5. Internal CSS

Fine for single-page prototypes; extract to external CSS for real sites.

Internal example

<style>
  h1 { font-size: 2rem; }
</style>

6. External CSS

Preferred for multi-page sites and team workflows.

External link

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

7. CSS Syntax

Each declaration is `property: value;` ending with a semicolon.

Ruleset

h1 {
  color: #123;
  font-weight: 700;
}

8. CSS Selectors

Good selectors balance specificity and maintainability — avoid overly deep chains.

Selector map

Universal, type, class, id
Attribute
Combinators
Pseudo-class / pseudo-element

9. CSS Universal Selector

Useful for resets; avoid heavy `* { }` rules on large DOMs without care.

Universal

* {
  box-sizing: border-box;
}

10. CSS Element Selector

Great for base typography; override with classes for variants.

Type selector

p {
  line-height: 1.6;
}

11. CSS Class Selector

Classes are the workhorse of maintainable CSS.

Class

.btn {
  padding: 0.75rem 1.25rem;
}

12. CSS ID Selector

IDs are highly specific — prefer classes for styling; use IDs for hooks/JS/fragments.

ID

#hero {
  min-height: 70vh;
}

13. CSS Attribute Selectors

Helpful for links, inputs, and data attributes.

Attribute selectors

a[target="_blank"] { }
input[type="email"] { }
[data-state="open"] { }

14. CSS Combinators

` ` (descendant), `>` (child), `+` (adjacent), `~` (general sibling).

Combinators

nav a { }
ul > li { }
h2 + p { }
h2 ~ p { }

15. CSS Pseudo-Classes

Always style :focus for keyboard users — not only :hover.

Pseudo-classes

a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid #0a7; }
li:nth-child(odd) { background: #f6f6f6; }

16. CSS Pseudo-Elements

Pseudo-elements need a `content` property for ::before/::after.

Pseudo-elements

.icon::before {
  content: "★";
  margin-right: 0.35em;
}

17. CSS Comments

Explain why, not what — keep comments short.

Comment

/* Primary brand button */
.btn-primary { }

18. Colors in CSS

Prefer CSS variables for brand palettes; ensure contrast for accessibility.

Color examples

color: #0f766e;
background: rgb(15 118 110 / 0.1);
border-color: hsl(175 80% 25%);

19. CSS Backgrounds

Control cover/contain carefully for hero images.

Background

.hero {
  background: #0f766e url("hero.jpg") center / cover no-repeat;
}

20. CSS Borders

Use logical properties (`border-inline`) for i18n-friendly layouts when useful.

Border

.card {
  border: 1px solid #d6d3d1;
  border-left: 4px solid #0f766e;
}

21. CSS Border Radius

Don’t over-round interactive controls unless brand requires it.

Radius

.card { border-radius: 12px; }
.avatar { border-radius: 50%; }

22. CSS Width and Height

Prefer min-height over fixed height for text content to avoid overflow.

Sizing

.box {
  width: min(100%, 40rem);
  min-height: 12rem;
}

23. CSS Units

Relative units (rem, %, vw) power responsive design.

Unit families

Absolute: px
Font-relative: em, rem
Viewport: vw, vh, vmin, vmax
Percentages of parent

24. CSS Pixels, %, em, rem

Many teams prefer rem for type/spacing scale consistency.

em vs rem

html { font-size: 100%; }
.card { font-size: 1rem; padding: 1.25rem; }
.card small { font-size: 0.875em; }

25. CSS Viewport Units

Mobile browser chrome makes `100vh` tricky — consider `dvh` for full-screen sections.

Viewport

.hero {
  min-height: 100dvh;
  width: 100vw;
}

26. CSS Box Model

`box-sizing: border-box` makes width include padding/border — highly recommended.

Border-box reset

*, *::before, *::after {
  box-sizing: border-box;
}

27. CSS Margin

Watch margin collapse between siblings/parents.

Margin

.section { margin-block: 3rem; }
.center { margin-inline: auto; }

28. CSS Padding

Padding affects clickable area — helpful for buttons/links.

Padding

.btn { padding: 0.75rem 1.25rem; }

29. CSS Content and Box Sizing

content-box is default historically; border-box is the modern default for most apps.

box-sizing

.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }

30. CSS Display Property

`display: none` removes from layout; prefer hidden patterns carefully for a11y.

Display

.row { display: flex; }
.gallery { display: grid; }
.sr-only-target[hidden] { display: none; }

31. CSS Block and Inline Elements

Understanding defaults helps debug unexpected wrapping/spacing.

Defaults reminder

Block: p, div, section
Inline: a, span, strong
Override with display as needed

32. CSS Inline-Block

Often replaced by Flexbox today, but still useful in places.

Inline-block

.chip {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}

33. CSS Visibility

visibility:hidden keeps space; display:none does not.

Visibility

.gone { display: none; }
.invisible { visibility: hidden; }

34. CSS Position Property

Positioned elements enable inset offsets and stacking contexts.

Position values

static, relative, absolute, fixed, sticky

35. CSS Static Position

top/left offsets do not apply to static elements.

Static

.item { position: static; }

36. CSS Relative Position

Also creates a containing block for absolutely positioned children.

Relative

.badge-wrap {
  position: relative;
}

37. CSS Absolute Position

Great for badges/overlays; don’t overuse for page layout.

Absolute

.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

38. CSS Fixed Position

Common for sticky CTAs and floating help buttons — watch mobile overlap.

Fixed

.toast {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
}

39. CSS Sticky Position

Needs a scroll container and threshold (`top`) to activate.

Sticky

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

40. CSS z-index

z-index only works in contexts that create stacking — know your parents.

z-index

.dropdown { z-index: 30; }
.modal { z-index: 50; }

41. CSS Overflow

`overflow: auto` adds scrollbars when needed; beware trapping keyboard focus in scroll areas.

Overflow

.panel {
  max-height: 16rem;
  overflow: auto;
}

42. CSS Float and Clear

Prefer Flexbox/Grid for modern page layout; floats remain useful for text wrap.

Float

img.left {
  float: left;
  margin-right: 1rem;
}

43. CSS Typography

Aim for comfortable line length and line-height for body text.

Type starter

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.6;
}

44. CSS Font Family

Load custom fonts efficiently; limit weights for performance.

Font stack

body {
  font-family: "Source Sans 3", system-ui, sans-serif;
}

45. CSS Font Size

Avoid tiny body text; respect user zoom.

Sizes

h1 { font-size: clamp(1.75rem, 2vw + 1rem, 3rem); }
p { font-size: 1.125rem; }

46. CSS Font Weight

Only use weights you’ve loaded for custom fonts.

Weight

.title { font-weight: 700; }
.meta { font-weight: 500; }

47. CSS Line Height

Unitless line-height scales with font-size cleanly.

Line height

p { line-height: 1.6; }
h1 { line-height: 1.15; }

48. CSS Text Alignment

Prefer `start`/`end` for multilingual layouts when appropriate.

Text align

.center { text-align: center; }
.prose { text-align: start; }

49. CSS Text Decorations

Customize underline offset/thickness for readable links.

Decoration

a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

50. CSS Text Transformation

Prefer real content casing for accessibility/SEO when possible; use transform for UI labels.

Transform

.eyebrow { text-transform: uppercase; letter-spacing: 0.06em; }

51. CSS Shadows

Soft, layered shadows beat heavy default glows for most UIs.

Shadow

.card {
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.08);
}

52. CSS Opacity

opacity affects the whole element including children — use alpha backgrounds when you only want a see-through surface.

Opacity vs alpha

.faded { opacity: 0.6; }
.panel { background: rgb(255 255 255 / 0.8); }

53. CSS Gradients

Use subtle gradients for atmosphere; avoid muddy multi-stop noise.

Gradient

.hero {
  background: linear-gradient(160deg, #0f766e, #134e4a);
}

54. CSS Variables

Variables unlock theming (light/dark) and consistent design tokens.

Variables

:root {
  --brand: #0f766e;
  --space: 1rem;
}
.btn { background: var(--brand); padding: var(--space); }

55. CSS Functions

Functions make responsive fluid styles without many breakpoints.

Functions map

calc()
min() max() clamp()
rgb() hsl() color-mix()
var()

56. CSS calc()

Great for mixing % and px, or rem with viewport units.

calc

.content {
  width: calc(100% - 2rem);
}

57. CSS min(), max() and clamp()

clamp(min, preferred, max) is ideal for fluid type and spacing.

clamp

h1 {
  font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
}

58. Flexbox Introduction

Flexbox shines for nav bars, toolbars, and equal-height cards in a row.

Flex starter

.row {
  display: flex;
  gap: 1rem;
}

59. CSS Flex Container

Container properties control direction, wrap, and alignment of children.

Container

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

60. CSS Flex Direction

Changing direction swaps how justify/align behave.

Direction

.stack { flex-direction: column; }
.row-reverse { flex-direction: row-reverse; }

61. CSS Justify Content

Use start/center/space-between/space-around/space-evenly intentionally.

Justify

.nav {
  display: flex;
  justify-content: space-between;
}

62. CSS Align Items

center is common for icon+label rows; stretch equalizes heights by default in many cases.

Align items

.row {
  display: flex;
  align-items: center;
}

63. CSS Flex Wrap

Pair with gap for modern wrapping chip/tool layouts.

Wrap

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

64. CSS Gap

gap is cleaner than item margins for lists of cards/chips.

Gap

.grid {
  display: grid;
  gap: 1.25rem;
}

65. CSS Flex Grow, Shrink and Basis

`flex: 1` is a common pattern for equal flexible children.

Flex shorthand

.col { flex: 1 1 0; }
.sidebar { flex: 0 0 16rem; }

66. CSS Grid Introduction

Grid excels at page templates and card galleries.

Grid starter

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

67. CSS Grid Container

Container props define tracks, areas, and alignment.

Container

.layout {
  display: grid;
  min-height: 100dvh;
}

68. CSS Grid Columns and Rows

minmax(0, 1fr) helps prevent overflow in nested grids.

Tracks

.layout {
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

69. CSS Grid Gap

Same gap model as Flexbox — consistent mental model.

Grid gap

.cards {
  display: grid;
  gap: 1rem 1.25rem;
}

70. CSS Grid Areas

Excellent for responsive rearranging of header/main/sidebar/footer.

Areas

.layout {
  grid-template-areas:
    "header header"
    "side main"
    "footer footer";
}
header { grid-area: header; }

71. Responsive CSS Grid

Often fewer media queries are needed with fluid track recipes.

Auto-fit recipe

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

72. CSS Transitions

Transition opacity/transform for performance; avoid transitioning layout thrash properties carelessly.

Transition

.btn {
  transition: background-color 160ms ease, transform 160ms ease;
}
.btn:hover { transform: translateY(-1px); }

73. CSS Transform

Transforms don’t reflow layout the same way top/left changes do — great for motion.

Transform

.card:hover {
  transform: translateY(-4px) scale(1.01);
}

74. CSS Animations

Respect `prefers-reduced-motion` for accessibility.

Animation

.pulse {
  animation: pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}

75. CSS Keyframes

Name keyframes clearly; keep timelines short and purposeful.

Keyframes

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

76. CSS Hover Effects

Hover isn’t available on touch — don’t hide essential UI only on :hover.

Hover + focus

.link:hover,
.link:focus-visible {
  color: #0f766e;
}

77. Custom Buttons with CSS

Include :hover, :focus-visible, :active, and :disabled styles.

Button

.btn {
  border: 0;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #0f766e;
  color: #fff;
}
.btn:disabled { opacity: 0.6; }

78. Custom Cards with CSS

Use Grid/Flex inside cards for media + body alignment.

Card

.card {
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  gap: 0.75rem;
}

79. Navigation Bar Design with CSS

Plan the mobile collapse pattern early (button + panel).

Nav bar

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

80. Dropdown Menus with CSS

Prefer details/summary or JS-enhanced patterns for robust accessibility; pure CSS hover menus are fragile on mobile.

Dropdown idea

.menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 12rem;
}

81. Responsive Navigation with CSS

Use a clear toggle button label and focus management when open.

Responsive nav tip

Hamburger toggles panel
Focus visible on controls
Esc/overlay close (JS)
Don’t rely on hover alone

82. CSS Media Queries

Also use prefers-color-scheme and prefers-reduced-motion.

Media query

@media (min-width: 768px) {
  .sidebar { display: block; }
}

83. Mobile-First Design with CSS

Mobile-first usually yields simpler CSS and better progressive enhancement.

Mobile-first

.cards { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

84. Responsive Web Design with CSS

Responsive design is a system — not only breakpoints.

RWD toolkit

Fluid widths
Flex/Grid
clamp() type
Media queries
Responsive images

85. CSS Breakpoints

Fewer intentional breakpoints beat a huge device list.

Example tokens

/* sm 640 / md 768 / lg 1024 / xl 1280 — adjust to content */

86. CSS Container Queries

Container queries unlock truly modular component responsiveness.

Container query

.card-wrap { container-type: inline-size; }
@container (min-width: 400px) {
  .card { grid-template-columns: 8rem 1fr; }
}

87. Responsive Images with CSS/HTML

CSS handles presentation; HTML srcset handles resolution candidates.

Image CSS

img {
  max-width: 100%;
  height: auto;
  display: block;
}

88. CSS Object Fit

cover/contain are essential for card thumbnails and avatars.

Object fit

.thumb {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  object-position: center;
}

89. CSS Shapes

Progressive enhancement — ensure layouts still work without shapes.

Shape tip

img.cutout {
  float: left;
  shape-outside: circle(50%);
}

90. CSS Filters

Use lightly for performance and accessibility (don’t rely on color alone).

Filter

.muted {
  filter: grayscale(1) contrast(0.95);
}

91. CSS Clip-Path

Great for creative heroes; provide fallbacks for critical content.

Clip-path

.hero-media {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

92. CSS Masking

Useful for fade-outs and textured reveals.

Mask idea

.fade {
  mask-image: linear-gradient(#000, transparent);
}

93. Advanced CSS Pseudo-Class Selectors

:has() enables parent selection — check browser support for your audience.

Advanced

:is(h1, h2, h3) { line-height: 1.2; }
.card:has(img) { padding-top: 0; }
:where(.prose) a { color: inherit; }

94. CSS Nesting

Native CSS nesting is widely available in modern browsers — keep nesting shallow.

Nesting

.card {
  padding: 1rem;
  & h2 { margin-top: 0; }
  &:hover { border-color: #0f766e; }
}

95. CSS Cascade and Specificity

Lower specificity keeps overrides sane — avoid ID selectors for styling.

Specificity tip

inline > ids > classes/attributes/pseudo-classes > elements
:where() has zero specificity
Later rules win when specificity ties

96. CSS Inheritance

Use `inherit`, `initial`, `unset`, and `revert` intentionally.

Inheritance

body { color: #1c1917; }
.muted { color: inherit; opacity: 0.7; }

97. CSS !important

Prefer refactoring specificity; !important cascades into maintenance pain.

!important tip

Avoid in app CSS
OK rarely for utility escapes
Fix specificity instead when possible

98. CSS Architecture

Consistent architecture scales better than one giant stylesheet.

Layers idea

settings/tokens
base/reset
layout
components
utilities

99. BEM Methodology in CSS

BEM reduces specificity wars and clarifies component boundaries.

BEM example

.card { }
.card__title { }
.card--featured { }

100. CSS Performance Optimization

Critical CSS and deferring non-critical sheets can improve rendering.

Perf tips

Remove unused CSS
Avoid huge selector lists
Animate transform/opacity
Limit large blur filters
Split critical vs deferred CSS

101. Cross-Browser Compatibility in CSS

Use fallbacks for newer features; test Safari/Firefox/Chrome.

Compatibility tip

Progressive enhancement
Fallbacks before modern features
Test iOS Safari
Can I Use for support checks

102. Accessibility with CSS

Never remove focus outlines without :focus-visible replacements.

A11y CSS

:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

103. CSS Best Practices

Prefer reusable components and clear naming over one-off hacks.

Best practices

Design tokens/variables
Mobile-first
Flex/Grid over float layouts
Accessible focus states
Small components > giant selectors

104. CSS Debugging with DevTools

Toggle declarations live; watch specificity strikethroughs to learn cascade.

DevTools tips

Inspect → Computed
Box model diagram
Flex/Grid badges
Toggle pseudo states
Screenshot unexpected overflow

105. Tailwind CSS Introduction

Tailwind accelerates UI building — understanding CSS still makes you faster and safer.

Tailwind idea

Utilities map to CSS props
Composition via class lists
Design tokens in config
Still need CSS fundamentals

106. Bootstrap with CSS

Override via custom CSS or Sass variables — avoid fighting utilities blindly.

Bootstrap tip

Use grid/components
Customize theme variables
Don’t !important-war the framework
Know underlying CSS concepts

107. CSS Interview Questions

Be ready for box model, specificity, Flex vs Grid, and responsive strategies.

Sample Q&A

Q: Flex vs Grid?
A: Flex = 1D; Grid = 2D.

Q: Specificity?
A: IDs > classes > elements; later wins on ties.

Q: Border-box?
A: Width includes padding+border.

108. Real-World Responsive Website Project with CSS

Practice mobile-first CSS, component reuse, and DevTools debugging.

Project checklist

Tokenized colors/spacing
Responsive nav
Card grid
Fluid typography
Accessible focus states

109. Final Project – Complete Responsive Website with HTML & CSS

Create a polished marketing site with semantic HTML, design tokens, Flex/Grid layouts, responsive navigation, reusable cards/buttons, accessible focus states, and tested breakpoints. Document your CSS architecture.

  1. Design tokens and base styles.
  2. Build layout and responsive nav.
  3. Add components and page content.
  4. Test breakpoints, a11y, and polish.

Final project scope

1. 3–5 pages (Home/About/Services/Contact)
2. CSS variables for brand tokens
3. Mobile-first layout + breakpoints
4. Flex nav + responsive collapse
5. Grid card sections
6. Custom buttons/cards
7. Accessible :focus-visible + reduced motion
8. Clean file structure (base/layout/components)

Suggested CSS structure

styles/
  tokens.css
  base.css
  layout.css
  components.css
  utilities.css

Conclusion

You now have a full CSS path: cascade, layout systems, responsive techniques, and maintainable architecture. Finish the final responsive website project to turn the lessons into a portfolio-ready build.

Keep reading

Related guides

More setup guides and walkthroughs worth reading next.

Leave a reply

Your email address will not be published. Required fields are marked *