Introduction to CSS

Table of Contents

Introduction

CSS stands for Cascading Style Sheets, is a style sheet language responsible for styling the visual presentation of web pages, allowing web developers to control the layout, colors, fonts, and other aspects of the user interface.

Key aspects of CSS

1. Purpose of CSS

CSS serves the purpose of separating the structure and content of a web page from its presentation. It allows developers to define styles and layout rules that can be applied consistently across multiple pages, making it easier to manage the look and feel of a website.

2. How CSS Works

CSS works by associating styles with HTML elements through selectors. A CSS rule consists of a selector and a declaration block. The selector targets the HTML element(s), and the declaration block contains property-value pairs that define the styling.

Example

/* Selector: Targets all <p> elements */
p {
  /* Declaration Block: Defines styles */
  color: blue;
  font-size: 16px;
}

3. Types of CSS

Inline CSS: Styles applied directly within HTML elements using the style attribute.

<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

Internal CSS: Styles defined within the HTML document using the <style> tag in the <head> section.

<head>
  <style>
    p {
      color: green;
      font-size: 20px;
    }
  </style>
</head>

External CSS: Styles stored in a separate external CSS file and linked to the HTML document using the <link> tag.

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

4. Cascading Order

CSS follows a cascading order of styles, where styles can be inherited, overridden, or combined based on specificity and importance. This ensures a systematic application of styles across the document.

5. Importance of CSS

Enhanced Styling: CSS provides a wide range of styling options, enabling developers to create visually appealing and user-friendly interfaces.
Responsive Design: CSS allows for the creation of responsive layouts that adapt to different screen sizes and devices.
Consistency: By separating style from content, CSS promotes consistency in design across a website.
Maintainability: Centralized styling in CSS files makes it easier to update and maintain the design of a website.

Download as PDF