Home

CSS Cheat Sheet

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It allows you to control the layout, colors, fonts, and other visual aspects of a web page.

Basic Syntax

CSS rules are defined with selectors followed by declaration blocks. A declaration block contains one or more declarations, separated by semicolons.

selector {
    property: value;
    property: value;
}
    

Selectors

Selectors are used to target HTML elements. Common selectors include:

• element: Selects all elements of a given type (e.g., p).
• .class: Selects elements with a specific class attribute (e.g., .container).
• #id: Selects a single element with a specific ID attribute (e.g., #header).

Common Properties

Some commonly used CSS properties include:

• color: Sets the text color.
• background-color: Sets the background color.
• font-size: Sets the size of the font.
• margin: Sets the outer spacing of an element.
• padding: Sets the inner spacing of an element.
• border: Sets the border of an element.

Box Model

The CSS box model defines how elements are spaced and sized. It includes:

• Content: The actual content of the element.
• Padding: The space between the content and the border.
• Border: The border surrounding the padding.
• Margin: The space outside the border.

Flexbox

Flexbox is a layout model that allows you to design flexible and responsive layouts. It includes properties like display: flex, justify-content, and align-items.

Grid

CSS Grid is a two-dimensional layout system that allows you to create complex layouts with rows and columns.