CSS - Introduction

Ethan D. -

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, such as HTML or XML. CSS allows you to style and layout web pages by specifying how elements should be rendered on the screen, paper, or in other media.

CSS works with HTML. While HTML is responsible for the structure and content of a web page, CSS focuses on the visual presentation and layout. It allows you to control various aspects of the web page's appearance, such as colors, fonts, spacing, and positioning.

With CSS, you can apply styles to specific HTML elements or groups of elements.

Example: CSS Styles for HTML Elements

h1 {
    font-family: Arial;
    font-size: 24px;
    color: blue;
}

div {
    background-color: lightgray;
    padding: 10px;
}

By using CSS:

  • You can separate the presentation logic from the structural content of your web pages.
  • This separation improves maintainability and reusability.
  • You can define styles in an external CSS file and link it to multiple HTML pages.

Example: Linking an External CSS File

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

CSS also enables you to create responsive designs that adapt to different screen sizes and devices.

Example: CSS Media Queries

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Overall, CSS is an important tool for web developers and designers. It gives you control over how your web pages look across different devices and screens.

Why Use CSS?

CSS is a tool for web development. There are several reasons why you should use CSS in your web projects:

CSS separates the presentation of a web page from its structure and content. This means that you can define the visual styles of your web page separately from the HTML markup. By keeping the presentation logic in a separate CSS file, your HTML code becomes cleaner and more focused on the structure and content of the page. This separation makes your code easier to update in the future.

Using CSS allows you to have more control over how your web pages look. With CSS, you can specify various visual properties for HTML elements, such as colors, fonts, spacing, borders, and backgrounds. You can apply different styles to specific elements or groups of elements, giving you fine-grained control over how your web page looks.

CSS reduces complexity and repetition in your web pages' structural content. Without CSS, you would need to apply the same styles to each HTML element separately, which can lead to a lot of repetition and bloated code. With CSS, you can define styles once and apply them to multiple elements using selectors. This reduces code duplication and makes your HTML more concise.

One powerful feature of CSS is sharing formatting across multiple web pages. By defining styles in an external CSS file, you can link that file to multiple HTML pages. This means that you can make global changes by modifying a single CSS file instead of updating each individual page's styles.

How Does CSS Work?

CSS works by applying styles to HTML elements on a web page. The styles are defined using CSS rules, which consist of selectors and declaration blocks.

CSS rules can be defined in a separate file with a .css extension, or they can be embedded within the HTML document using the <style> tag. When using an external CSS file, you need to link it to your HTML document using the <link> tag in the <head> section.

Linking an External CSS File

Example: Linking an External CSS File

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

Each CSS rule consists of a selector and a declaration block. The selector points to the HTML element or elements you want to style. It can be an element selector (e.g., p for paragraphs), a class selector (e.g., .highlight for elements with the class "highlight"), or an ID selector (e.g., #header for the element with the ID "header").

CSS Rule Syntax

Example: CSS Rule Syntax

selector {
    property1: value1;
    property2: value2;
}

The declaration block is enclosed in curly braces {} and contains one or more declarations. Each declaration specifies a CSS property and its corresponding value, separated by a colon :. Multiple declarations within a block are separated by semicolons ;.

CSS Declaration Block

Example: CSS Declaration Block

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

When a web browser loads a web page, it reads both HTML and CSS files. The browser then applies these rules to corresponding HTML elements according to declared properties and values. This process is called rendering.

CSS also allows for cascading and inheritance. If multiple rules apply to one element, the rule with higher specificity takes precedence. Some properties are inherited by child elements from their parent elements.

Overall, CSS defines rules that target HTML elements and specify their visual properties so you can control how your web pages look.