But let’s be honest: CSS is massive. Even seasoned developers find themselves looking up the syntax for justify-content or the specific order of transition properties. There’s no shame in it. The language is powerful, and with that power comes a lot of detail to remember. This is why a “cheat sheet” is a web creator’s best friend. But this isn’t just a list of properties. This is a comprehensive guide designed to be your single source of truth, whether you’re debugging a layout, learning a new concept, or just need a quick reminder.

Key Takeaways

  • CSS Fundamentals: CSS works by using selectors to target HTML elements and applying properties with specific values (e.g., h1 { color: blue; }).
  • The Box Model: Every HTML element is a rectangular box. The CSS Box Model (margin, border, padding, content) defines the space and structure of that box. Mastering this is non-negotiable.
  • Modern Layouts are Key: Forget floats. Modern web layout is dominated by CSS Flexbox (for one-dimensional alignment) and CSS Grid (for two-dimensional alignment). Understanding these is essential for any responsive design.
  • Responsive Design is Non-Negotiable: Use media queries to adapt your site’s layout, fonts, and spacing to different screen sizes, from mobile phones to desktops.
  • CSS Variables are Powerful: Use CSS Custom Properties (e.g., –main-color: #333;) to create reusable, easily updatable values, which is the secret behind efficient theme-building.
  • Tools Enhance, Not Replace: Visual tools like the Elementor Website Builder provide a powerful interface for controlling CSS. But understanding the underlying code transforms you from a user to a master creator, allowing you to build anything you can imagine.

This guide is structured to build from the ground up. We’ll cover the basics, dive deep into layout, explore responsive design, and finish with the modern features you’ll use every day.

Part 1: The Foundations of CSS

Before you can build a house, you need to understand the bricks. These are the fundamental concepts of CSS.

How CSS Works: Selectors, Properties, and Values

A CSS rule has two main parts: the selector and the declaration block.

  • Selector: This “selects” the HTML element(s) you want to style. It can be a tag name (like p for paragraph), a class name (like .my-class), or an ID (like #my-id).
  • Declaration Block: This is enclosed in curly braces {}. It contains one or more declarations.
  • Declaration: This is the property-value pair, separated by a colon.
    • Property: The style attribute you want to change (e.g., color, font-size, background).
    • Value: The new setting for that property (e.g., red, 16px, #ffffff).

/* This is a CSS comment */

h1 {

  color: #333;

  font-size: 32px;

}

.my-button {

  background-color: blue;

  padding: 10px 20px;

}

How to Add CSS to a Page

You have three ways to connect CSS to your HTML document.

External Stylesheet (Best Practice): You link to a separate .css file. This keeps your styles separate from your content, making your site much easier to maintain.
<head>

  <link rel=”stylesheet” href=”style.css”>

</head>

Internal Stylesheet: You place the CSS rules inside a <style> tag in the HTML <head>. This is useful for single-page styles or quick tests.
<head>

  <style>

    body {

      background-color: #f0f0f0;

    }

  </style>

</head>

Inline Styles: You apply styles directly to an HTML element using the style attribute. You should avoid this method. It’s difficult to maintain and mixes content with presentation.
<p style=”color: red; font-size: 14px;”>This is a red paragraph.</p>

The CSS Box Model

This is the most important concept in CSS. Every element on a webpage is a rectangular box. The Box Model describes how this box is structured.

It consists of four layers, from the inside out:

  1. Content: The actual content of the box, where text and images appear. Its size is set by width and height.
  2. Padding: The clear space inside the box, between the content and the border.
  3. Border: The line that goes around the padding and content.
  4. Margin: The clear space outside the box, separating it from other elements.

.my-box {

  /* 1. Content size */

  width: 300px;

  height: 100px;

  /* 2. Padding (inside) */

  padding: 20px; /* 20px on all four sides */

  /* 3. Border (around) */

  border: 1px solid black;

  /* 4. Margin (outside) */

  margin: 10px; /* 10px on all four sides */

}

You can specify values for padding and margin on each side:

  • Shorthand (Top, Right, Bottom, Left):
    • padding: 10px 20px 10px 20px; (Top, Right, Bottom, Left)
    • padding: 10px 20px; (Top/Bottom, Left/Right)
    • padding: 10px; (All four sides)
  • Longhand (Specific sides):
    • margin-top: 10px;
    • margin-right: 20px;
    • margin-bottom: 10px;
    • margin-left: 20px;

Pro Tip: By default, width and height only apply to the content area. This means an element’s total width is width + padding-left + padding-right + border-left + border-right. This is confusing.

You can fix this with the box-sizing property.

* {

  box-sizing: border-box;

}

Setting box-sizing: border-box; tells the browser to include padding and border in the element’s total width and height. A box with width: 100px; will always be 100px wide, regardless of its padding or border. Most developers apply this rule to all elements as a modern standard.

Basic Selectors

Here are the essential selectors you’ll use 90% of the time.

SelectorExampleWhat It Selects
TypepAll <p> elements.
Class.my-classAll elements with class=”my-class”.
ID#my-idThe one element with id=”my-id”.
Attribute[href]All elements with an href attribute.
[href=”…”]All elements with a specific href value.
Universal*All elements on the page.
Groupingh1, h2, pAll <h1>, <h2>, and <p> elements.

Part 2: Core Properties for Sizing and Styling

Now that we can select elements, let’s learn what we can do with them.

Units

How you define size is critical for responsiveness.

  • px (Pixels): An absolute, fixed-size unit. 1px is one pixel on the screen. Good for things you want to be an exact size, like a thin border.
  • % (Percentage): Relative to the parent element’s size. A width: 50%; element will be half the width of its container.
  • em (Em): Relative to the font-size of the current element. If font-size: 16px;, then 2em is 32px.
  • rem (Root Em): Relative to the font-size of the root element (the <html> tag). This is the most popular unit for modern, accessible design. You can scale your entire site’s spacing and fonts by changing just the root font size.
  • vw (Viewport Width): 1/100th of the browser window’s width. 10vw is 10% of the viewport width.
  • vh (Viewport Height): 1/100th of the browser window’s height.

Best Practice: Use rem for font-size, padding, and margin. Use % or vw for layout widths. Use px for border widths.

Colors

You can specify colors in several ways.

  • Keywords: red, blue, green, transparent.
  • Hex (Hexadecimal): #RRGGBB. This is the most common.
    • #FF0000 (Red)
    • #00FF00 (Green)
    • #0000FF (Blue)
    • #FFFFFF (White)
    • #333 (Shorthand for #333333)
  • RGB (Red, Green, Blue): rgb(red, green, blue). Values are 0-255.
    • rgb(255, 0, 0) (Red)
  • RGBA (Red, Green, Blue, Alpha): rgba(red, green, blue, alpha). Alpha is transparency, from 0 (transparent) to 1 (opaque).
    • rgba(255, 0, 0, 0.5) (A 50% transparent red)
  • HSL (Hue, Saturation, Lightness): A more intuitive way to pick colors.
    • hsl(0, 100%, 50%) (Red)

Typography

Controlling text is fundamental to design.

font-family: Sets the font. Always provide “fallback” fonts.
body {

  font-family: “Inter”, “Helvetica Neue”, Arial, sans-serif;

}

font-size: Sets the size of the text. Use rem units.
p {

  font-size: 1rem; /* Usually 16px by default */

}

h1 {

  font-size: 2.5rem; /* 40px */

}

  • font-weight: Sets the boldness.
    • font-weight: normal; (or 400)
    • font-weight: bold; (or 700)

line-height: Sets the space between lines of text. Use a unitless value (e.g., 1.5) which means “1.5 times the font size.”
p {

  line-height: 1.6;

}

  • text-align: Aligns text horizontally.
    • text-align: left; (default)
    • text-align: right;
    • text-align: center;
    • text-align: justify;
  • text-decoration: Adds lines to text.
    • text-decoration: none; (Removes underlines from links)
    • text-decoration: underline;
  • text-transform: Changes the case of text.
    • text-transform: uppercase;
    • text-transform: lowercase;
    • text-transform: capitalize;

Backgrounds

You can set a color or an image as the background of an element.

background-color: Sets a solid color.
div {

  background-color: #eee;

}

background-image: Sets an image.
div {

  background-image: url(‘path/to/image.jpg’);

}

  • background-size: Controls how the image scales.
    • background-size: cover; (Scales to fill the element, may crop)
    • background-size: contain; (Scales to fit, will not crop)
  • background-position: Aligns the image.
    • background-position: center center;
  • background-repeat: Controls if the image tiles.
    • background-repeat: no-repeat; (Most common)

Shorthand: You can combine all these.
.hero {

  background: url(‘hero.jpg’) no-repeat center center / cover;

}

Part 3: Modern Layouts (Flexbox and Grid)

This is where CSS gets really powerful. Forget old float and table layouts. Your layout tools are Flexbox and Grid.

For a great overview of when to use each, this video is a perfect starting point:

The display Property

The display property controls how an element behaves in the page flow.

  • display: block;: The element starts on a new line and takes up the full available width (e.g., <h1>, <p>, <div>).
  • display: inline;: The element flows with text and only takes up as much width as its content (e.g., <a>, <span>, <strong>). You cannot set width or height on inline elements.
  • display: inline-block;: The best of both. It flows with text (inline) but you can set width, height, margin, and padding (block).
  • display: none;: The element is completely removed from the page.
  • display: flex;: Turns the element into a Flexbox container.
  • display: grid;: Turns the element into a Grid container.

CSS Positioning

The position property lets you take elements out of the normal page flow.

  • position: static;: (Default) The element is in the normal flow.
  • position: relative;: The element is in the normal flow, but you can now use top, right, bottom, and left to “nudge” it relative to its original position. It still occupies its original space.
  • position: absolute;: The element is removed from the normal flow. Other elements behave as if it’s not there. It is positioned relative to its nearest positioned ancestor (any ancestor with position set to anything other than static).
  • position: fixed;: The element is removed from the normal flow. It is positioned relative to the browser viewport. It stays in the same place even when you scroll. Perfect for sticky headers or “back to top” buttons.
  • position: sticky;: A hybrid. The element acts like relative until you scroll past a certain point, then it acts like fixed. This is great for navigation bars that “stick” to the top after you scroll past the hero section.

Creating custom headers with fixed or sticky positioning is a core web design task. You can see a great tutorial on building one here:

CSS Flexbox

Flexbox is a one-dimensional layout model. It’s designed to align and distribute space among items in a single row or a single column.

To use it, you set display: flex; on a parent container. All its direct children become “flex items.”

Properties for the Parent (Flex Container)

  • display: flex;
    • Turns on Flexbox.
  • flex-direction: Defines the main axis.
    • row; (Default) Items are arranged horizontally.
    • column; Items are arranged vertically.
  • justify-content: Aligns items along the main axis (horizontally if flex-direction: row).
    • flex-start; (Default) Items are at the start.
    • flex-end; Items are at the end.
    • center; Items are in the center.
    • space-between; Items are evenly distributed. First item is at the start, last item is at the end.
    • space-around; Items are evenly distributed with “half-size” spaces on the ends.
    • space-evenly; Items are distributed with equal space around them.
  • align-items: Aligns items along the cross axis (vertically if flex-direction: row).
    • flex-start; Items are at the top.
    • flex-end; Items are at the bottom.
    • center; Items are centered vertically.
    • stretch; (Default) Items stretch to fill the container’s height.
  • flex-wrap: Controls if items wrap to a new line.
    • nowrap; (Default) Items will shrink to fit on one line.
    • wrap; Items will wrap to a new line if they run out of space.

Properties for the Children (Flex Items)

flex-grow: A number defining how much an item can “grow” if there is extra space. 0 is the default (won’t grow).
.item-1 { flex-grow: 1; } /* Will take up all extra space */

.item-2 { flex-grow: 2; } /* Will take up 2/3 of extra space */

.item-3 { flex-grow: 1; } /* Will take up 1/3 of extra space */

  • flex-shrink: A number defining how much an item can “shrink” if there isn’t enough space. 1 is the default.
  • flex-basis: Defines the default size of an item before extra space is distributed.
  • flex (Shorthand): Combines flex-grow, flex-shrink, and flex-basis.
    • flex: 0 1 auto; (Default: don’t grow, can shrink, size is auto)
    • flex: 1; (Shorthand for 1 1 0% – grow and shrink, start at 0 size)

order: Changes the visual order of items.
.item-1 { order: 2; }

.item-2 { order: 1; } /* This item will now appear first */

  • align-self: Overrides the parent’s align-items for a single item.

Elementor Connection: Understanding Flexbox is the key to mastering modern web builders. The Elementor platform has fully adopted this model with its Flexbox Containers. When you use the container’s layout controls to set direction (row/column) or alignment (justify/align), you are visually setting these exact CSS properties.

CSS Grid

Grid is a two-dimensional layout model. It’s designed for aligning items in both rows AND columns at the same time, like a spreadsheet. It is perfect for complex page layouts.

To use it, you set display: grid; on a parent container.

This video provides an excellent deep dive into using CSS Grid:

Properties for the Parent (Grid Container)

  • display: grid;
    • Turns on Grid.

grid-template-columns: Defines the columns. This is the magic.
.container {

  /* Creates three 100px-wide columns */

  grid-template-columns: 100px 100px 100px;

  /* Creates two columns, the first 200px and the second 1fr */

  /* ‘fr’ (fraction) unit takes up one “fraction” of the remaining space */

  grid-template-columns: 200px 1fr;

  /* Creates three equal-width columns */

  grid-template-columns: 1fr 1fr 1fr;

  /* (or) grid-template-columns: repeat(3, 1fr); */

}

grid-template-rows: Defines the rows.
.container {

  /* Creates two rows, 100px and 200px high */

  grid-template-rows: 100px 200px;

}

gap (or grid-gap): Defines the “gutter” or space between grid cells.
.container {

  gap: 20px; /* 20px space between all rows and columns */

  row-gap: 30px;

  column-gap: 10px;

}

  • justify-items / align-items: Aligns content inside each grid cell (the children).

Properties for the Children (Grid Items)

grid-column-start / grid-column-end: Defines which column line an item starts and ends on.
.my-item {

  grid-column-start: 1;

  grid-column-end: 3; /* This item will span 2 columns */

  /* (or) grid-column: 1 / 3; */

  /* (or) grid-column: span 2; */

}

grid-row-start / grid-row-end: Defines which row line an item starts and ends on.
.my-item {

  grid-row: 1 / 4; /* This item will span 3 rows */

}

  • justify-self / align-self: Overrides the parent’s alignment for just this item.

Part 4: Advanced Selectors and Pseudo-Classes

These let you write more specific and dynamic rules.

Combinators

Combinators live between selectors to define a relationship.

  • Descendant ( ): div p
    • Selects all <p> elements that are anywhere inside a <div>.
  • Child (>): div > p
    • Selects only <p> elements that are direct children of a <div>.
  • Adjacent Sibling (+): h1 + p
    • Selects the first <p> element that comes immediately after an <h1>.
  • General Sibling (~): h1 ~ p
    • Selects all <p> elements that come after an <h1> (and share the same parent).

Pseudo-Classes

A pseudo-class is a keyword added to a selector that specifies a special state of the element.

:hover: Style when the user mouses over an element.
.my-button:hover {

  background-color: darkblue;

}

  • :focus: Style when an element is focused (e.g., clicking in an <input> or tabbing to a link).
  • :active: Style while an element is being clicked or activated.
  • :first-child: Selects the first element among its siblings.
  • :last-child: Selects the last element among its siblings.
  • :nth-child(n): Selects an element based on its position.
    • :nth-child(3) (The 3rd child)
    • :nth-child(odd) (1st, 3rd, 5th…)
    • :nth-child(even) (2nd, 4th, 6th…)
    • :nth-child(2n+1) (A formula for more complex patterns)

:not(selector): Selects elements that do not match the selector.
p:not(.special) {

  color: gray;

}

Pseudo-Elements

A pseudo-element is a keyword that lets you style a specific part of a selected element.

  • ::before: Creates a “fake” element before the content of an element.
  • ::after: Creates a “fake” element after the content of an element.

::before and ::after are incredibly powerful for adding decorative icons, shapes, and effects without extra HTML. You must always use them with the content property.

.my-link::before {

  content: “► “;

  color: red;

}

Part 5: Responsive Design with Media Queries

Your website must look good on all devices. Responsive design is the practice of using CSS to adapt your layout to different screen sizes. The main tool for this is the Media Query.

A media query is an @media rule that checks for conditions (like screen width) and applies CSS rules only if those conditions are true.

The mobile-first approach is the modern standard. You write your default styles for mobile, then use media queries to add styles for larger screens.

/* — Default (Mobile) Styles — */

.container {

  width: 100%;

}

.my-sidebar {

  display: none; /* Hide sidebar on mobile */

}

/* — Tablet Styles — */

/* This block applies ONLY if the screen is 768px wide or wider */

@media (min-width: 768px) {

  .container {

    width: 90%;

    margin: 0 auto;

  }

  .my-sidebar {

    display: block; /* Show the sidebar on tablets */

  }

}

/* — Desktop Styles — */

/* This block applies ONLY if the screen is 1024px wide or wider */

@media (min-width: 1024px) {

  .container {

    max-width: 1200px;

  }

}

Elementor Connection: This is exactly what Elementor’s responsive mode does. When you click the Tablet or Mobile icon and change a style (like font size or padding), Elementor is generating one of these media queries for you behind the scenes. It’s a visual interface for this powerful CSS rule.

Part 6: Modern CSS Features

These features have simplified CSS and unlocked new creative possibilities.

CSS Variables (Custom Properties)

Variables let you define a value once and reuse it everywhere. This is the key to maintainable, scalable CSS.

You define a variable (prefixed with –) on a selector (like :root, which represents the <html> element) and then use it with the var() function.

/* 1. Define variables on the root */

:root {

  –primary-color: #007bff;

  –secondary-color: #6c757d;

  –base-font-size: 1rem;

  –base-spacing: 20px;

}

/* 2. Use them anywhere */

.my-button {

  background-color: var(–primary-color);

  font-size: var(–base-font-size);

}

.my-card {

  padding: var(–base-spacing);

  border-left: 5px solid var(–primary-color);

}

The best part? You can update the variable, and it will change everywhere it’s used.

Elementor Connection: This is precisely how Elementor’s Global Styles (Site Settings for Colors and Fonts) work. When you set a “Primary” color, you are defining a CSS variable. Every widget that uses that Primary color is just referencing the variable. This allows you to change your entire site’s color palette from one central dashboard.

Transitions

Transitions allow you to animate a property change smoothly over time, rather than instantly. This adds a professional polish to your site.

You just need to define which property to animate and how long it should take.

.my-button {

  background-color: blue;

  padding: 10px 20px;

  /* Tell the button to animate any change to ‘background-color’ */

  /* and ‘padding’ over 0.3 seconds. */

  transition: background-color 0.3s ease, padding 0.3s ease;

  /* A shorthand for all properties: */

  /* transition: all 0.3s ease; */

}

.my-button:hover {

  background-color: darkblue;

  padding: 12px 24px;

}

Now, when you hover, the button will smoothly grow and change color.

Animations

For more complex, multi-step animations, you use @keyframes. A keyframe defines the “scenes” of your animation.

/* 1. Define the animation */

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/* 2. Apply the animation to an element */

.my-element {

  animation-name: fadeIn;

  animation-duration: 1s;

  animation-fill-mode: forwards; /* Stays at the ‘to’ state */

}

This will make .my-element fade in and slide up when it loads. Elementor’s Motion Effects (like “Fade In Up”) are a no-code way to generate these keyframe animations.

Transforms

Transforms let you rotate, scale, skew, or translate (move) an element without affecting the layout of other elements around it.

.my-element:hover {

  /* Move it 10px to the right */

  transform: translateX(10px);

  /* Rotate it 10 degrees */

  transform: rotate(10deg);

  /* Make it 20% larger */

  transform: scale(1.2);

  /* You can combine them! */

  transform: scale(1.1) rotate(5deg);

}

Part 7: Practical Application and Best Practices

Knowing properties is one thing. Using them well is another.

How to Organize Your CSS

For large projects, your CSS file can become a mess. A naming methodology helps. BEM (Block, Element, Modifier) is a popular one.

  • Block: A standalone component (e.g., .card, .form).
  • Element: A part of that block (e.g., .card__title, .form__input).
  • Modifier: A variation of that block or element (e.g., .card–featured, .form__input–error).

/* BEM Naming Convention */

.card { … }

.card__image { … }

.card__title { … }

/* A “featured” variation of the card */

.card–featured {

  border: 2px solid gold;

}

Debugging CSS

Your most important tool is your browser’s DevTools. Right-click on any element and choose “Inspect”.

This will open a panel showing you:

  1. The HTML for that element.
  2. All the CSS rules being applied to it, in order.
  3. Which rules are being overridden (crossed out).
  4. A visual of the Box Model (margin, border, padding).

You can even change the CSS live in the browser to test things out. 99% of CSS problems are solved using this tool.

Expert Advice on Implementation

As a web creation expert, I’ve seen countless developers struggle with where to put their code and how to make it work with their tools, not against them.

“Your website builder and your custom code are not enemies. They are partners. The sign of a true professional is knowing how to leverage the builder for 95% of the work and then adding that last 5% of pixel-perfect custom CSS to achieve the client’s exact vision. The best tools embrace this synergy.” — Itamar Haim, Web Creation Expert

This is why a platform like Elementor Pro is so powerful. It doesn’t lock you out. It gives you multiple places to add your custom code:

  • Widget Level: In the “Advanced” tab of any widget.
  • Page Level: In the Page Settings, for code that only affects that one page.
  • Site Level: In the Site Settings, for code you want to apply globally.

This flexibility lets you be efficient and organized.

CSS for Accessibility

Good design is accessible to everyone. CSS plays a vital role.

Focus States: Ensure all links and form inputs have a clear :focus style. This is crucial for users who navigate with a keyboard.
a:focus {

  outline: 2px solid blue;

}

Hiding Content: If you need to hide something visually but keep it for screen readers (like a text label for an icon button), use this class:
.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

  • Accessibility Tools: For a deeper dive, tools like Ally by Elementor can scan your site and provide actionable advice to improve accessibility, which is a critical part of modern web development.

Using AI to Help with CSS

Don’t forget that AI can be a powerful co-pilot for writing code. If you’re stuck on a complex selector or can’t remember the syntax for an animation, you can ask an AI tool.

Tools like Elementor AI are integrated directly into the workflow. You can use it to write custom CSS snippets, suggest color palettes, or even explain a piece of code you don’t understand.

Part 8: The “Cheat Sheet” Tables

Here are the quick-reference tables you came for. Bookmark this page or (as promised) save it as a PDF for offline use.

Table 1: Common Selectors

SelectorExampleWhat It Selects
TypepAll <p> elements
Class.btnAll elements with class=”btn”
ID#headerThe single element with id=”header”
Descendantnav aAll <a> elements inside a <nav>
Childul > liAll <li> elements that are direct children of a <ul>
Adjacent Siblingh1 + pThe first <p> right after an <h1>
State (Pseudo)a:hoverA link on mouse-over
Nth-Childli:nth-child(even)Even-numbered list items
Pseudo-Elementp::beforeA “virtual” element before a paragraph’s content

Table 2: The Box Model

PropertyExampleWhat It Does
widthwidth: 300px;Sets the width of the content area.
heightheight: 100px;Sets the height of the content area.
paddingpadding: 10px 20px;Sets space inside the border.
borderborder: 1px solid #000;Sets the border around the padding.
marginmargin: 10px;Sets space outside the border.
box-sizingbox-sizing: border-box;Makes width include padding and border.

Table 3: Flexbox Properties

TargetPropertyCommon Values
Parentdisplayflex
Parentflex-directionrow, column
Parentjustify-contentflex-start, flex-end, center, space-between, space-evenly
Parentalign-itemsflex-start, flex-end, center, stretch
Parentflex-wrapnowrap, wrap
Parentgap20px (Sets space between children)
Childflex-grow1 (Allows item to grow)
Childflex-shrink0 (Prevents item from shrinking)
Childflex-basis200px, auto (Sets the item’s initial size)
Childflex1 0 200px (Shorthand for grow, shrink, basis)
Childorder-1, 1, 5 (Changes the visual order)
Childalign-selfcenter (Overrides parent’s align-items)

Table 4: Grid Properties

TargetPropertyCommon Values
Parentdisplaygrid
Parentgrid-template-columns1fr 1fr 1fr, repeat(3, 1fr), 100px 1fr 200px
Parentgrid-template-rowsauto, repeat(2, 100px)
Parentgap20px (Space between all cells)
Parentcolumn-gap10px (Space between columns)
Parentrow-gap10px (Space between rows)
Childgrid-column1 / 3 (Spans from line 1 to 3), span 2
Childgrid-row1 / 4 (Spans from line 1 to 4), span 3

Table 5: Common Typography

PropertyExampleWhat It Does
font-family“Inter”, sans-serifSets the font face.
font-size1.2remSets the text size.
font-weight700, boldSets the text boldness.
line-height1.5Sets the space between lines.
color#333, rgba(0,0,0,0.8)Sets the text color.
text-aligncenterAligns text horizontally.
text-decorationnoneRemoves underlines, etc.
text-transformuppercaseForces the text case.
letter-spacing0.5pxAdjusts space between letters.

Conclusion: You Are in Control

CSS is the language of design on the web. It’s a deep and incredibly powerful toolset. While this guide is long, it only scratches the surface of what’s possible.

My advice is to not try to memorize everything. Instead, memorize the concepts. Understand the Box Model. Get a feel for when to use Flexbox (1D) versus Grid (2D). Understand CSS Variables.

From there, you can build almost anything. And for everything else, you have this cheat sheet. Whether you write every line of code by hand or use the powerful visual controls of a platform like Elementor to build beautiful WordPress websites, you are now equipped with the foundational knowledge that separates good designers from great ones.

Frequently Asked Questions (FAQ)

1. What is the difference between em and rem? Both are relative units. em is relative to the font size of its own element. This can lead to compounding issues (a list item with 0.8em inside another list item with 0.8em will be tiny). rem (Root Em) is relative to the font size of the root (<html>) element. This makes it consistent and predictable. Most modern developers prefer rem for fonts and spacing.

2. When should I use Flexbox vs. Grid? The simple answer:

  • Use Flexbox for one-dimensional layouts (aligning items in a single row or a single column). It’s perfect for navigation bars, button groups, or centering a single item.
  • Use CSS Grid for two-dimensional layouts (aligning items in both rows and columns at the same time). It’s perfect for the main page layout, photo galleries, or complex forms.

3. What is CSS Specificity? Specificity is the set of rules the browser uses to decide which CSS rule “wins” if multiple rules target the same element. An ID selector (#my-id) is more specific than a class selector (.my-class), which is more specific than a type selector (p). An inline style (style=”…”) is the most specific of all. Understanding this helps you debug why your style isn’t applying.

4. How do I center a div? This is the classic CSS question!

With Flexbox (Modern way):
.parent-container {

  display: flex;

  justify-content: center; /* Horizontal centering */

  align-items: center;    /* Vertical centering */

  min-height: 100vh;      /* Makes parent fill the screen */

}

.child-div { … }

With Grid (Also modern):
.parent-container {

  display: grid;

  place-items: center; /* Does both horizontal & vertical */

  min-height: 100vh;

}

.child-div { … }

With Margin (For horizontal only):
.child-div {

  width: 500px; /* Must have a defined width */

  margin-left: auto;

  margin-right: auto;

}

5. What’s the difference between display: none; and visibility: hidden;?

  • display: none; removes the element from the page completely. It takes up no space, and other elements collapse to fill its spot.
  • visibility: hidden; hides the element, but it still occupies its original space in the layout. You’ll just see a blank spot where it used to be.

6. What is a “CSS Reset” or “Normalize.css”? Every browser (Chrome, Firefox, Safari) has its own default styles for elements. For example, an <h1> might have a different margin in Chrome than in Safari. A “CSS Reset” (like normalize.css) is a small stylesheet you add to your project first to reset all these browser defaults, ensuring your site looks consistent everywhere.

7. Why should I use min-width in media queries instead of max-width? Using min-width (e.g., @media (min-width: 768px)) supports the “mobile-first” design approach. Your default styles are for mobile, and you add styles as the screen gets larger. Using max-width (e.g., @media (max-width: 768px)) is for a “desktop-down” approach, which is considered an older practice.

8. What is !important in CSS? The !important flag can be added to a CSS declaration to override all other rules, including specificity and inline styles.

p {

  color: red !important; /* This will be red no matter what */

}

You should avoid using !important at all costs. It’s a “brute force” solution that makes your code impossible to debug and maintain. The only time it’s sometimes acceptable is when overriding styles from a third-party library you can’t control.

9. How do I style form elements like checkboxes and radio buttons? These elements are notoriously difficult to style directly because they are rendered by the operating system. The common technique is to visually hide the default <input> (using the .visually-hidden class) and then use its ::before and ::after pseudo-elements (or a <span> helper) to create a new, custom-styled checkbox that you can control. You use the :checked pseudo-class to change its style when it’s clicked.

10. What’s the best way to get started with Elementor? The best way is to download the free version and just start building. Drag in a Flexbox Container, and play with the justify-content and align-items controls. You’ll see all the concepts from this cheat sheet come to life visually. Then, visit the Elementor Library to see how professionals use these properties to build beautiful, responsive sections that you can import directly into your own WordPress site.