Introduction to CSS

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML. CSS defines how elements should be displayed on screen, paper, or in other media.

Why Use CSS?

CSS is essential because it allows you to separate the content of a webpage from its design. This separation makes it easier to maintain and update your site. Here are some reasons to use CSS:

  • Improved control over the layout of your website
  • Enhanced website performance by reducing file sizes
  • Better accessibility for different devices and screen sizes
  • Cleaner HTML code by removing inline styles

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

selector {
  property: value;
}

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Example of CSS

Here's an example of how you can use CSS to change the color and font size of a paragraph:

p {
  color: blue;
  font-size: 20px;
}

Three Ways to Apply CSS

CSS can be applied to HTML documents in three different ways:

  1. Inline CSS: Using the style attribute in HTML elements.
  2. Internal CSS: Using a <style> element in the <head> section.
  3. External CSS: Linking to an external CSS file using the <link> element.

Linking an External CSS File

To link an external CSS file, you use the <link> tag in the <head> section of your HTML document. Here's an example:

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

Conclusion

CSS is a powerful tool that allows you to create visually appealing websites. By mastering CSS, you can greatly enhance the user experience on your site. In the upcoming sections, we'll dive deeper into CSS properties, layouts, and advanced techniques.