CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in HTML. It is a powerful tool that allows developers to control the appearance of their websites and applications, from layout and typography to color and spacing.

There are several essential CSS concepts that every designer should be familiar with:

‍

‍

‍

‍

Parent & Children

In CSS, the parent-child relationship refers to the hierarchy of elements on a webpage. An element is considered the parent of another element if it contains that element within its own structure. For example, a div element might be the parent of several paragraph elements.

‍

The parent element has control over the styling of its child elements. For example, if you set the font size of the parent element, all of its child elements will also have that font size unless you specify otherwise. This is because the child elements inherit the styling of their parent element by default.

‍

‍

‍

‍

‍

Margins

The margin is the space outside of an element. It is one of the properties of the box model, along with the content, padding, and border. The margin is used to create space around an element, separating it from other elements on the page. It is transparent, meaning that it does not have a background color or any other visual properties.

‍

You can set the margin of an element using the margin property, or individual margin properties for each side (margin-top, margin-right, margin-bottom, margin-left).

‍

‍

‍

‍

Padding

The padding is the space within an element, between the content and the border. It is one of the properties of the box model, along with the content, margin, and border. The padding is used to create space within an element, around the content. It is visible and has the same background color as the element.

‍

You can set the padding of an element using the padding property, or individual padding properties for each side (padding-top, padding-right, padding-bottom, padding-left).

‍

‍

‍

Flexbox

Flexbox is a layout system in CSS that allows you to align and distribute space among elements within a container. It is a powerful tool for creating flexible and responsive layouts that adapt to different screen sizes and resolutions. One of the key features of Flexbox is distribution, which refers to how space is distributed among the elements within a container.

‍

‍

‍

Align: Direction (stack)

In CSS, you can use the align-items and align-self properties to align elements within a container. These properties allow you to align elements along the cross axis (vertically for row layouts, horizontally for column layouts).

‍

The align-items property aligns all of the elements within a container, while the align-self property allows you to align a specific element within a container.

You can use the following values to control the alignment:

1. flex-start: Aligns the elements to the start of the cross axis.
2. flex-end: Aligns the elements to the end of the cross axis.
3. center: Aligns the elements to the center of the cross axis.
4. baseline: Aligns the elements along their baselines.
5. stretch: Stretches the elements to fill the entire cross axis.

‍

‍

‍

‍

‍

Align: Start, Center, End

In CSS, you can use the align-items and align-self properties to align elements within a container. These properties allow you to align elements along the cross axis (vertically for row layouts, horizontally for column layouts).

You can use the following values to control the alignment:

1. flex-start: Aligns the elements to the start of the cross axis.
2. center: Aligns the elements to the center of the cross axis.
3. flex-end: Aligns the elements to the end of the cross axis.

‍

‍

‍

‍

‍

Justify: Start, Center, End

You can use the justify-content property to align elements within a container along the main axis (horizontally for row layouts, vertically for column layouts).

You can use the following values to control the alignment:

1. flex-start: Aligns the elements to the start of the main axis.
2. center: Aligns the elements to the center of the main axis.
3. flex-end: Aligns the elements to the end of the main axis.

‍

‍

‍

‍

‍

Justify on steroids

In CSS, you can use the justify-content property to align elements within a container along the main axis (horizontally for row layouts, vertically for column layouts).

In addition to the basic alignments of flex-start, center, and flex-end, you can also use the following values to control the alignment:

1. space-between: Distributes the space evenly between the elements, with the first element at the start of the main axis and the last element at the end.
2. space-around: Distributes the space evenly around the elements, with equal space on both sides of each element.

‍

‍

‍

‍

‍

Relative vs. Absolute

There are two types of positioning: relative and absolute. Relative positioning is the default positioning for elements. It positions an element based on its normal position in the flow of the document. You can use the "top", "right", "bottom", and "left" properties to adjust the element's position relative to its normal position.

‍

Absolute positioning removes an element from the normal flow of the document and positions it based on its nearest positioned ancestor, if one exists. If there is no positioned ancestor, it is positioned based on the initial containing block. You can use the "top", "right", "bottom", and "left" properties to specify the exact position of the element. Understanding the difference between relative and absolute positioning can help you create more flexible and visually appealing layouts.

‍

‍