Skip to main content

HTML APIs

on
0

Introduction to CSS

on

Introduction to CSS: Styling Your Web Pages

CSS logo with code examples

While HTML provides structure, CSS (Cascading Style Sheets) brings your web pages to life with colors, layouts, and visual effects.

1. Three Ways to Add CSS to HTML

Inline CSS

<p style="color: blue;">This text is blue.</p>

Internal CSS

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

External CSS

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

2. CSS Selectors

Selectors determine which elements the styles will apply to:

Visual guide to CSS selectors
  • Element selector: p { }
  • Class selector: .intro { }
  • ID selector: #header { }
  • Attribute selector: a[target] { }

3. Common CSS Properties

Here are some essential properties to get started:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
  text-align: center;
}

.container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 20px;
  background: white;
}

Experiment with these CSS basics and watch how they transform your HTML pages!

Comments

Post a Comment