HTML Styles with CSS

HTML Tutorial

HTML Home
HTML Introduction
HTML Editors
HTML Basics
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Text Formatting
HTML Quotation and Citation Elements
HTML Comments
HTML Colors
HTML Styles with CSS

🎨 HTML Styles with CSS – Design Your Web Pages

If HTML is the structure of your web page, then CSS (Cascading Style Sheets) is the design language that makes your website beautiful, responsive, and user-friendly.

With CSS, you can control colors, fonts, spacing, layouts, backgrounds, and even animations. Instead of styling each page manually, CSS allows you to create rules that apply across your entire website.

🖍️ What is CSS?

CSS (Cascading Style Sheets) is used to format the layout of web pages. It helps you:

Change colors, fonts, and text sizes
Adjust spacing, margins, and padding
Set background colors and images
Create responsive layouts for different screen sizes
Control the look and feel of multiple pages at once

💡 Why “Cascading”?
Because styles applied to a parent element are automatically passed down (“cascade”) to child elements, unless overridden.
For example:

body {
  color: blue;
}

This will make all text on the page blue — unless you set a different color for specific elements.

🖍️ Ways to Use CSS in HTML

There are 3 main methods to include CSS in your HTML document.

1️⃣ Inline CSS

Used for quick, one-time styling on an element using the style attribute.

✅ Example:

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A Red Paragraph</p>

⚡ Best for: Small changes and testing.
🚫 Not recommended for large projects — clutters your HTML.

2️⃣ Internal CSS

Defined inside the <head> of a page using the <style> tag.

✅ Example:

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightyellow; }
h1 { color: blue; }
p { color: green; }
</style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

⚡ Best for: Small projects or single-page websites.

3️⃣ External CSS

The most professional and scalable method. CSS is written in a separate .css file and linked in your HTML.

✅ Example (HTML file):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

✅ Example (styles.css file):

body {
  background-color: #f5f5f5;
}
h1 {
  color: navy;
}
p {
  color: darkgreen;
}

⚡ Best for: Large websites with multiple pages.
💡 Pro Tip: Changing just one file updates the style for the whole website.

🎨 Common CSS Properties

1. Colors, Fonts & Sizes

h1 {
  color: blue;
  font-family: Verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: Courier;
  font-size: 160%;
}

2. Borders

Add styled borders around elements.

p {
  border: 2px solid dodgerblue;
}

3. Padding

Controls the space inside an element’s border.

p {
  border: 2px solid dodgerblue;
  padding: 20px;
}

4. Margin

Controls the space outside an element’s border.

p {
  border: 2px solid dodgerblue;
  margin: 40px;
}

🌍 Linking External CSS

You can link external CSS files using:

Full URL

<link rel="stylesheet" href="https://example.com/styles.css">

Relative Path (inside a folder)

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

Same Folder

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

🚀 Real-World Use Cases

Feature	Why It Matters in Real Sites
External CSS	Saves time – one change updates the whole site.
Responsive Design	Makes your site look great on mobiles, tablets, and desktops.
Padding & Margin	Creates breathing room for clean layouts.
Fonts & Colors	Improves readability and branding.
Borders & Boxes	Helps highlight sections like call-to-actions.

🧠 Quick Recap

✔️ Inline CSS → Style a single element.
✔️ Internal CSS → Style one page.
✔️ External CSS → Style multiple pages (recommended).
✔️ Use color, font, size, border, margin, padding for beautiful layouts.

🌟 GoNimbus Pro Tips

Keep it clean → Avoid inline styles in real projects.
Mobile-first design → Use CSS media queries for responsiveness.
Use variables → Modern CSS supports variables for brand colors. :root { --primary-color: #007BFF; } h1 { color: var(--primary-color); }
Stay organized → Break CSS into multiple files (layout.css, colors.css, typography.css).

🧪 Practice Challenge

👉 Create a simple web page with:

A blue background
A centered heading in white text
A paragraph with 20px padding and green text
A red border around the paragraph

🚀 Learn with GoNimbus

At GoNimbus, we don’t just teach code — we help you build professional, responsive, and modern websites using HTML & CSS.

Start your journey today, and design web pages that look amazing across all devices! 🌐