HTML Styles CSS

❮ Previous Next ❯
Lesson 14 of 58

CSS stands for Cascading Style Sheets. It is the language that makes websites look good. HTML builds the structure. CSS adds the colors, fonts, spacing, and layout.

What is CSS?

CSS controls how your webpage looks. With CSS you can change colors, fonts, text sizes, spacing between elements, where things sit on the page, background images, and much more.

The word “cascading” means that a style applied to a parent element also applies to all child elements inside it. For example, if you set the text color of the whole page to blue, everything inside the page will be blue unless you specifically change it.

CSS saves you a ton of work. You can change the look of your entire website by editing just one file.

Three Ways to Add CSS to Your Page

There are three ways to add CSS to HTML:

  • Inline CSS – Using the style attribute inside an HTML tag. We have been doing this already.
  • Internal CSS – Using a <style> tag in the <head> section of your page.
  • External CSS – Using a separate .css file linked to your HTML page. This is the best way for real websites.

In this chapter, we will look at all three so you understand how they work.

Inline CSS (What We Have Been Using)

Inline CSS uses the style attribute directly inside an HTML tag. We already used this in the Colors and Styles chapters.

This is good for quick tests, but not for real websites because you have to style every single element one by one.

Inline CSS Example

See how I had to write style="color:red;" on every paragraph? That gets repetitive fast. That is why we have better ways.

Internal CSS (Style for One Page)

Internal CSS uses a <style> tag inside the <head> section of your HTML page. You write the styles once, and they apply to everything on that page.

This is much cleaner than inline CSS because you are not repeating yourself.

Internal CSS Example

See how all the paragraphs turned red automatically? That is the power of CSS. You write the rule once, and everything follows it.

Let me break down what that code means:

  • .internal-demo { background-color: lightblue; } – Makes the background light blue only inside that box.
  • .internal-demo h1 { color: blue; font-family: verdana; } – Makes every heading inside that box blue and Verdana font.
  • .internal-demo p { color: red; font-family: courier; } – Makes every paragraph inside that box red and Courier font.

External CSS (Best for Real Websites)

External CSS is when you put all your styles in a separate file with a .css extension. Then you link to that file from your HTML page.

Why is this the best? Because you can use the same CSS file for many HTML pages. Change one file, and every page on your website updates automatically.

Here is what the HTML page looks like:

HTML File (index.html) 
<!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>

And here is what the separate CSS file looks like:

styles.css (separate file) 
body {
  background-color: lightblue;
}
h1 {
  color: blue;
  font-family: verdana;
}
p {
  color: red;
  font-family: courier;
}
Note: The CSS file has no HTML tags. No <style> tag. Just the CSS rules. Save it as “styles.css” in the same folder as your HTML file.

To use an external CSS file, both files must be in the same folder, or you must provide the correct path. We will talk about file paths in a later chapter.

CSS Colors, Fonts, and Sizes Together

Now let us combine multiple CSS properties. You can put as many as you want inside the curly braces, separated by semicolons.

Multiple CSS Properties

See how much you can do with just a few lines of CSS? That is the power of it.

CSS Borders

You can add a border around any element. The border property takes three values: thickness, style, and color.

CSS Borders

2px means 2 pixels thick. solid means a solid line (you can also use dotted or dashed). powderblue is the color.

CSS Padding (Space Inside the Border)

Padding adds space between the content (your text) and the border. Without padding, the text touches the border.

CSS Padding

See how much space there is between the text and the border? That is padding.

CSS Margin (Space Outside the Border)

Margin adds space outside the border, between this element and other elements around it.

CSS Margin

Think of it like this: Padding is inside the border. Margin is outside the border.

Quick Summary

  • CSS controls how your website looks (colors, fonts, layout, spacing).
  • Inline CSS uses the style attribute. Good for quick tests.
  • Internal CSS uses a <style> tag in the <head>. Good for single pages.
  • External CSS uses a separate .css file. Best for real websites.
  • color changes text color.
  • font-family changes the font.
  • font-size changes text size.
  • border adds a border around an element.
  • padding adds space inside the border.
  • margin adds space outside the border.

What Just Happened? Let Me Explain

  • Start with inline CSS for small experiments. It is the easiest to understand.
  • Move to internal CSS when you have more than a few elements on one page.
  • Use external CSS for real projects. It keeps your HTML clean and lets you reuse styles across many pages.
  • Padding pushes content away from the border. Margin pushes other elements away from the border.
  • You will learn much more about CSS later. This is just the beginning.
Tip: Open VS Code and create a file called css-intro.html. Try all three methods. First, use inline CSS on a few elements. Then move those styles to an internal <style> tag. Finally, create a separate styles.css file and link to it. See how each method works and when you would use each one.

HTML CSS Reference

Here are the tags and concepts we covered in this chapter:

Tag / Concept Description
style attribute Inline CSS (inside an HTML tag)
<style> tag Internal CSS (in the <head> section)
<link> tag Links to an external CSS file
.css file External CSS file (no HTML, just CSS rules)
❮ Previous Next ❯
Lesson 14 of 58