Menu

Logo

HTML Styling & CSS

Why Style HTML?

HTML structures your content, but CSS defines how it looks. You can control text size, color, background, layout, and more using CSS.

Inline CSS

Add the style attribute directly to an HTML element:

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

Internal CSS

Internal styles are defined in a <style> block inside the <head>:

<head>
  <style>
    h1 {
      color: purple;
    }
  </style>
</head>

External CSS

External CSS is stored in a separate .css file. Link it inside the <head>:

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

Creating and Importing .css Files

Steps to use an external CSS file:

  1. Create a file named styles.css
  2. Write your CSS rules inside:
.note {
  background-color: #f5f5dc;
  padding: 10px;
  border-left: 4px solid #999;
}

Then import it into your HTML:

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

Class and ID Selectors

Use class selectors to style multiple elements and ID selectors for unique ones:

<p class="note">Note paragraph</p>
<p id="summary">Summary paragraph</p>
.note {
  color: darkblue;
}
#summary {
  font-weight: bold;
}

Best Practices

  • Prefer external CSS for maintainability
  • Use classes for reusable styles
  • Avoid excessive inline styles

Practice Prompt

Create a styles.css file with the following:

.note {
  background-color: yellow;
  font-size: 16px;
}

Then apply it in your HTML:

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

<p class="note">This is a styled note paragraph.</p>

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic