Basics

Learn what CSS is, how it styles HTML, its basic syntax and how to link this with HTML.

Loading...
Basics
  • CSS stands for Cascading Style Sheets.
  • It is used to style HTML elements (like changing colors, fonts, layouts).
  • Without CSS, websites would look plain and boring.
  • CSS makes websites beautiful, organized, and user-friendly.

For example:

HTML adds text:

<h1>Hello</h1>

CSS changes how it looks:

h1 {
  color: blue;
  font-size: 30px;
}

css-syntax-structure

Syntax and Structure

CSS has a simple pattern:

selector {
  property: value;
}
  • Selector: Picks the HTML element(s) you want to style.
  • Property: The style aspect you want to change, like color, font size, margin, etc.
  • Value: The specific setting you want for that property, like red for color or 16px for font size.

Example:

p {
  color: red;
}
  • p is the selector, meaning it targets all <p> (paragraph) elements in the HTML.
  • color is the property, which controls the text color.
  • red is the value, so all paragraph texts will be colored red.

Adding CSS to HTML

There are three main ways to add CSS to HTML:

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

Inline CSS

Inline CSS is written directly inside an HTML element’s style attribute.

For example:

<p style="color: blue; font-weight: bold;">
  This text is blue and bold.
</p>

Here, the style attribute contains CSS declarations that apply only to this specific paragraph.

When to Use Inline CSS

  • For very small, specific style changes.
  • For testing or debugging quickly.
  • Overriding other CSS rules for a particular element.
  • Mixing style with HTML makes code harder to read and maintain.
  • It’s not reusable.
  • It breaks the separation of concerns (HTML for structure, CSS for styling).

Use inline CSS only for quick, temporary tweaks.

Internal CSS

Internal CSS is placed inside a <style> tag within the <head> section of your HTML file.

For example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add CSS to HTML - Learnify</title>
    <style>
      p {
        color: blue;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>This text is blue and bold.</p>
  </body>
</html>

The CSS inside the <style> tag applies to the <p> tag of the whole page.

When to Use Internal CSS

  • For styling a single page without external files.
  • When styles are short and specific to that page.

Limitations

  • It can become messy if there’s a lot of CSS.
  • Styles cannot be shared across multiple pages easily.
  • Still mixes styling with HTML structure.

Internal CSS is good for small projects or learning, but not ideal for larger, multi-page projects.

External CSS

External CSS is written in a separate .css file and linked to your HTML using the <link> tag.

This is the most common and recommended method for real projects.

For example:

styles.css:

p {
  color: blue;
  font-weight: bold;
}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>External CSS - Learnify</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>This text is blue and bold.</p>
  </body>
</html>

The <link> tag connects your HTML to the external CSS file named styles.css.

Always make sure the path in href matches your actual file structure.

Common ways to write the href:

  • href="styles.css": The file is in the same folder as your HTML.
  • href="css/styles.css": The file is inside a folder named CSS.
  • href="../styles.css": The file is one folder up from the HTML.
  • href="https://...": Loads from an external URL or CDN.

When to Use External CSS

  • For any real or multi-page project.
  • When you want to reuse styles across many pages.
  • For better organization and maintainability.

Benefits

  • Keeps HTML and CSS separate, easier to read and maintain.
  • CSS files can be cached by browsers, improving load times.
  • Enables using advanced tools, frameworks, and methodologies.
Support my work!