Stack Diary / Reference

CSS

CSS stands for Cascading Style Sheets. It is a language used for describing the look and formatting of a document written in HTML (Hyper Text Markup Language) or XML (eXtensible Markup Language). CSS was first proposed by Håkon Wium Lie on October 10, 1994.

The term cascading in CSS refers to the priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading mechanism is a fundamental aspect of CSS and shows its declarative, pattern-based nature.

Main Features

  1. Separation of Content from Presentation: CSS allows the separation of the document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.
  2. Style Inheritance: Styles defined at a top level of a document can be inherited by child elements, which allows for simpler style definitions.
  3. Cascading: When multiple conflicting style rules are applied to an element, the browser applies a set of rules to determine which rule will be dominant.
  4. Selectors: CSS uses selectors to bind style properties to elements in the document. Selectors can range from simple element names to more complex expressions.
  5. Media Queries: CSS allows you to specify different styles for different media types (like screen and print) or devices. Media queries allow for responsive design, where styles are applied based on device characteristics like viewport width.

CSS Syntax

The syntax of CSS is comprised of rulesets. A ruleset consists of a selector and a declaration block. Here’s a simple example:

selector {
    property: value;
}
  • Selector: The selector points to the HTML element you want to style.
  • Property: The property is the attribute that you want to change. For instance, color, font-size, width, background-color etc.
  • Value: Each property has a value, which defines the specifics of the change you want to make.

Here’s an example of a CSS ruleset:

body {
    background-color: lightblue;
}

In this case, body is the selector, background-color is the property you want to change, and lightblue is the value you’re changing the property to.

Including CSS in HTML

CSS can be included in HTML in three ways:

  • Inline styles: CSS rules are applied directly within the HTML tags using the style attribute.
<p style="color: blue;">This is a paragraph.</p>
  • Internal (Embedded) CSS: CSS rules are included within the <style> element inside the <head> element of the HTML document.
<head>
  <style>
    p {
      color: blue;
    }
  }
  </style>
</head>
  • External CSS: CSS rules are written in a separate file with a .css extension. This file is linked to the HTML document using the <link> element.
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS Versions

There are currently three versions of CSS:

  1. CSS 1: The first version of CSS that was introduced in 1996.
  2. CSS 2: This version was a revision of CSS 1 and was published as a recommendation in 1998.
  3. CSS 3: This is the latest version of CSS, split into several separate modules. Each module adds some functionality and is in various states of completion and review.