Basics

CSS Introduction

Introduction to CSS Styling

CSS is a styling language for web pages, defining layout and appearance.

What is CSS?

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It allows web developers to separate content from design, providing flexibility and control over the look and feel of web pages.

Benefits of Using CSS

  • Separation of content and design: CSS enables you to separate your website's content (HTML) from its design (CSS).
  • Consistency: CSS allows for consistent styling across multiple pages of a website.
  • Efficiency: You can control the layout of multiple web pages all at once by editing a single CSS file.
  • Improved Load Times: CSS reduces the amount of code in your HTML files and improves load times.
  • Device Adaptability: CSS enables responsive design to ensure your website looks good on all devices.

Basic Syntax of CSS

CSS rules are composed of selectors and declarations. A declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

How to Apply CSS to HTML

There are three main ways to apply CSS to HTML documents:

  • Inline CSS: Using the style attribute directly within HTML elements.
  • Internal CSS: Using a <style> block within the <head> section of the HTML document.
  • External CSS: Linking to an external CSS file using the <link> element.

Example of Inline CSS

Example of Internal CSS

Example of External CSS