Lesson 5 of 18

CSS Basics 🎨

🎯 Grades 9–12 ⏱ ~35 minutes 💚 Intermediate

What You'll Learn

  • Link a CSS file to an HTML page
  • Use selectors, properties, and values
  • Style text, colors, and backgrounds

What Is CSS?

CSS (Cascading Style Sheets) controls the appearance of your HTML. Same HTML, totally different look, just by changing the CSS. Create a new file called style.css and link it:

HTML
<head>
  <link rel="stylesheet" href="style.css">
</head>

Selectors, Properties, Values

CSS
/* Syntax: selector { property: value; } */

/* Element selector */
h1 {
  color: #00C853;       /* green text */
  font-size: 48px;
  font-weight: bold;
}

p {
  color: #94A3B8;        /* gray text */
  line-height: 1.6;
  font-size: 16px;
}

body {
  background-color: #0A1628; /* dark navy */
  font-family: Arial, sans-serif;
}

Class and ID Selectors

CSS
/* Class selector - reusable */
.highlight {
  background-color: yellow;
  padding: 4px 8px;
}

/* ID selector - unique element */
#main-title {
  text-align: center;
  margin-bottom: 2rem;
}
HTML
<h1 id="main-title">OKSTEM Foundation</h1>
<p>This is <span class="highlight">very important</span> text.</p>
💡
Class vs ID

Use classes (.) for styles you reuse on multiple elements. Use IDs (#) for styles on one unique element. You can give elements multiple classes.

🎨">Style Your About Page

Create style.css and link it to your About Me page. Style: body background, h1 color and font-size, p line-height, and at least one class you invent yourself.

Quick Check

How do you select an element with class 'btn' in CSS?

A#btn
Bbtn
C.btn

Which property sets the text color in CSS?

Atext-color
Bfont-color
Ccolor

How do you link a CSS file called style.css to an HTML page?

A
B
C