CSS Cheatsheet - Complete CSS Reference

CSS Syntax

CSS syntax is used to style HTML elements with selectors and property-value pairs.

selector {property: value;}

CSS Selectors

1. Element Selector

You can select all elements in the webpage of a specific type. Replace p element with any other element that you want to style.

p {color: green;}

2. ID Selector

You can select and style an HTML element associated with an unqieu ID. Use the following syntax to select an element by its unique ID:

#unique-element {font-size: 20px;}

3. Class Selector

You can select all HTML elements with a specific class to apply the CSS in this way:

.example-class {background-color: yellow;}

4. Universal Selector

You can use the following snippet to select all HTML elements on the webpage.

* {margin: 0;padding: 0;}

5. Grouping Selector

You can group multiple selectors to apply the same styles by separating them with commas. Following this pattern:

h1, h2, h3 {color: purple;}

CSS Comments

Write anything between <!-- and --> to make them comments, which are added to explain code and are ignored by the browser.

/* This is a comment */
.example {
  color: red;
}

CSS Colors

1. Color Names

You can use the predefined color names directly for styling elements.

.color-name {color: blue;}

2. Background Color

Sets the background color of an element.

.bg-color {background-color: lightgreen;}

3. Text Color

Sets the color of text inside an element.

.text-color {color: darkred;}

4. Border Color

Sets the color of an element's border.

.border-color {border: 2px solid orange;}

5. Color Values

Defines colors with hex, rgb, or rgba values.

.color-hex {color: #008080;}

CSS Borders

Adds borders around elements with color, width, and style.

.border-example {
  border: 1px solid black;
}

CSS Margins

1. Individual Sides

Sets the margin on each side of an element.

.margin-sides {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

2. Shorthand Property

Uses a single property to define all sides' margin.

.margin-shorthand {
  margin: 10px 20px;
}

3. Auto Value

Centers an element horizontally.

.margin-auto {
  margin: 0 auto;
  width: 50%;
}

4. Inherit Value

Inherits the margin of the parent element.

.margin-inherit {
  margin: inherit;
}

5. Margin Properties

Sets margins for each side of the element.

.margin-top {
  margin-top: 15px;
}

CSS Padding

1. Individual Sides

Sets padding on each side of an element.

.padding-sides {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

2. Shorthand Property

Uses a single property to define padding for all sides.

.padding-shorthand {
  padding: 10px 15px;
}

CSS Height, Width, and Max-width

1. Setting Height and Width

Defines the height and width of an element.

.height-width {
  height: 200px;
  width: 150px;
}

2. Height and Width Values

Specifies height and width in different units.

.height-width-values {
  height: 50%;
  width: 50%;
}

3. Setting Max-width

Limits the maximum width of an element.

.max-width {
  max-width: 100%;
}

CSS Box Model

The box model consists of margins, borders, padding, and the content area.

.box-model {
  border: 1px solid #000;
  padding: 10px;
  margin: 10px;
  width: 200px;
}

CSS Outline

1. outline-style

Sets the style of an outline around an element.

.outline-style {
  outline-style: dashed;
}

2. outline-color

Defines the color of the outline.

.outline-color {
  outline-color: red;
}

3. outline-width

Sets the thickness of the outline.

.outline-width {
  outline-width: 2px;
}

4. outline-offset

Offsets the outline from the element's border.

.outline-offset {
  outline-offset: 5px;
}

5. outline Shorthand

Shorthand for setting all outline properties at once.

.outline {
  outline: 2px solid blue;
}

CSS Text

1. Text Color

Sets the color of the text.

.text-color {
  color: navy;
}

2. Text Color and Background Color

Sets both text color and background color.

.text-background {
  color: white;
  background-color: black;
}

CSS Fonts

1. font-family

Specifies the font for text.

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

2. font-style

Defines the style of the font (italic, oblique, or normal).

.font-style {
  font-style: italic;
}

3. font-weight

Sets the weight of the font (boldness).

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

CSS Links

1. a:link

Styles a normal, unvisited link.

a:link {
  color: blue;
}

2. a:visited

Styles a link the user has already visited.

a:visited {
  color: purple;
}

3. a:hover

Styles a link when hovered over.

a:hover {
  color: green;
}

CSS Lists

1. Unordered Lists

Styles unordered (bulleted) lists.

ul {
  list-style-type: square;
}

2. Ordered Lists

Styles ordered (numbered) lists.

ol {
  list-style-type: decimal;
}

3. Remove Default Settings

Removes default list styling.

.no-list-style {
  list-style-type: none;
}

CSS Tables

1. Table Borders

Defines borders for table cells.

table, th, td {
  border: 1px solid black;
}

2. Full-Width Table

Sets a table to span the full width of its container.

table {
  width: 100%;
}

3. Collapse Table Borders

Removes the space between table borders.

table {
  border-collapse: collapse;
}

4. Table Width and Height

Sets specific width and height for table cells.

th, td {
  width: 150px;
  height: 50px;
}

5. Table Alignment

Aligns text within table cells.

td {
  text-align: center;
  vertical-align: middle;
}

CSS Layout

1. display Property

Controls how an element is displayed in the layout.

.block {
  display: block;
}

2. width and max-width

Sets width and limits maximum width.

.responsive {
  width: 100%;
  max-width: 600px;
}

3. position Property

Positions an element relative, absolute, or fixed.

.absolute {
  position: absolute;
  top: 10px;
  left: 20px;
}

4. z-index Property

Controls stacking order of positioned elements.

.overlay {
  position: absolute;
  z-index: 10;
}

5. Overflow

Specifies behavior of content when it overflows its container.

.scrollable {
  overflow: auto;
}

CSS Combinators

1. Descendant Combinator

Targets elements nested inside other elements.

div p {
  color: red;
}

2. Child Combinator (>)

Selects only direct children of an element.

div > p {
  color: blue;
}

3. Next Sibling Combinator (+)

Styles the immediate next sibling element.

h1 + p {
  color: green;
}

4. Subsequent-sibling Combinator (~)

Styles all siblings after a specified element.

h1 ~ p {
  color: purple;
}

CSS Pseudo-classes

1. Anchor Pseudo-classes

Styles links in different states (e.g., :hover, :active).

a:hover {
  color: orange;
}

2. Hover on <div>

Styles a <div> when hovered.

div:hover {
  background-color: lightblue;
}

3. Simple Tooltip Hover

Shows a tooltip when hovering over an element.

.tooltip:hover::after {
  content: 'Tooltip text';
  position: absolute;
  background-color: black;
  color: white;
}

CSS Pseudo-elements

1. ::first-line

Styles the first line of a block element.

p::first-line {
  font-weight: bold;
}

2. ::first-letter

Styles the first letter of a block element.

p::first-letter {
  font-size: 2em;
  color: red;
}

3. ::before

Inserts content before an element's content.

h2::before {
  content: "★ ";
  color: gold;
}

4. ::after

Inserts content after an element's content.

h2::after {
  content: " ★";
  color: gold;
}

5. ::marker

Styles list item markers.

li::marker {
  color: blue;
}

6. ::selection

Styles the part of an element selected by the user.

::selection {
  background: yellow;
  color: black;
}

CSS Opacity / Transparency

1. Transparent Image

Sets the opacity of an image to make it semi-transparent.

img {
  opacity: 0.5;
}

2. Transparent Hover Effect

Changes opacity when an element is hovered over.

img:hover {
  opacity: 0.7;
}

3. Transparent Box

Applies opacity to a box without affecting its children.

.box {
  background-color: rgba(0, 0, 0, 0.5);
}

4. Text in Transparent Box

Creates a text box with a transparent background.

.transparent-text-box {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

CSS Units

1. Absolute Lengths

Defines lengths in absolute units (e.g., px, cm, in).

div {
  width: 300px;
}

2. Relative Lengths

Defines lengths in relative units (e.g., %, em, rem).

p {
  font-size: 1.5em;
}

CSS The !important Rule

Overrides other styles for the same property.

p {
  color: blue !important;
}

CSS Math Functions

1. calc()

Calculates values dynamically using expressions.

div {
  width: calc(100% - 50px);
}

2. max()

Sets a maximum value using mathematical expressions.

div {
  width: max(50%, 300px);
}

3. min()

Sets a minimum value using mathematical expressions.

div {
  width: min(500px, 100%);
}

CSS Rounded Corners

1. border-radius

Applies rounded corners to an element.

div {
  border-radius: 15px;
}

2. border-top-left-radius

Sets the radius of the top-left corner of an element.

div {
  border-top-left-radius: 15px;
}

3. border-top-right-radius

Sets the radius of the top-right corner of an element.

div {
  border-top-right-radius: 15px;
}

4. border-bottom-right-radius

Sets the radius of the bottom-right corner of an element.

div {
  border-bottom-right-radius: 15px;
}

5. border-bottom-left-radius

Sets the radius of the bottom-left corner of an element.

div {
  border-bottom-left-radius: 15px;
}

CSS Border Images

1. border-image

Uses an image as the border around an element.

div {
  border-image: url('border.png') 30 stretch;
}

2. border-image-source

Specifies the source image for a border.

div {
  border-image-source: url('border.png');
}

3. border-image-slice

Defines how to slice the border image.

div {
  border-image-slice: 30;
}

4. border-image-width

Sets the width of the border image area.

div {
  border-image-width: 5px;
}

5. border-image-outset

Defines the amount by which the border image area extends beyond the border box.

div {
  border-image-outset: 10px;
}

6. border-image-repeat

Specifies how the border image is repeated along the borders.

div {
  border-image-repeat: round;
}

CSS Shadow Effects

1. text-shadow

Applies shadow effects to text.

h1 {
  text-shadow: 2px 2px 5px grey;
}

2. box-shadow

Applies shadow effects to a box element.

div {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

CSS Gradients

1. linear-gradient()

Creates a linear gradient as a background.

div {
  background: linear-gradient(to right, red, yellow);
}

2. radial-gradient()

Creates a radial gradient as a background.

div {
  background: radial-gradient(circle, red, yellow);
}

3. conic-gradient()

Creates a conic gradient as a background.

div {
  background: conic-gradient(from 0deg, red, yellow, green);
}

CSS Text Effects

1. text-overflow

Handles overflowed text content with an ellipsis.

p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

2. word-wrap

Wraps long words onto the next line.

p {
  word-wrap: break-word;
}

CSS Transitions

1. transition

Defines transition effects when a property changes.

div {
  transition: background-color 0.5s ease;
}

2. transition-duration

Specifies the duration of a transition.

div {
  transition-duration: 1s;
}

CSS Animations

1. @keyframes

Defines the keyframes for an animation, specifying how styles change over time.

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

2. animation-name

Specifies the name of the @keyframes animation to be used.

div {
  animation-name: slide;
}

3. animation-duration

Defines how long an animation should take to complete one cycle.

div {
  animation-duration: 2s;
}

4. animation-delay

Specifies a delay before the animation starts.

div {
  animation-delay: 1s;
}

5. animation-iteration-count

Sets the number of times an animation should be played.

div {
  animation-iteration-count: infinite;
}

6. animation-direction

Specifies whether the animation should play in reverse on alternate cycles.

div {
  animation-direction: alternate;
}

7. animation-timing-function

Defines the speed curve of the animation.

div {
  animation-timing-function: ease-in-out;
}

8. animation-fill-mode

Specifies how a CSS animation applies styles to its target before and after its execution.

div {
  animation-fill-mode: forwards;
}

9. animation

Shorthand property for setting multiple animation properties in one declaration.

div {
  animation: slide 2s ease-in-out 1s infinite alternate;
}

CSS Buttons

1. Basic Buttons

Styles a basic button with padding, border, and background color.

.button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

2. Colored Buttons

Applies specific colors to buttons for different states.

.button-primary {
  background-color: blue;
}
.button-secondary {
  background-color: green;
}

3. Rounded Buttons

Makes buttons with fully rounded corners.

.rounded-button {
  border-radius: 50px;
}

4. Colored Button Borders

Styles button borders with different colors.

.colored-border {
  border: 2px solid red;
}

CSS Pagination

1. Simple Pagination

Creates a basic pagination style.

.pagination {
  display: flex;
  list-style: none;
}
.pagination li {
  margin: 0 5px;
}

2. Active and Hoverable Pagination

Styles pagination items with hover and active states.

.pagination li.active {
  font-weight: bold;
  color: blue;
}
.pagination li:hover {
  text-decoration: underline;
}

3. Rounded Active and Hoverable Buttons

Styles pagination buttons with rounded corners and hover effects.

.pagination li {
  border-radius: 5px;
  padding: 5px 10px;
}
.pagination li:hover {
  background-color: lightgray;
}

CSS Multiple Columns

1. column-count

Specifies the number of columns an element should be divided into.

.columns {
  column-count: 3;
}

2. column-gap

Defines the gap between columns.

.columns {
  column-gap: 20px;
}

3. column-rule-style

Sets the style of the line between columns.

.columns {
  column-rule-style: solid;
}

4. column-rule-width

Defines the width of the line between columns.

.columns {
  column-rule-width: 2px;
}

5. column-rule-color

Sets the color of the line between columns.

.columns {
  column-rule-color: gray;
}

6. column-rule

Shorthand for setting the column-rule properties.

.columns {
  column-rule: 2px solid gray;
}

7. column-span

Allows an element to span multiple columns.

.column-span {
  column-span: all;
}

8. column-width

Sets the ideal width of columns.

.columns {
  column-width: 200px;
}

CSS Flexbox Properties

1. display: flex

Defines a flex container, enabling flex layout for direct child elements.

.container {
  display: flex;
}

2. flex-direction

Sets the direction of flex items in the container.

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

3. justify-content

Aligns flex items along the main axis (horizontal if row direction, vertical if column direction).

.container {
  display: flex;
  justify-content: center; /* flex-start | flex-end | center | space-between | space-around */
}

4. align-items

Aligns flex items along the cross axis (vertical if row direction, horizontal if column direction).

.container {
  display: flex;
  align-items: center; /* flex-start | flex-end | center | baseline | stretch */
}

CSS Grid Layout Properties

1. display: grid

Defines a grid container, enabling grid layout for direct child elements.

.container {
  display: grid;
}

2. grid-template-rows

Specifies the number and size of rows in the grid layout.

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Defines two rows: 100px and 200px */
}

3. grid-template-columns

Specifies the number and size of columns in the grid layout.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Defines two columns: 1 fraction and 2 fractions */
}

4. grid-gap

Sets the gap between rows and columns in the grid layout.

.container {
  display: grid;
  grid-gap: 10px; /* Sets a 10px gap between rows and columns */
}