Loading...

HTML CSS

You already practiced tiny look changes with the style attribute and color values. Real sites rarely keep every design rule on every tag. CSS (Cascading Style Sheets) is the language that describes look-and-feel. This session focuses on how HTML loads CSS in three common ways — not on building a full design system yet.

What is CSS doing here?

HTML structures content. CSS describes presentation: colors, spacing, fonts, and layout ideas you will deepen later. Your HTML page can carry a few CSS declarations on one element, hold a small stylesheet inside the document, or point to a separate .css file. Choosing the right place keeps demos fast and real projects maintainable.

Direct answer

Use inline CSS with style="..." on one element for quick tests. Use an internal <style>...</style> block, usually in <head>, for single-page practice. Use an external .css file linked with <link rel="stylesheet" href="styles.css"> when many pages should share the same look. Prefer external CSS as soon as you care about reuse and clean HTML.

Three ways at a glance

📊 Three ways to add CSS

Method Where Best for
Inline style attribute on a tag Tiny one-off tests
Internal style element in head Single-page demos
External .css file + link Shared site styling

Inline CSS (reminder)

Inline CSS lives on one element. It is perfect for a thirty-second experiment and weak for a whole website, because every repeated look must be copied again.

Inline CSS reminder

html
HTML Code 
<p style="color: teal;">Inline CSS on one element</p>

When inline still helps

  • Checking one color or size quickly
  • Teaching the property:value idea from earlier sessions
  • Temporary overrides while you learn — then move the rule into a stylesheet
    Do not build an entire multi-page brand with only inline attributes. That path becomes hard to update.

Internal CSS in the head

An internal stylesheet is a <style> element that holds CSS rules for the current HTML file. Beginners usually place it in <head> so styling is declared before the body content.

Internal CSS in head

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>

Reading the internal example

  • The style element contains CSS, not HTML tags for page structure
  • p { color: navy; } means “all p elements get navy text” in this document
  • One rule can style many paragraphs without repeating style="..." on each tag
  • Internal CSS is still trapped in this one HTML file — other pages do not see it unless you copy the block

External CSS with link

External CSS keeps rules in a file such as styles.css. HTML connects to that file with a link element. This is the usual pattern for shared site styling.

External stylesheet link

html
HTML Code 
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>

What must be true for external CSS to work

  • The link needs rel="stylesheet" so the browser knows the relationship
  • href must point to the real CSS file using a correct path (see the File Paths session)
  • Inside styles.css you write rules such as p { color: navy; } and h1 { color: darkgreen; }
  • If the path is wrong, the HTML still opens — but it looks unstyled
    Put the CSS file beside the HTML file for your first practice, then try a subfolder only after paths feel solid.

Choosing a method

Ask how far the styles must travel:

  • One quick experiment on one element → inline
  • One practice page, several rules → internal <style> in head
  • Many pages, one shared look → external .css + link
    As you continue into a full CSS course later, external stylesheets become the default for real projects. This HTML session makes sure you can wire them correctly.

Practice in your editor

  1. Create page.html with a heading and two paragraphs.
  2. Create styles.css with one rule that colors h1 and another that styles p.
  3. In the HTML head, add <link rel="stylesheet" href="styles.css">.
  4. Open the page. If styles are missing, check the path and rel.
  5. Temporarily rename or move styles.css, reload, see the failure, then fix the href.
  6. Optional: move one rule into an internal <style> block and compare.
    Breaking the link on purpose teaches path mistakes faster than only reading about them.

Mistakes that leave pages unstyled

  • Forgetting rel="stylesheet" on link
  • Putting styles.css in another folder but linking as if it sat beside the HTML
  • Filling every tag with inline style instead of sharing one stylesheet
  • Dumping a huge <style> block at the end of body by habit when head is clearer for beginners
  • Editing the CSS file but refreshing a different HTML file than the one you linked

Summary

  • CSS styles HTML; HTML can load CSS inline, internally, or externally
  • Inline style is fine for tiny tests, not whole sites
  • Internal <style> in head suits single-file practice
  • External .css plus link rel="stylesheet" is the usual shared approach
  • Correct file paths matter as much as the CSS rules themselves
  • Prefer the method that matches how widely the styles must be reused

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial