CSS (Cascading Style Sheets)
Introduction
CSS is a stylesheet language used for describing the look and formatting of a document written in HTML or XML. It is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including 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 mid-1990s, CSS was designed to be a simple, lightweight, and easy-to-use language that could be used to style HTML documents.
Syntax
CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.
Selectors
Selectors are the part of CSS rule set. CSS selectors select the HTML elements upon which styles are to be applied. While some selectors are simple to understand, others require a more detailed approach.
Properties
Properties are what give the HTML elements in your document their look. They control things like colors, fonts, positioning, spacing, and even complex things like transitions or animations.
Values
Values are assigned to properties to define their behavior, such as color, font, or size. The value can be a keyword, a number, a length, or a percentage.
CSS 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. The box model allows us to add a border around elements, and to define space between elements.
CSS Layouts
CSS layouts help to arrange elements on the screen and to create a structure for the web page. They include grid, flexbox, and positioning.
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 Preprocessors
CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. Some of the most popular CSS preprocessors are Sass, LESS, and Stylus.
CSS Frameworks
CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the CSS language. Some of the most popular CSS frameworks are Bootstrap, Foundation, and Bulma.