CSS: What It Is and How to Use It

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

What is CSS?

CSS is used by web developers to create visually engaging webpages, control the layout of multiple web pages all at once, and create site-wide style consistency. By separating the presentation style of documents from the content of documents, CSS simplifies web authoring and site maintenance.

How is CSS Used?

CSS can control the layout of multiple web pages by external style sheets. For example, you can define a style for each HTML element and apply it to as many Web pages as you want. Here are some of the ways CSS is used:

To set text properties like font, color, and spacing.
To adjust layout techniques, like flexbox and grid, which provide more dynamic and flexible layouts.
To create special effects like hover effects, transitions, and animations.
To adjust the display for different devices and screen sizes using media queries.

Basic CSS Syntax

selector {
    property: value;
}

This is the basic syntax for CSS. A 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 Usage

Here is a simple example of CSS that styles the <h1> element:

<style>
h1 {
    color: navy;
    margin-left: 20px;
}
</style>

This CSS will make all <h1> elements navy in color and shift them 20 pixels from the left margin.

Using CSS to Style a Web Page

CSS can be included in HTML documents in three ways:

Inline: by using the style attribute directly within HTML elements.
Internal: by using a <style> block in the <head> section.
External: by linking to an external CSS file.

Inline CSS Example

<p style="color: blue; font-size: 18px;">This is an example of inline CSS.</p>

Internal CSS Example

<style>
    body {
        background-color: lightblue;
    }
    p {
        color: red;
    }
</style>

External CSS Example

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

This HTML tag links an external CSS file called "styles.css" to your HTML document, which would contain styles such as:

/* styles.css */
body {
    background-color: #fff;
}
h1 {
    color: green;
}

Conclusion

CSS is a powerful tool for web developers, allowing for the separation of content from design. This separation increases web accessibility and allows for more flexibility and control in the presentation of web pages. Learning CSS is essential for anyone interested in web development or web design.