Learn CSS from Scratch

CSS as the style layer

CSS changes colour, spacing, typography, card shape, button states and layout.

.career-card {
  background: #07101d;
  color: #f7efe3;
}

Real-life example: A plain career card becomes easier to read with spacing, contrast and a clear button.

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Rules, properties and values

A CSS rule chooses an element and applies property-value pairs.

selector {
  property: value;
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Element, class, id and descendant selectors

Use class selectors for reusable components. Use ids sparingly for unique items.

h2 {
  font-size: 2rem;
}

.career-card {
  padding: 1rem;
}

.career-card a {
  font-weight: bold;
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Named colours, hex, rgb/rgba and gradients

Use strong contrast between text and background. Gradients can add depth when used carefully.

.career-card {
  background: linear-gradient(145deg, #07101d, #120b07);
  border: 1px solid rgba(240, 197, 141, 0.35);
  color: #f7efe3;
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

font-family, font-size, line-height, font-weight and letter-spacing

Readable text needs enough line height and a sensible size.

.career-card h3 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.career-card p {
  line-height: 1.6;
  font-weight: 600;
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Spacing and borders

The content is the item, padding is space inside the box, border is the box edge, and margin is space outside the box.

Padding creates space inside the card. Margin creates space outside it. Border outlines the card.

* {
  box-sizing: border-box;
}

.career-card {
  padding: 1.25rem;
  border: 1px solid rgba(240, 197, 141, 0.35);
  margin-bottom: 1rem;
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

block, inline, inline-block and none

Block elements take a full row. Inline elements sit in text flow. display: none hides an element from layout.

.tag {
  display: inline-block;
  padding: 0.35rem 0.7rem;
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Flexbox alignment

Flexbox helps arrange items in one row or one column. It is useful for aligning buttons, tags and small groups of content.

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

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

display grid, repeat, minmax and gap

Grid helps arrange items in rows and columns. It is useful when you want a clean group of cards that adapts to screen size.

.career-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Hover, focus and transitions

Hover is for pointer users. Focus-visible helps keyboard users see where they are.

.career-card a:hover,
.career-card a:focus-visible {
  border-color: #f0c58d;
  outline: 2px solid rgba(240, 197, 141, 0.45);
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Media queries and mobile-first thinking

Responsive design adapts layout for smaller screens. Flexible widths avoid horizontal overflow.

@media (max-width: 640px) {
  .career-card {
    padding: 1rem;
  }
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

transition, transform and keyframes

Use subtle motion for hover feedback. Avoid excessive movement and respect reduced-motion users in real projects.

.career-card {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.career-card:hover {
  transform: translateY(-3px);
}

Why this matters: It helps you style the Responsive Career Card Design in a controlled way.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.