CSS Introduction

on

CSS is the language we use to style a Web page.


What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

Three Ways to Add CSS to an HTML Website

When building a website, there are three main ways to apply CSS to your HTML:

  1. Inline CSS

  2. Internal CSS

  3. External CSS

In this guide, we will learn all three methods, understand why they are used, and know which one is best in different situations.

1️⃣ Inline CSS

Inline CSS means adding the CSS code directly inside the opening HTML tag using the style attribute.

  • The style attribute is a global attribute, meaning it can be used with almost any HTML tag (like <img>, <br>, etc.).

  • Attribute format: name="value".

  • Inside the style attribute, you write the CSS as property: value;.

Example:

<h1 style="background-color: blue;">Hello</h1>

This method applies the style to that specific element only.

Advantages:

  • Good for quick changes or styling a single element.

Disadvantages:

  • If you need the same style for many elements, you have to repeat it, which is inefficient.

2️⃣ Internal CSS

Internal CSS is written inside the HTML document using the <style> tag, usually placed in the <head> section.

  • CSS syntax: start with a selector, then write the property and value inside { }.

Example:

<style>
  h1 {
    color: red;
  }
</style>

Internal CSS affects only that specific HTML file.

Advantages:

  • Can easily apply the same style to multiple elements in the same page.

Disadvantages:

  • For multi-page websites, you must copy the same styles into each page.

3️⃣ External CSS

This is the most common and professional method. The CSS is written in a separate .css file (for example, style.css) and linked to the HTML document with a <link> tag inside the <head> section.

  • <link> is self-closing and usually includes two attributes:

    • rel="stylesheet" — tells the browser it’s a CSS file.

    • href="style.css" — the location of your CSS file.

Example:

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

Once linked, the CSS file can be used across multiple pages of a website.

Advantages:

  • Makes it easier to manage styles for large websites.

  • One file can control the design of the entire site.

Disadvantages:

  • Requires managing an additional file compared to Inline or Internal CSS.

📌 Quick Recap:

  • Inline CSS → For styling a single element only.

  • Internal CSS → For styling one HTML page.

  • External CSS → For styling an entire website (most recommended).

Comments

Post a Comment