Learn CSS

CSS Topics

Click on a topic to expand and learn in detail.

• 1. Introduction to CSS

CSS (Cascading Style Sheets) is used to style HTML elements and make websites visually appealing.

/* Example */
body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
}
      

• 2. CSS Selectors

Selectors target HTML elements to apply styles.

/* Tag selector */
p {
  color: red;
}

/* Class selector */
.my-class {
  font-size: 18px;
}

/* ID selector */
#my-id {
  background: yellow;
}
      

• 3. Colors, Fonts & Text

body {
  color: #333;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

h1 {
  color: darkblue;
  font-weight: 600;
}
      

• 4. Box Model

/* Box model consists of: margin, border, padding, content */
div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 15px;
}
      

• 5. Backgrounds & Borders

div {
  background-color: lightyellow;
  border: 2px dashed green;
  border-radius: 10px;
}
      

• 6. Display & Visibility

/* Display types: block, inline, inline-block, none */
div {
  display: block;
}

/* Visibility */
p {
  visibility: hidden;
}
      

• 7. Positioning

/* Static, Relative, Absolute, Fixed, Sticky */
div {
  position: relative;
  top: 10px;
  left: 20px;
}
      

• 8. Flexbox

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

.item {
  flex: 1;
}
      

• 9. CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background: lightblue;
}
      

• 10. Responsive Design & Media Queries

/* Mobile first responsive */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}
      

• 11. Transitions & Animations

/* Transition */
div {
  transition: background 0.5s;
}

/* Animation */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation: example 3s infinite;
}
      

• 12. Advanced CSS Topics
• CSS Variables (Custom Properties)
• CSS Pseudo-classes (:hover, :nth-child, :focus)
• CSS Pseudo-elements (::before, ::after)
• Advanced Selectors
• CSS Functions (calc(), clamp(), min(), max())
• CSS Grid Advanced Layouts
• CSS Flexbox Advanced Alignment
• CSS Clip-path & Masking
• CSS Filters & Blend Modes
• CSS Scroll & Sticky Elements
• CSS Variables & Theming