Free CSS Certification Course

Master web styling and layouts with our 100% Free CSS Certification Course. Learn selectors, Flexbox, and modern animations today.

1. Introduction to CSS

CSS (Cascading Style Sheets) is the language we use to style an HTML document. CSS describes how HTML elements should be displayed on screen, paper, or in other media.

2. CSS Selectors

Selectors are used to "find" (or select) the HTML elements you want to style.

/* Element Selector */
p { color: #3dbaf9; }

/* Class Selector */
.highlight { background: yellow; }

/* ID Selector */
#unique { font-weight: bold; }

3. Colors & Backgrounds

CSS supports color names, HEX, RGB, RGBA, HSL, and HSLA values.

div {
  color: white;
  background: linear-gradient(45deg, #3dbaf9,    .hero-img {
      width: 100%;
      border-radius: 30px;
      margin: 2rem 0;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

4. Typography

Control fonts, sizes, weights, and styles with CSS properties.

h2 {
  font-family: 'Inter', sans-serif;
  font-size: 2.5rem;
  letter-spacing: -1px;
}

5. The Box Model

Every element is a box. It consists of: Margins, Borders, Padding, and Content.

.box {
  margin: 20px;
  padding: 40px;
  border: 5px solid #3dbaf9;
  background: #f0f5ff;
}

6. CSS Flexbox

Flexbox makes it easier to design a flexible responsive layout structure without using float or positioning.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.item { padding: 20px; background: #eee; }

7. Keyframe Animations

Create complex animations by defining states at specific time intervals.

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.btn { animation: pulse 2s infinite; }