CSS Introduction

CSS allows you to control the style and layout of your web pages. It enables you to separate the content of your HTML from its design, making it easier to maintain and update your website.

How CSS Works

CSS works by applying styles to HTML elements. These styles are defined in CSS rules, which are made up of selectors and declarations.

Types of CSS

  1. Inline CSS: Applied directly to the HTML element using the style attribute.
  2. Internal CSS: Defined within a <style> element in the <head> section of the HTML document.
  3. External CSS: Defined in an external file and linked to the HTML document using the <link> element.

Example of Inline CSS

<p style="color: red;">This is a red paragraph.</p>

Try It Now

Result:

This is a red paragraph.

Example of Internal CSS

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

Try It Now

Example of External CSS

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

Try It Now

Advantages of Using CSS

  • Flexibility: CSS provides a range of options for styling, from simple text formatting to complex layouts.
  • Reusability: CSS styles can be reused across multiple pages, reducing redundancy and improving maintainability.
  • Better Performance: By using external stylesheets, you can reduce the size of your HTML files and improve page load times.