CSS Course

CSS (Cascading Style Sheets) is the language used to describe the style and layout of HTML documents. It allows you to control colors, fonts, spacing, positioning, responsiveness, and animations, giving structure and visual appeal to your web pages.

CSS Tags & Explanations

color: Changes the text color.
p { color: red; }
background-color: Sets background color.
body { background-color: #f0f0f0; }
margin: Sets space outside the element.
div { margin: 20px; }
padding: Sets space inside the element.
div { padding: 15px; }
border: Adds border around the element.
div { border: 2px solid black; }
display: Defines how elements are displayed (block, inline, flex).
div { display: flex; }
position: Positions the element (relative, absolute, fixed, sticky).
h1 { position: absolute; top: 0; left: 0; }
animation: Animates element transitions.
@keyframes example { 0% {opacity: 0;} 100% {opacity: 1;} } div { animation: example 2s; }
@media: Applies styles conditionally for responsive design.
@media screen and (max-width: 600px) { body { font-size: 14px; } }
transition: Adds smooth animation effects.
button { transition: all 0.3s ease; }

Try CSS in Browser (Simple Compiler)

CSS Quiz

  1. What does CSS stand for?
  2. How do you select an element with ID "box" in CSS?
  3. What property is used to change text color?
  4. What is the default position value in CSS?
  5. Which property allows you to make responsive designs?
  6. What does display: flex; do?
  7. How do you center an element using flexbox?
  8. What unit is commonly used for font-size?
  9. Which tag is used to add animations?
  10. What is the difference between margin and padding?
  11. How do you add a border only to the bottom of an element?
  12. What media query is used to apply styles to screens under 768px?