Cascading Style Sheets

Introduction

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in HTML or XML. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

History

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN. Among the many style sheet languages in the market, CSS was endorsed by the World Wide Web Consortium (W3C) and thus, became the first W3C-recommended style sheet language in 1996.

Syntax

A CSS rule-set consists of a selector and a declaration block. 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.

Selectors

CSS selectors are used to select the HTML elements you want to style. There are several types of selectors in CSS, including: element selector, id selector, class selector, universal selector, group selector.

Properties

CSS properties are the building blocks of CSS. They allow you to change the look and feel of your content. Properties are used to specify the styling of an element. There are hundreds of CSS properties available, from controlling the background color and image of an element, to controlling the text alignment and style, to setting the margin and padding around elements.

Values

CSS values are assigned to CSS properties to define their behavior. Values can be keywords, numbers, lengths, percentages, colors, or URLs. The value assigned to a CSS property determines how that property will behave.

Specificity

In CSS, specificity is the set of rules applied to CSS selectors in order to determine which style is applied to an element. It is a process of conflict resolution between conflicting CSS rules that apply to the same element.

Inheritance

Inheritance is a key feature in CSS; it is the mechanism by which properties are applied not only to a specified element, but also to its descendants. Inheritance simplifies the defining of consistent styles for different parts of an HTML document.

The Box Model

The CSS box model is a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. Understanding the box model is crucial when designing layouts in CSS.

CSS Layouts

CSS layouts are a fundamental part of web design. They allow you to control the position of elements on a web page. There are several methods for creating layouts in CSS, including: normal flow, display, position, float, flexbox, and grid.

CSS Animations

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

CSS Frameworks

CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. Some popular CSS frameworks are: Bootstrap, Foundation, Bulma, Semantic UI, and Tailwind CSS.