CSS is the language we use to style a Web page.

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

HTML was created to describe the content of a web page, like:

When styling is defined on every page of a site, it is a nightmare for web developers. CSS removed the style formatting from the HTML page!

A CSS rule 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.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

The position property specifies the type of positioning method used for an element.

There are five different position values:

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;

HTML elements are positioned static by default.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.

position: relative;

An element with position: relative; is positioned relative to its normal position.

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

position: sticky;

HTML elements are positioned static by default.

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

To start using the Flexbox model, you need to first define a flex container.

The flex container becomes flexible by setting the display property to flex:

The flex container properties are:

flex-direction

The flex-direction property defines in which direction the container wants to stack the flex items.

• column stacks the flex items vertically,from top to bottom
• column-reverse stacks the flex items vertically, but from bottom to top
• row stacks the flex items horizontally, from left to right
• row-reverse stacks the flex items horizontally, but from right to left

flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not.

• wrap specifies that the flex items will wrap if necessary
• nowrap specifies that the flex items will not wrap (this is default)
• wrap-reverse specifies that the flexible items will wrap if necessary, in reverse order

flex-flow

The flex-wrap property is a shorthand property for setting both the flex-direction and flex-wrap properties.

justify-content

The justify-content property is used to align the flex items horizontally.

• center aligns the flex items at the center of the container
• flex-start aligns the flex items at the beginning of the container (this is default)
• flex-end aligns the flex items at the end of the container
• space-around displays the flex items with space before, between, and after the lines
• space-between displays the flex items with space between the lines

align-items

The align-items property is used to align the flex items vertically.

• center aligns the flex items at the middle of the container
• flex-start aligns the flex items at the top of the container
• flex-end aligns the flex items at the bottom of the container
• stretch stretches the flex items to fill the container (this is default)
• baseline aligns the flex items such as their baselines align

align-content

The align-content property is used to align the flex lines.

• space-between displays the flex lines with equal space between them
• space-around displays the flex lines with space before, between, and after them
• stretch stretches the flex lines to take up the remaining space (this is default)
• center displays the flex lines in the middle of the container
• flex-start displays the flex lines at the start of the container
• flex-end displays the flex lines at the end of the container

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

Grid containers consist of grid items, placed inside columns and rows.

grid-template-columns

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.

The value is a space-separated-list, where each value defines the width of the respective column. If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.

grid-template-rows

The grid-template-columns property defines the defines the height of each row.

The value is a space-separated-list, where each value defines the height of the respective row.

justify-content

The justify-content property is used to align the whole grid inside the container.

align-content

The align-content property is used to vertically align the whole grid inside the container.

Child Elements (Items)

A grid container contains grid items.

By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

grid-column

The grid-column property defines on which column(s) to place an item.

You define where the item will start, and where the item will end.

Note: The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.

Make "item1" start on column 1 and end before column 5:

Make "item1" start on column 1 and span 3 columns:

grid-row

The grid-row property defines on which row to place an item.

You define where the item will start, and where the item will end.

Note: The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.

Make "item1" start on row-line 1 and end on row-line 4:

Make "item1" start on row 1 and span 2 rows:

grid-area

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Make "item8" start on row-line 1 and column-line 2, and end on row-line 5 and column line 6:

Make "item8" start on row-line 2 and column-line 1, and span 2 rows and 3 columns:

Grid Properties