Introduction
Welcome to the world of Cascading Style Sheets (CSS)! CSS is the language we use to style an HTML document. Without CSS, web pages would be plain text documents – functional, but visually unappealing. CSS allows you to control the color, font, size, spacing, layout, and much more of your web content, transforming raw HTML into beautiful and engaging user interfaces.
Key Concepts
What is CSS?
-
CSS stands for Cascading Style Sheets.
-
It is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
-
It's primarily used to separate the content (HTML) from its visual presentation (CSS), promoting better organization and maintainability of web projects.
How to Include CSS
There are three main ways to include CSS in your HTML document:
-
External Stylesheets: The most common and recommended method. CSS is written in a separate
.cssfile and linked to the HTML using the<link>tag in the<head>section. -
Internal Stylesheets: CSS is written directly within the HTML document using a
<style>tag, also placed in the<head>section. -
Inline Styles: CSS is applied directly to an HTML element using the
styleattribute. This method is generally discouraged for larger projects due to poor maintainability.
Quick Example
Here's how to link an external stylesheet, the preferred method:
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Styled Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello CSS!</h1> </body> </html> And in `styles.css`: ```css h1 { color: blue; font-family: Arial, sans-serif; } ## Summary In this lesson, you learned that CSS is essential for styling web pages, allowing you to control their visual appearance. We explored the three main ways to incorporate CSS into an HTML document, with external stylesheets being the best practice for maintainability and separation of concerns.