CSS Introduction

CSS (Cascading Style Sheets) is a language used to style web pages. It separates the presentation of a webpage from its content (HTML). This separation makes it easier to maintain and update the design of a website without affecting its structure.

Basic Structure of CSS

A CSS rule-set consists of two main parts:

Selector: Specifies the HTML element you want to style.
Declaration: Contains one or more properties and their values, separated by colons.

selector {
  property1: value1;
  property2: value2;
}

Examples

1. Changing the color of a heading:

<h1>This is a heading</h1>
h1 {
  color: blue;
}

2. Applying background color to a paragraph:

<p>This is a paragraph.</p>

p {
  background-color: lightgray;
}

3. Setting font size and style:

<p>This is a paragraph with styled text.</p>
p {
  font-size: 24px;
  font-style: italic;
}

Ways to Use CSS

There are three primary ways to include CSS in your HTML document:

  • Inline styles: Directly applied to an HTML element using the style attribute.
<h1 style="color: red;">This is an inline style</h1>
  • Internal styles: Placed within the <head> section of an HTML document using the <style> tag.
<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>
  • External stylesheet: Linked to the HTML document using the <link> tag.
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Note: The external stylesheet method is generally preferred for larger projects as it improves organization and maintainability.

By understanding these basic concepts, you can start styling your web pages effectively. CSS offers a wide range of properties and selectors to create visually appealing and responsive designs.

Share this Tutorials

CSS Introduction

Or copy link

CONTENTS
Scroll to Top