DEV Community

Cover image for CSS Cheat Sheet 2023
Manohar Anand
Manohar Anand

Posted on

CSS Cheat Sheet 2023

Here is a basic CSS cheat sheet that you can use as a reference:

1. CSS stands for Cascading Style Sheets

2. CSS is used to style and layout web pages

3. CSS styles are applied to HTML elements

4. CSS styles are specified in rules, which consist of a selector and a declaration block

Read More

Selectors

Selectors are used to specify which elements a set of styles should be applied to.

There are several different types of selectors:

Type selectors: Select elements based on the element type (e.g., p for paragraphs)

Class selectors: Select elements with a specific class attribute (e.g., .my-class)

ID selectors: Select elements with a specific ID attribute (e.g., #my-id)

Attribute selectors: Select elements with a specific attribute or attribute value (e.g., [href] or [type="button"])

Declaration block

A declaration block consists of a set of declarations, each of which has a property and a value. The property is the styling attribute that you want to set (e.g., color, font-size), and the value is the style that you want to apply (e.g., red, 16px).

Declarations are separated by semicolons and written inside curly braces:


                        selector {
                            property: value;
                            property: value;
                          }


Enter fullscreen mode Exit fullscreen mode

Comments

You can add comments to your CSS code to explain what the code does or to make it easier to read. Comments are ignored by the browser and start with /* and end with */.


                        /* This is a comment */


Enter fullscreen mode Exit fullscreen mode

Inheritance

In CSS, inheritance refers to the way in which styles are passed from parent elements to child elements. If a parent element has a certain style applied to it, that style will be inherited by its child elements unless it is overridden by a more specific rule.

Specificity

Specificity refers to the weight of a CSS rule. If multiple rules could apply to an element, the browser will use the one with the highest specificity. Specificity is calculated based on the number of each type of selector in the rule.

Box model

In CSS, every element is considered a box, and the box model is used to specify the layout and size of these boxes. The box model consists of the following elements:

Margin: The space outside of the border

Border: The line around the edge of the element

Padding: The space inside the border

Content: The actual content of the element

The width and height of an element can be set using the width and height properties. By default, the width and height of an element are determined by the content inside it.

Units of measurement

CSS supports several different units of measurement, including: px: Pixels (fixed-size units)

em: Ems (relative to the font-size of the element)

%: Percent (relative to the size of the parent element)

rem: Root ems (relative to the font-size of the root element)

Some Commonly used CSS properties

font-size: Sets the size of the font.

font-family: Sets the font family.

color: Sets the color of the text.

background-color: Sets the background color of an element.

text-align: Aligns the text within an element.

line-height: Sets the space between lines of text.

margin: Sets the space around an element.

padding: Sets the space within an element.

width: Sets the width of an element.

height: Sets the height of an element.

border: Sets the border around an element.

border-radius: Rounds the corners of the border around an element.

box-shadow: Adds a shadow effect to an element.

opacity: Sets the transparency of an element.

overflow: Controls how overflow is handled when the content of an element is too large to fit within its boundaries.

position: Controls the position of an element relative to its parent element or the viewport.

float: Floats an element to the left or right of its parent element, allowing other elements to wrap around it.

clear: Clears floated elements, forcing an element to start below any floated elements that precede it.

Here are some sources you can use to learn CSS:

W3Schools: A popular online tutorial and reference site that provides a wide range of CSS tutorials and examples.

MDN Web Docs: The official documentation for web technologies, including CSS. This is a comprehensive resource that covers all aspects of CSS in detail.

CSS Tricks: A blog and reference site that provides tips, tricks, and tutorials on all aspects of CSS.

Codecademy: An online platform that offers interactive courses on a variety of topics, including CSS.

Udemy: An online platform that offers a wide range of paid and free courses on a variety of topics, including CSS.

FreeCodeCamp: A non-profit organization that provides a comprehensive curriculum of interactive coding challenges and projects, including lessons on CSS.

Top comments (0)