HTML CSS Basics (Using CSS with HTML)

HTML and CSS work together to create web pages.
HTML defines the structure, and CSS controls the appearance.

This lesson explains how CSS is used with HTML, without going deep into CSS itself.

What Is CSS?

CSS (Cascading Style Sheets) is used to style HTML elements.

CSS controls:

  • Colors
  • Fonts
  • Spacing
  • Layout appearance

HTML decides what content exists.
CSS decides how it looks.

How CSS Works with HTML

CSS targets HTML elements and applies styles to them.

Example:

<p>This is a paragraph.</p>

CSS tells the browser how this paragraph should look.

Ways to Use CSS with HTML

There are three common ways to apply CSS:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

(Explained briefly below)

Inline CSS

CSS is written inside the HTML element using the style attribute.

<p style="color: blue; font-size: 16px;">
  This paragraph uses inline CSS.
</p>
  • Affects one element
  • Not recommended for large projects

Internal CSS

CSS is written inside a <style> tag in the <head> section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This paragraph uses internal CSS.</p>
</body>
</html>
  • Applies to one page
  • Useful for small pages

External CSS (Recommended)

CSS is written in a separate .css file and linked to HTML.

HTML File

<link rel="stylesheet" href="styles.css" type="text/css" media="all">

CSS File

p {
  color: purple;
  font-size: 20px;
}
  • Best practice
  • Keeps HTML clean
  • Reusable across pages

Important Notes

  • CSS is not part of HTML
  • HTML works without CSS, but looks plain
  • External CSS is preferred
  • Full CSS concepts are covered in a separate CSS course