100 CSS Properties every developer should know

Photo by Jon Tyson on Unsplash

I love creating and styling webapplications and CSS is my favourite thing to think and talk about.

In 4 years of experience I’ve learnt a lot, and in this article I want to share that knowledge with you.

So today I’m going to go all out to give the ultimate CSS cheat sheet for everyone out there — from the absolute beginner to the ultimate pro.

In the end I will show you some of the best CSS one-liners that unfortunately nobody knows, but that will save you a lot of work.

Sit back, enjoy and save for later!

Beginner Level

Selector: `element`
Sets all elements of a specified type.

Selector: `#id`
Selects an element with a specified id.

Selector: `.class`
Selects all elements with a specified class.

Property: color
Sets the color of text.
Example:

p {
color: blue;
}

Property: font-size
Sets the size of the font.
Example:

h1 {
font-size: 24px;
}

Property: background-color
Sets the background color.
Example:

body {
background-color: #f0f0f0;
}

Property: margin
Sets the margin properties.
Example:

.container {
margin: 10px;
}

Property: padding

Sets the padding properties.
Example:

.box {
padding: 20px;
}

Property: display
Sets how an element is displayed.
Example:

.block {
display: block;
}

Property: position
Sets the positioning method.
Example:

.absolute {
position: absolute;
top: 0;
left: 0;
}

Property: width
Sets the width of an element.
Example:

img {
width: 100px;
}

Property: height
Sets the height of an element.
Example:

.header {
height: 80px;
}

Intermediate Level

Property: font-family
Sets the font family.
Example:

body {
font-family: Arial, sans-serif;
}

Property: font-weight
Sets the boldness of the font.
Example:

.bold-text {
font-weight: bold;
}

Property: text-transform
Controls the capitalization of text.
Example:

.uppercase {
text-transform: uppercase;
}

Property: box-shadow
Adds shadow effects around an element’s frame.
Example:

.box {
box-shadow: 5px 5px 5px #888888;
}

Property: cursor
Specifies the type of cursor to be displayed.
Example:

button {
cursor: pointer;
}

Property: background-image
Sets one or more background images on an element.
Example:

.hero-section {
background-image: url(‘hero.jpg’);
}

Property: background-position
Sets the starting position of a background image.
Example:

.header {
background-position: center;
}

Property: background-repeat
Sets how a background image will be repeated.
Example:

.pattern {
background-repeat: repeat-x;
}

Property: background-size
Sets the size of the background image.
Example:

.cover-image {
background-size: cover;
}

Property: opacity
Sets the opacity level.
Example:

.overlay {
opacity: 0.5;
}

Advanced Level

Property: flex
Sets the flexible length on flexible items.
Example:

.container {
display: flex;
}

Property: flex-direction
Specifies the direction of the flex container’s main axis.
Example:

.container {
flex-direction: row;
}

Property: flex-wrap
Specifies whether flex items should wrap or not.
Example:

.container {
flex-wrap: wrap;
}

Property: flex-grow
Specifies how flex items grow relative to each other.
Example:

.item {
flex-grow: 1;
}

Property: flex-shrink
Specifies how flex items shrink relative to each other.
Example:

.item {
flex-shrink: 0;
}

Property: flex-basis
Specifies the initial length of a flex item.
Example:

.item {
flex-basis: 100px;
}

Property: align-items
Aligns flex items along the cross axis of the flex container.
Example:

.container {
align-items: center;
}

Property: align-self
Allows the default alignment to be overridden for individual flex items.
Example:

.item {
align-self: flex-end;
}

Property: justify-content
Aligns flex items along the main axis of the flex container.
Example:

.container {
justify-content: space-between;
}

Property: grid-template-columns
Specifies the size of the columns in a grid layout.
Example:

.container {
display: grid;
grid-template-columns: 1fr 2fr;
}

Property: grid-template-rows
Specifies the size of the rows in a grid layout.
Example:

.container {
display: grid;
grid-template-rows: 100px auto;
}

Property: grid-gap
Sets the gap between columns and rows in a grid layout.
Example:

.container {
display: grid;
grid-gap: 10px;
}

Property: grid-auto-columns
Specifies the size of the implicit grid columns.
Example:

.container {
display: grid;
grid-auto-columns: 100px;
}

Property: grid-auto-rows
Specifies the size of the implicit grid rows.
Example:

.container {
display: grid;
grid-auto-rows: 100px;
}

Property: grid-auto-flow
Specifies how the auto-placement algorithm works in the grid layout.
Example:

.container {
display: grid;
grid-auto-flow: dense;
}

Property: grid-column
Specifies a grid item’s size and location within the grid columns.
Example:

.item {
grid-column: 2 / span 2;
}

Property: grid-row
Specifies a grid item’s size and location within the grid rows.
Example:

.item {
grid-row: 1 / span 2;
}

Property: grid-area
Sets the size of an element and its placement in a grid layout.
Example:

.item {
grid-area: 1 / 1 / span 2 / span 2;
}

This detailed CSS cheat sheet covers a wide range of properties and selectors, from beginner to advanced levels, along with code examples to illustrate their usage. If you have any questions about specific properties or need further clarification, feel free to ask in the comments!

I hope this article was helpful and solved some of your problems! (And didn’t create new ones ;-))

Happy coding!

My ULTIMATE CSS Cheat Sheet from Beginner to Pro was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.