CSS (Cascading Style Sheets) is a styling language used to define the visual appearance of documents written in HTML or XML (including variations like SVG, MathML, or XHTML). It controls how elements are displayed across different media, such as screens, print, or even speech.

CSS is one of the fundamental languages of the open web and is standardized across all major web browsers based on W3C guidelines. In the past, different parts of the CSS specification were developed together, which made it possible to label them as versions—like CSS1, CSS2.1, or CSS3. However, there won’t be a CSS4. Today, everything is simply referred to as "CSS," with individual modules updated and versioned separately.

A CSS selector is the starting part of a CSS rule. It defines a pattern that tells the browser which HTML elements to target so the styles specified in the rule can be applied to them.

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

.elementID {
  color: black;
} 
          

Selector Types

A type selector targets all elements with a specific tag name.

• For example, div selects every element, while input targets all input elements.
• The universal selector, written as an asterisk (*), is a special type of selector that matches all elements.
• The class selector targets elements with a specific class attribute, using a period (.) before the class name—for example, .index will select any element with class="index".
• The ID selector targets elements by their id attribute, using a hash symbol (#) before the ID—like #toc, which selects the element with id="toc".

While class and id are both global attributes, only one element in a document should have a specific ID. However, if multiple elements share the same ID, the ID selector will still match all of them.

When creating compound selectors, the type or universal selector should come before the class or ID selector. For instance, div.index targets elements with the class index.

* {
  font-style: italic;
}

p {
  color: black;
}

.class {
  text-decoration: none;
}

#id {
  font-family: helvetica;
}

In CSS, every element is surrounded by a box, and understanding how these boxes work is essential for building more complex layouts or aligning elements effectively.

The CSS box model, which primarily applies to block-level elements, defines how the content, padding, border, and margin combine to form the visible box on a webpage. Inline elements follow only parts of this model. To make things a bit more intricate, CSS also offers two different box models: the standard model and an alternate one.

Box composition

These components make up a box:

• Content box: This is where your actual content appears. You control its size using properties like width and height.
• Padding box: The padding sits around the content as white space; size it using padding and related properties.
• Border box: The border box wraps the content and any padding; size it using border and related properties.
• Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.

Below is an illustration of the layers forming a box:

CSS layout techniques give us the ability to position elements on a web page based on several factors: their default placement in the normal document flow, their relationship to surrounding elements, their parent container, and the overall browser window or viewport.

The three types of layouts in CSS are:

• Flow - Flow layout or normal flow
• Flex - Flexible box layout or flexbox
• Grid - Grid layout

CSS Flow Layout

Normal Flow or Flow Layout, is the way that block and inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.

Inline elements will display themselves in the inline direction. This means, in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. To put it in more simpler terms, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.

.inline-element {
  display: inline;
}

.block-element {
  display: block;
}

Once an element is displayed on a page inside the normal flow, it can be further adjusted with the position property. The position property allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example, fixing them to the top of the browser viewport using position: fixed.

The possible values for the position property include:

.element {
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

Another CSS property that allows us to further position an element in the normal flow is the float property. Before CSS Flexbox and Grid, the float property was used to allow block elements to be positioned next to each other on the same line. Now, Flexbox and Grid are used for this and the use cases for the float property are now more limited.

CSS Flexbox Layout

The CSS flexible box layout allows us to specify an element as a container element. This container element is known as a flex container. When a flex container is created, the direct children of the container are then represented using boxes that have flexible sizes. By saying flexible sizes, we mean that the boxes can either grow or shrink in size to fit inside their parent element, the flex container.

To configure a flexbox layout, we apply CSS flex and alignment properties to the container and the direct children of the container.

An example of some CSS Flexbox properties:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

CSS Grid Layout

CSS grid layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. A grid is a set of intersecting horizontal and vertical lines defining rows and columns. Elements can be placed onto the grid within these column and row lines.

These are the general steps taken to define a grid layout:

1. Define a container element.
2. Apply display: grid to the container.
3. Define grid columns and rows.
4. Place grid items.
5. Customize grid items (optional).
6. Add gaps between grid items (optional).