CSS Cheatsheet

CSS (Cascading Style Sheets) is the language used to style and format the appearance of your web pages.

Selectors, Properties, and Values

CSS works by targeting specific elements in your HTML document and applying styles to them. This targeting is achieved through selectors. Selectors point to the HTML elements you want to style. Once you’ve selected the element, you define the styles using properties and values.

Here’s an example to illustrate this:

/* Selector */
p {
  /* Property: font-size */
  /* Value: 16px */
  font-size: 16px;

  /* Property: color */
  /* Value: blue */
  color: blue;
}

In this example:

The selector p targets all the paragraph elements (<p>) in our HTML document.
Inside the curly braces {}, we define two styles for the selected paragraphs.
The first property is font-size, which controls the size of the text. We set its value to 16px.
The second property is color, which defines the text color. Here, we set the value to blue.

Types of Selectors
There are different ways to target elements with CSS selectors. Here are the most common ones:

• Tag Selector: This selects all elements of a specific HTML tag. For example, h1 selects all heading elements (<h1>).
• Class Selector: This targets elements with a specific class attribute. We use a dot (.) followed by the class name. For example, .important selects all elements with the class “important”.
• ID Selector: This targets a unique element using its ID attribute. We use a hash (#) followed by the ID. For example, #banner selects the element with the ID “banner”.

<h1>This is a heading</h1>  
<p class="important">This is important text.</p>  
<div id="footer">This is the footer.</div>

Combining Selectors:
You can combine selectors to target elements more specifically. For example, h1.main selects all <h1> elements with the class “main”.

Comments

Comments are lines of text ignored by the browser but help you understand and document your code. Comments are added using /* and */ around the comment text.

/* This is a comment explaining the styles for paragraphs */
p {
  font-size: 16px;
  color: blue;
}

Common CSS Properties

This table summarizes some of the most commonly used CSS properties to control the look and feel of your webpages.

.selector {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  text-decoration: underline;
}
    

/* Background example */
.selector {
  background-color: #ffffff; /* Sets the background color */
  background-image: url('background.jpg'); /* Sets the background image */
  background-position: center top; /* Sets the position of the background image */
  background-repeat: no-repeat; /* Prevents background image from repeating */
}
    

/* Borders & Margins example */
.selector {
  border-style: solid; /* Sets the style of the border */
  border-width: 2px; /* Sets the width of the border */
  border-color: #000000; /* Sets the color of the border */
  margin: 20px; /* Sets the outside margin */
  padding: 10px; /* Sets the inner padding */
}
    

/* Dimensions & Positioning example */
.selector {
  width: 200px; /* Sets the width */
  height: 100px; /* Sets the height */
  display: block; /* Specifies the display type */
  position: relative; /* Sets the positioning method */
}
    

Flexbox & Grid

Flexbox and Grid are two powerful layout methods in CSS that offer more control over how you arrange elements on your webpage. Here’s a quick cheatsheet to get you started:

Flexbox

Flexbox allows you to distribute space evenly or unevenly between elements within a container. It’s ideal for one-dimensional layouts like navigation bars or image galleries.

Key Concepts

Flex Container: The parent element that holds the flex items. Set display: flex; on this element.
Flex Items: The child elements within the flex container.

Properties:

flex-direction: (row, column, row-reverse, column-reverse) Defines the main axis (direction) along which flex items are laid out.
justify-content: (flex-start, flex-end, center, space-between, space-around) Controls how flex items are distributed along the main axis.
align-items: (flex-start, flex-end, center, baseline, stretch) Aligns flex items perpendicular to the main axis.
align-self: (stretch, flex-start, flex-end, center, baseline) Overrides align-items for individual flex items.
flex-grow: (number) Sets the flex grow factor for an item, determining how much extra space it can occupy.
flex-shrink: (number) Sets the flex shrink factor for an item, determining how much it can shrink if there’s not enough space.

Example:

/* Style for the navigation container */
.navigation {
  display: flex; /* Display items in a flex container */
  justify-content: space-between; /* Align items along the main axis with space between */
  align-items: center; /* Align items at the center of the cross axis */
}

/* Style for navigation links */
.navigation a {
  padding: 10px; /* Add padding around the links */
  text-decoration: none; /* Remove underline from links */
}

Grid

Grid allows you to create a grid-based layout system, defining rows and columns for more complex layouts.

Key Concepts

Grid Container: The parent element that holds the grid items. Set display: grid; on this element.
Grid Items: The child elements positioned within the grid cells.

Properties:
grid-template-columns: Defines the layout of columns in the grid (e.g., “1fr 2fr” – two columns, first one takes 1 unit of space, second takes 2).
grid-template-rows: Defines the layout of rows in the grid (e.g., auto 100px – first row has automatic height, second is 100px).
grid-gap: Sets the spacing between grid items (e.g., 10px).
grid-column-start/grid-row-start: Positions an item by specifying the starting cell (e.g., grid-column-start: 2 – starts at the second column).
grid-column-end/grid-row-end: Positions an item by specifying the ending cell (e.g., grid-row-end: span 2 – spans two rows).

Example:

/* Style for the grid container */
.grid-container {
  display: grid; /* Use CSS Grid layout */
  /* Create responsive columns:
     - auto-fit: Adjusts the number of columns to fit the container width
     - minmax(200px, 1fr): Each column has a minimum width of 200px and expands to fill available space */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px; /* 10 pixels of gap between grid items */
}

Pseudo-Classes

Pseudo-classes are special keywords that can be added to selectors to style elements based on their state or position in the document tree.

Examples:
:hover: Styles an element when the user hovers over it.

button:hover {
  background-color: #f0f0f0;
}

:focus: Styles an element when it receives focus.

input:focus {
  border-color: blue;
}

:nth-child(): Styles elements based on their position within a parent.

li:nth-child(odd) {
  background-color: #f0f0f0;
}

Pseudo-Elements:

Pseudo-elements allow you to style certain parts of an element. They are denoted by double colons :: in CSS.

Examples:
::before: Inserts content before the selected element.

.quote::before {
  content: '"';
}

::after: Inserts content after the selected element.

.tooltip::after {
  content: 'ℹ';
}

::first-line: Styles the first line of a block-level element.

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

Combined Example:

/* Style links */
a {
  color: blue;
}

/* Change link color on hover */
a:hover {
  color: red;
}

/* Add quotation marks before blockquote content */
blockquote::before {
  content: '"';
}

/* Style the first line of paragraphs */
p::first-line {
  font-weight: bold;
}

Combined Example:

/* Style links */
a {
  color: blue;
}

/* Change link color on hover */
a:hover {
  color: red;
}

/* Add quotation marks before blockquote content */
blockquote::before {
  content: '"';
}

/* Style the first line of paragraphs */
p::first-line {
  font-weight: bold;
}

Measurements

In CSS, you use units to define the size or position of elements. Here’s a breakdown of some common units:

px (pixels): The most basic unit, representing a single pixel on your screen. It’s fixed and device-independent.
em (ems): Relative unit based on the font size of the parent element. For example, 2em would be twice the font size of the parent.
rem (root ems): Relative unit based on the font size of the root element (usually <html>). This ensures consistent sizing across the entire document, even when nested elements have different font sizes.
% (percentage): Relative unit based on a percentage of its containing element’s width or height. Useful for responsive design and creating layouts that scale with different screen sizes.
vh (viewport height): Represents a percentage of the viewport’s height. Great for defining element heights relative to the user’s screen.
**vw (viewport width): **Represents a percentage of the viewport’s width. Useful for defining element widths relative to the user’s screen.

Choosing the Right Unit:

px: Use for specific, fixed sizes that shouldn’t change with font size or screen size (e.g., icon sizes, borders).
em: Use for relative sizing within a specific element context (e.g., slightly larger font for headings within a section).
rem: Use for consistent, scalable sizing across your entire layout (e.g., setting base font sizes, margins, paddings).
%: Use for creating responsive layouts, where elements should adjust based on the screen size (e.g., setting container widths, margins as percentages).
vh/vw: Use for elements that should scale proportionally with the viewport size (e.g., creating a full-height background image).

/* Using px */
.icon {
  width: 32px; /* Fixed size for icon */
  height: 32px; /* Fixed size for icon */
  border: 1px solid #000; /* Border with a fixed width of 1px */
}

/* Using em */
.section-heading {
  font-size: 1.5em; /* Font size relative to the parent element */
}

/* Using rem */
body {
  font-size: 16px; /* Base font size */
}

.container {
  padding: 1rem; /* Padding that scales based on the base font size */
}

/* Using % */
.container {
  width: 80%; /* Container width as a percentage of the parent element */
  margin: 0 auto; /* Center the container horizontally */
}

/* Using vh/vw */
.full-height-bg {
  height: 100vh; /* Full height of the viewport */
}

.full-width-bg {
  width: 100vw; /* Full width of the viewport */
}

px is used for fixed sizes like icon dimensions and border widths.
em is used for relative sizing within a specific element context, such as headings within a section.
rem is used for consistent, scalable sizing across the entire layout, like setting base font sizes and paddings.
% is used for creating responsive layouts, where elements adjust based on screen size, such as container widths and margins.
vh and vw are used for elements that should scale proportionally with the viewport size, such as background images that need to cover the entire viewport.

Selector Types

CSS selectors are the backbone of styling your web pages. They target specific elements or groups of elements to apply styles. Here’s a breakdown of common selector types:

Basic Selectors:

Element Selector (e.g., h1, p, div): Targets specific HTML elements by their tag name.
ID Selector (e.g., #uniqueID): Targets an element with a unique ID attribute. IDs should only be used once per page.
Class Selector (e.g., .className): Targets elements with a specific class name attribute. Classes can be applied to multiple elements.

Combinators:

Descendant Combinator (>): Targets elements that are direct children of another element. (e.g., #title > p selects paragraphs that are direct children of the element with ID “title”)

/* Selects paragraphs that are direct children of the element with ID "title" */
#title > p {
  color: blue;
}

Child Combinator () Targets elements that are any child (direct or indirect) of another element.

/* Selects any paragraph that is a child (direct or indirect) of the element with class "content" */
.content p {
  font-weight: bold;
}

/* Selects paragraphs that directly follow an h1 heading */
h1 + p {
  margin-top: 20px;
}

/* Selects all paragraphs that are siblings of an h1 heading, not necessarily immediately following */
h1 ~ p {
  color: green;
}

/* Selects elements with a "href" attribute */
[href] {
  color: blue;
}

/* Selects elements with an href attribute that links to "#top" */
[href="#top"] {
  font-weight: bold;
}

/* Selects elements with class names containing "button" */
[class*="button"] {
  background-color: yellow;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  animation: slide-in 1s ease-in-out 0s 1 normal forwards;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.element {
  animation: pulse 2s infinite alternate;
}

.element {
  transition: property duration timing-function delay;
}

.button {
  background-color: #007bff;
  color: #fff;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: #0056b3;
}

.element {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}