CSS Studio | CodeQuest Myanmar

CSS Studio | CodeQuest Myanmar | CodeQuest Myanmar

CSS Advanced

29 learner topics

CSS Rounded Corners

Use Rounded Corners in real CSS code and explain what changes when the code runs.

Rounded Corners changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Rounded Corners: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Rounded Corners to a real HTML element, then change one value and watch the layout or style update.

CSS Border Images

Use Border Images in real CSS code and explain what changes when the code runs.

Border Images changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Border Images: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  box-sizing: border-box;
  margin: 1rem 0;
  border: 3px solid #111827;
  padding: 1.25rem;
  outline: 3px solid transparent;
}

Mission

Apply Border Images to a real HTML element, then change one value and watch the layout or style update.

CSS Backgrounds

Use Backgrounds in real CSS code and explain what changes when the code runs.

Backgrounds changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Backgrounds: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.hero {
  color: #111827;
  background:
    linear-gradient(135deg, #6ecbf5, #ffd93d);
}

Mission

Apply Backgrounds to a real HTML element, then change one value and watch the layout or style update.

CSS Colors

Use Colors in real CSS code and explain what changes when the code runs.

Colors changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Colors: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.hero {
  color: #111827;
  background:
    linear-gradient(135deg, #6ecbf5, #ffd93d);
}

Mission

Apply Colors to a real HTML element, then change one value and watch the layout or style update.

CSS Gradients

Use Gradients in real CSS code and explain what changes when the code runs.

Gradients changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Gradients: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.hero {
  color: #111827;
  background:
    linear-gradient(135deg, #6ecbf5, #ffd93d);
}

Mission

Apply Gradients to a real HTML element, then change one value and watch the layout or style update.

CSS Shadows

Use Shadows in real CSS code and explain what changes when the code runs.

Shadows adds motion or visual polish without changing the HTML. Use it carefully so the interface feels responsive while text remains readable and controls stay easy to use.

Real-time explanation

The blue focus for this topic is Shadows: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Shadows to a real HTML element, then change one value and watch the layout or style update.

CSS Text Effects

Use Text Effects in real CSS code and explain what changes when the code runs.

Text Effects changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Text Effects: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
}

Mission

Apply Text Effects to a real HTML element, then change one value and watch the layout or style update.

CSS Custom Fonts

Use Custom Fonts in real CSS code and explain what changes when the code runs.

Custom Fonts changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Custom Fonts: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
}

Mission

Apply Custom Fonts to a real HTML element, then change one value and watch the layout or style update.

CSS 2D Transforms

Use 2D Transforms in real CSS code and explain what changes when the code runs.

2D Transforms adds motion or visual polish without changing the HTML. Use it carefully so the interface feels responsive while text remains readable and controls stay easy to use.

Real-time explanation

The blue focus for this topic is 2D Transforms: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply 2D Transforms to a real HTML element, then change one value and watch the layout or style update.

CSS 3D Transforms

Use 3D Transforms in real CSS code and explain what changes when the code runs.

3D Transforms adds motion or visual polish without changing the HTML. Use it carefully so the interface feels responsive while text remains readable and controls stay easy to use.

Real-time explanation

The blue focus for this topic is 3D Transforms: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply 3D Transforms to a real HTML element, then change one value and watch the layout or style update.

CSS Transitions

Use Transitions in real CSS code and explain what changes when the code runs.

Transitions adds motion or visual polish without changing the HTML. Use it carefully so the interface feels responsive while text remains readable and controls stay easy to use.

Real-time explanation

The blue focus for this topic is Transitions: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.start-button {
  background: #ffd93d;
  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.start-button:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 #111827;
}

Mission

Apply Transitions to a real HTML element, then change one value and watch the layout or style update.

CSS Animations

Use Animations in real CSS code and explain what changes when the code runs.

Animations adds motion or visual polish without changing the HTML. Use it carefully so the interface feels responsive while text remains readable and controls stay easy to use.

Real-time explanation

The blue focus for this topic is Animations: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

@keyframes pulseBadge {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.badge {
  animation: pulseBadge 700ms ease-in-out infinite alternate;
}

Mission

Apply Animations to a real HTML element, then change one value and watch the layout or style update.

CSS Tooltips

Use Tooltips in real CSS code and explain what changes when the code runs.

Tooltips changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Tooltips: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Tooltips to a real HTML element, then change one value and watch the layout or style update.

CSS Image Styling

Use Image Styling in real CSS code and explain what changes when the code runs.

Image Styling changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Image Styling: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Image Styling to a real HTML element, then change one value and watch the layout or style update.

CSS Image Centering

Use Image Centering in real CSS code and explain what changes when the code runs.

Image Centering changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Image Centering: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Image Centering to a real HTML element, then change one value and watch the layout or style update.

CSS Image Filters

Use Image Filters in real CSS code and explain what changes when the code runs.

Image Filters adds motion or visual polish without changing the HTML. Use it carefully so the interface feels responsive while text remains readable and controls stay easy to use.

Real-time explanation

The blue focus for this topic is Image Filters: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Image Filters to a real HTML element, then change one value and watch the layout or style update.

CSS Image Shapes

Use Image Shapes in real CSS code and explain what changes when the code runs.

Image Shapes changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Image Shapes: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Image Shapes to a real HTML element, then change one value and watch the layout or style update.

CSS object-fit

Use object-fit in real CSS code and explain what changes when the code runs.

object-fit changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is object-fit: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply object-fit to a real HTML element, then change one value and watch the layout or style update.

CSS object-position

Use object-position in real CSS code and explain what changes when the code runs.

object-position is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is object-position: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
}

Mission

Apply object-position to a real HTML element, then change one value and watch the layout or style update.

CSS Masking

Use Masking in real CSS code and explain what changes when the code runs.

Masking changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Masking: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Masking to a real HTML element, then change one value and watch the layout or style update.

CSS Buttons

Use Buttons in real CSS code and explain what changes when the code runs.

Buttons changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Buttons: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Buttons to a real HTML element, then change one value and watch the layout or style update.

CSS Pagination

Use Pagination in real CSS code and explain what changes when the code runs.

Pagination changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Pagination: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Pagination to a real HTML element, then change one value and watch the layout or style update.

CSS Multiple Columns

Use Multiple Columns in real CSS code and explain what changes when the code runs.

Multiple Columns is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Multiple Columns: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Multiple Columns to a real HTML element, then change one value and watch the layout or style update.

CSS User Interface

Use User Interface in real CSS code and explain what changes when the code runs.

User Interface changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is User Interface: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply User Interface to a real HTML element, then change one value and watch the layout or style update.

CSS Variables

Use Variables in real CSS code and explain what changes when the code runs.

Variables changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Variables: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

:root {
  --brand: #ff5a5f;
  --surface: #fff7e9;
}
.lesson-card {
  border-color: var(--brand);
  background: var(--surface);
}

Mission

Apply Variables to a real HTML element, then change one value and watch the layout or style update.

CSS @property

Use @property in real CSS code and explain what changes when the code runs.

@property changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is @property: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

:root {
  --brand: #ff5a5f;
  --surface: #fff7e9;
}
.lesson-card {
  border-color: var(--brand);
  background: var(--surface);
}

Mission

Apply @property to a real HTML element, then change one value and watch the layout or style update.

CSS Box Sizing

Use Box Sizing in real CSS code and explain what changes when the code runs.

Box Sizing changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Box Sizing: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  box-sizing: border-box;
  margin: 1rem 0;
  border: 3px solid #111827;
  padding: 1.25rem;
  outline: 3px solid transparent;
}

Mission

Apply Box Sizing to a real HTML element, then change one value and watch the layout or style update.

CSS Media Queries

Use Media Queries in real CSS code and explain what changes when the code runs.

Media Queries changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Media Queries: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply Media Queries to a real HTML element, then change one value and watch the layout or style update.

CSS Flexbox

4 learner topics

Flexbox Intro

Use Flexbox Intro in real CSS code and explain what changes when the code runs.

Flexbox Intro is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Flexbox Intro: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply Flexbox Intro to a real HTML element, then change one value and watch the layout or style update.

Flex Container

Use Flex Container in real CSS code and explain what changes when the code runs.

Flex Container is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Flex Container: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply Flex Container to a real HTML element, then change one value and watch the layout or style update.

Flex Items

Use Flex Items in real CSS code and explain what changes when the code runs.

Flex Items is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Flex Items: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply Flex Items to a real HTML element, then change one value and watch the layout or style update.

Flex Responsive

Use Flex Responsive in real CSS code and explain what changes when the code runs.

Flex Responsive is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Flex Responsive: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply Flex Responsive to a real HTML element, then change one value and watch the layout or style update.

CSS Grid

5 learner topics

Grid Intro

Use Grid Intro in real CSS code and explain what changes when the code runs.

Grid Intro is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Grid Intro: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.main-panel {
  grid-column: span 8;
}

Mission

Apply Grid Intro to a real HTML element, then change one value and watch the layout or style update.

Grid Container

Use Grid Container in real CSS code and explain what changes when the code runs.

Grid Container is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Grid Container: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.main-panel {
  grid-column: span 8;
}

Mission

Apply Grid Container to a real HTML element, then change one value and watch the layout or style update.

Grid Items

Use Grid Items in real CSS code and explain what changes when the code runs.

Grid Items is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Grid Items: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.main-panel {
  grid-column: span 8;
}

Mission

Apply Grid Items to a real HTML element, then change one value and watch the layout or style update.

Grid 12-column Layout

Use Grid 12-column Layout in real CSS code and explain what changes when the code runs.

Grid 12-column Layout is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is Grid 12-column Layout: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.main-panel {
  grid-column: span 8;
}

Mission

Apply Grid 12-column Layout to a real HTML element, then change one value and watch the layout or style update.

CSS @supports

Use @supports in real CSS code and explain what changes when the code runs.

@supports changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is @supports: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply @supports to a real HTML element, then change one value and watch the layout or style update.

CSS Responsive

8 learner topics

RWD Intro

Use RWD Intro in real CSS code and explain what changes when the code runs.

RWD Intro changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is RWD Intro: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply RWD Intro to a real HTML element, then change one value and watch the layout or style update.

RWD Viewport

Use RWD Viewport in real CSS code and explain what changes when the code runs.

RWD Viewport changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is RWD Viewport: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply RWD Viewport to a real HTML element, then change one value and watch the layout or style update.

RWD Grid View

Use RWD Grid View in real CSS code and explain what changes when the code runs.

RWD Grid View is a layout tool for placing elements on a real page. When you change these rules, the browser recalculates the layout instantly, which makes CSS ideal for testing responsive designs live.

Real-time explanation

The blue focus for this topic is RWD Grid View: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.main-panel {
  grid-column: span 8;
}

Mission

Apply RWD Grid View to a real HTML element, then change one value and watch the layout or style update.

RWD Media Queries

Use RWD Media Queries in real CSS code and explain what changes when the code runs.

RWD Media Queries changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is RWD Media Queries: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply RWD Media Queries to a real HTML element, then change one value and watch the layout or style update.

RWD Images

Use RWD Images in real CSS code and explain what changes when the code runs.

RWD Images changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is RWD Images: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply RWD Images to a real HTML element, then change one value and watch the layout or style update.

RWD Videos

Use RWD Videos in real CSS code and explain what changes when the code runs.

RWD Videos changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is RWD Videos: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply RWD Videos to a real HTML element, then change one value and watch the layout or style update.

RWD Frameworks

Use RWD Frameworks in real CSS code and explain what changes when the code runs.

RWD Frameworks changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is RWD Frameworks: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply RWD Frameworks to a real HTML element, then change one value and watch the layout or style update.

RWD Templates

Use RWD Templates in real CSS code and explain what changes when the code runs.

RWD Templates changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is RWD Templates: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

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

Mission

Apply RWD Templates to a real HTML element, then change one value and watch the layout or style update.

CSS Examples

12 learner topics

CSS Templates

Use Templates in real CSS code and explain what changes when the code runs.

Templates changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Templates: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Templates to a real HTML element, then change one value and watch the layout or style update.

CSS Examples

Use Examples in real CSS code and explain what changes when the code runs.

Examples changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Examples: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Examples to a real HTML element, then change one value and watch the layout or style update.

100

CSS Editor

Use Editor in real CSS code and explain what changes when the code runs.

Editor changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Editor: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Editor to a real HTML element, then change one value and watch the layout or style update.

101

CSS Snippets

Use Snippets in real CSS code and explain what changes when the code runs.

Snippets changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Snippets: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Snippets to a real HTML element, then change one value and watch the layout or style update.

102

CSS Quiz

Use Quiz in real CSS code and explain what changes when the code runs.

Quiz changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Quiz: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Quiz to a real HTML element, then change one value and watch the layout or style update.

103

CSS Exercises

Use Exercises in real CSS code and explain what changes when the code runs.

Exercises changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Exercises: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Exercises to a real HTML element, then change one value and watch the layout or style update.

104

CSS Code Challenges

Use Code Challenges in real CSS code and explain what changes when the code runs.

Code Challenges changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Code Challenges: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Code Challenges to a real HTML element, then change one value and watch the layout or style update.

105

CSS Website

Use Website in real CSS code and explain what changes when the code runs.

Website changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Website: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Website to a real HTML element, then change one value and watch the layout or style update.

106

CSS Syllabus

Use Syllabus in real CSS code and explain what changes when the code runs.

Syllabus changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Syllabus: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Syllabus to a real HTML element, then change one value and watch the layout or style update.

107

CSS Study Plan

Use Study Plan in real CSS code and explain what changes when the code runs.

Study Plan changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Study Plan: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Study Plan to a real HTML element, then change one value and watch the layout or style update.

108

CSS Interview Prep

Use Interview Prep in real CSS code and explain what changes when the code runs.

Interview Prep changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Interview Prep: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Interview Prep to a real HTML element, then change one value and watch the layout or style update.

109

CSS Bootcamp

Use Bootcamp in real CSS code and explain what changes when the code runs.

Bootcamp changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Bootcamp: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Bootcamp to a real HTML element, then change one value and watch the layout or style update.

CSS References

16 learner topics

110

CSS Reference

Use Reference in real CSS code and explain what changes when the code runs.

Reference changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Reference: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Reference to a real HTML element, then change one value and watch the layout or style update.

111

CSS Selectors

Use Selectors in real CSS code and explain what changes when the code runs.

Selectors decides which elements receive a style. Real CSS depends on predictable selectors and specificity, because one rule can override another as the page updates.

Real-time explanation

The blue focus for this topic is Selectors: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card[data-complete="true"] > h3::after {
  content: "Complete";
  margin-left: 0.5rem;
  color: #0f766e;
}

Mission

Apply Selectors to a real HTML element, then change one value and watch the layout or style update.

112

CSS Combinators

Use Combinators in real CSS code and explain what changes when the code runs.

Combinators changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Combinators: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card[data-complete="true"] > h3::after {
  content: "Complete";
  margin-left: 0.5rem;
  color: #0f766e;
}

Mission

Apply Combinators to a real HTML element, then change one value and watch the layout or style update.

113

CSS Pseudo-classes

Use Pseudo-classes in real CSS code and explain what changes when the code runs.

Pseudo-classes decides which elements receive a style. Real CSS depends on predictable selectors and specificity, because one rule can override another as the page updates.

Real-time explanation

The blue focus for this topic is Pseudo-classes: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card[data-complete="true"] > h3::after {
  content: "Complete";
  margin-left: 0.5rem;
  color: #0f766e;
}

Mission

Apply Pseudo-classes to a real HTML element, then change one value and watch the layout or style update.

114

CSS Pseudo-elements

Use Pseudo-elements in real CSS code and explain what changes when the code runs.

Pseudo-elements decides which elements receive a style. Real CSS depends on predictable selectors and specificity, because one rule can override another as the page updates.

Real-time explanation

The blue focus for this topic is Pseudo-elements: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card[data-complete="true"] > h3::after {
  content: "Complete";
  margin-left: 0.5rem;
  color: #0f766e;
}

Mission

Apply Pseudo-elements to a real HTML element, then change one value and watch the layout or style update.

115

CSS At-rules

Use At-rules in real CSS code and explain what changes when the code runs.

At-rules changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is At-rules: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply At-rules to a real HTML element, then change one value and watch the layout or style update.

116

CSS Functions

Use Functions in real CSS code and explain what changes when the code runs.

Functions changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Functions: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Functions to a real HTML element, then change one value and watch the layout or style update.

117

CSS Reference Aural

Use Reference Aural in real CSS code and explain what changes when the code runs.

Reference Aural changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Reference Aural: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Reference Aural to a real HTML element, then change one value and watch the layout or style update.

118

CSS Web Safe Fonts

Use Web Safe Fonts in real CSS code and explain what changes when the code runs.

Web Safe Fonts changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Web Safe Fonts: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
}

Mission

Apply Web Safe Fonts to a real HTML element, then change one value and watch the layout or style update.

119

CSS Animatable

Use Animatable in real CSS code and explain what changes when the code runs.

Animatable changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Animatable: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Animatable to a real HTML element, then change one value and watch the layout or style update.

120

CSS Units

Use Units in real CSS code and explain what changes when the code runs.

Units changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Units: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Units to a real HTML element, then change one value and watch the layout or style update.

121

CSS PX-EM Converter

Use PX-EM Converter in real CSS code and explain what changes when the code runs.

PX-EM Converter changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is PX-EM Converter: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply PX-EM Converter to a real HTML element, then change one value and watch the layout or style update.

122

CSS Colors

Use Colors in real CSS code and explain what changes when the code runs.

Colors changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Colors: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.hero {
  color: #111827;
  background:
    linear-gradient(135deg, #6ecbf5, #ffd93d);
}

Mission

Apply Colors to a real HTML element, then change one value and watch the layout or style update.

123

CSS Color Values

Use Color Values in real CSS code and explain what changes when the code runs.

Color Values changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Color Values: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.hero {
  color: #111827;
  background:
    linear-gradient(135deg, #6ecbf5, #ffd93d);
}

Mission

Apply Color Values to a real HTML element, then change one value and watch the layout or style update.

124

CSS Default Values

Use Default Values in real CSS code and explain what changes when the code runs.

Default Values changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Default Values: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Default Values to a real HTML element, then change one value and watch the layout or style update.

125

CSS Browser Support

Use Browser Support in real CSS code and explain what changes when the code runs.

Browser Support changes how real HTML looks in the browser. Edit the rule, watch the page update, then adjust spacing, color, and sizing until the design communicates clearly.

Real-time explanation

The blue focus for this topic is Browser Support: the example shows the real CSS rule that changes layout, spacing, color, or motion immediately in the browser.

.lesson-card {
  border: 3px solid #111827;
  border-radius: 8px;
  background: #fff7e9;
  padding: 1rem;
}

Mission

Apply Browser Support to a real HTML element, then change one value and watch the layout or style update.

Learn CSS with beginner-friendly guidance

Course content

CSS Tutorial

CSS HOME

Practice rule

Reference

CSS Introduction

CSS Syntax

CSS Selectors

CSS How To

CSS Comments

CSS Errors

CSS Colors

CSS Backgrounds

CSS Borders

CSS Margins

CSS Padding

CSS Height / Width

CSS Box Model

CSS Outline

CSS Text

CSS Fonts

CSS Icons

CSS Links

CSS Lists

CSS Tables

CSS Display

CSS Max-width

CSS Position

CSS Position Offsets

CSS Z-index

CSS Overflow

CSS Float

CSS Inline-block

CSS Align

CSS Combinators

CSS Pseudo-classes

CSS Pseudo-elements

CSS Opacity

CSS Navigation Bars

CSS Dropdowns

CSS Image Gallery

CSS Image Sprites

CSS Attribute Selectors

CSS Forms

CSS Counters

CSS Units

CSS Inheritance

CSS Specificity

CSS !important

CSS Math Functions

CSS Optimization

CSS Accessibility

CSS Website Layout

CSS Advanced

CSS Rounded Corners

CSS Border Images

CSS Backgrounds

CSS Colors

CSS Gradients

CSS Shadows

CSS Text Effects

CSS Custom Fonts

CSS 2D Transforms

CSS 3D Transforms

CSS Transitions

CSS Animations

CSS Tooltips

CSS Image Styling

CSS Image Modal

CSS Image Centering

CSS Image Filters

CSS Image Shapes

CSS object-fit

CSS object-position

CSS Masking

CSS Buttons

CSS Pagination

CSS Multiple Columns

CSS User Interface