Default WordPress-Generated CSS Cheat Sheet for Beginners

Table of Contents#

1. What Is Default WordPress CSS?
2. Essential Selectors: Core WordPress & Gutenberg Blocks
3. Typography: Headings, Text, and Links
4. Layout: Containers, Spacing, and Sections
5. Forms: Inputs, Buttons, and Search Bars
6. Navigation: Menus and Menu Items
7. Widgets: Sidebars and Widget Areas
8. Responsive Design: Mobile-First Adjustments
9. How to Inspect & Override Default CSS
10. Cheat Sheet Summary
11. References

1. What Is Default WordPress CSS?#

Default WordPress CSS isn’t a single file—it’s a collection of styles from three sources:

a. WordPress Core CSS#

WordPress itself (the software) includes minimal CSS to style core elements like:

• Block editor (Gutenberg) blocks (e.g., paragraphs, headings, images).
• Admin interface (though we’ll focus on frontend styles here).
• Core functionality (e.g., comment forms, search bars).

b. Default Theme CSS#

Every WordPress site uses a theme, and default themes (e.g., Twenty Twenty-Three, Twenty Twenty-Four) come with their own stylesheets. These themes follow WordPress’s design best practices and include CSS for:

• Layout (header, footer, content/sidebar).
• Typography (font families, sizes, line heights).
• Responsive behavior (mobile/tablet adjustments).

c. Plugin CSS (Optional)#

Some plugins add their own styles (e.g., contact form plugins, e-commerce tools). We’ll focus on core and theme CSS here, as plugin styles vary widely.

Key Note: Default CSS is intentionally minimal. WordPress and its themes prioritize readability, accessibility, and flexibility. This means you won’t find flashy animations or complex layouts by default—those are left to custom code or premium themes.

2. Essential Selectors: Core WordPress & Gutenberg Blocks#

Gutenberg (WordPress’s block editor) is the heart of content creation, and it relies heavily on CSS classes to style blocks. Here are the most common block-specific selectors you’ll encounter:

Example: Paragraph Block CSS
Default paragraph styles in most themes look like this:

.wp-block-paragraph {  
  margin-top: 0;  
  margin-bottom: 1.5em; /* Spacing between paragraphs */  
  line-height: 1.6; /* Readable line height */  
}  

3. Typography: Headings, Text, and Links#

Typography is critical for readability, and default WordPress CSS prioritizes clarity. Let’s break down the key elements:

a. Headings (h1–h6)#

Headings use the .wp-block-heading class combined with HTML tags (h1, h2, etc.). Themes typically scale sizes from largest (h1) to smallest (h6).

Default Styles (Example from Twenty Twenty-Three):

h1, .wp-block-heading.h1 {  
  font-size: clamp(2rem, 5vw, 3.5rem); /* Responsive size */  
  font-weight: 700;  
  margin-top: 0;  
  margin-bottom: 0.5em;  
  line-height: 1.2;  
}  
 
h2, .wp-block-heading.h2 {  
  font-size: clamp(1.5rem, 3vw, 2.5rem);  
  /* Similar properties, smaller size */  
}  
 
/* h3–h6 follow the same pattern, decreasing in size */  

b. Body Text#

Body text (paragraphs, lists, etc.) uses a base font size (usually 16px, the browser default) and line height for readability.

Common Selectors & Styles:

body {  
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* System fonts */  
  font-size: 1rem; /* 16px */  
  line-height: 1.6; /* 1.5–1.7 is ideal for readability */  
  color: #333; /* Dark gray (not pure black for eye comfort) */  
}  
 
.wp-block-paragraph {  
  margin-bottom: 1.5em; /* Space between paragraphs */  
}  

c. Links#

Default links are underlined and colored to stand out. Hover/focus states improve accessibility.

Example Styles:

a {  
  color: #0073aa; /* WordPress’s brand blue */  
  text-decoration: underline;  
}  
 
a:hover, a:focus {  
  color: #006799; /* Darker blue on hover */  
  text-decoration: none; /* Optional: Remove underline on hover */  
}  
 
/* "Read more" links in posts */  
.more-link {  
  font-weight: bold;  
}  

d. Blockquotes#

Blockquotes are styled to differentiate quoted text from body content.

Example:

.wp-block-quote {  
  border-left: 4px solid #0073aa; /* Left border */  
  padding-left: 1em;  
  margin-left: 0;  
  color: #666; /* Lighter text color */  
  font-style: italic;  
}  

4. Layout: Containers, Spacing, and Sections#

WordPress themes organize content into logical sections (header, main content, footer) using container classes. These control spacing, alignment, and overall structure.

a. Core Layout Containers#

Example Styles (Spacing):

.site {  
  max-width: 1200px; /* Limits site width on large screens */  
  margin: 0 auto; /* Centers the site */  
  padding: 2em; /* Inner spacing */  
}  
 
.site-header {  
  margin-bottom: 3em; /* Space between header and content */  
}  
 
.site-footer {  
  margin-top: 4em; /* Space between content and footer */  
  padding-top: 2em;  
  border-top: 1px solid #eee; /* Separator line */  
}  

b. Content & Sidebar Layout#

If your theme has a sidebar, it uses classes like .content-area (main content) and .widget-area (sidebar) to create a multi-column layout.

Example (Flexbox Layout):

.site-content {  
  display: flex;  
  gap: 2em; /* Space between content and sidebar */  
}  
 
.content-area {  
  flex: 1 1 70%; /* Main content takes 70% width */  
}  
 
.widget-area {  
  flex: 1 1 30%; /* Sidebar takes 30% width */  
}  

5. Forms: Inputs, Buttons, and Search Bars#

WordPress includes default styles for forms (e.g., comment forms, search bars, login forms) to ensure they’re usable and consistent.

a. Input Fields#

Text inputs, email fields, and textareas share base styles:

Example:

input[type="text"],  
input[type="email"],  
textarea {  
  width: 100%; /* Full width by default */  
  padding: 0.75em; /* Inner spacing */  
  border: 1px solid #ddd; /* Light gray border */  
  border-radius: 4px; /* Rounded corners */  
  font-size: 1rem;  
}  
 
input:focus, textarea:focus {  
  outline: 2px solid #0073aa; /* Blue outline on focus (accessibility) */  
  border-color: #0073aa;  
}  

b. Buttons#

Buttons (e.g., “Submit,” “Search”) use the .button or .wp-block-button__link class.

Example:

.button, .wp-block-button__link {  
  display: inline-block;  
  padding: 0.75em 1.5em;  
  background-color: #0073aa; /* Blue background */  
  color: white; /* White text */  
  border: none;  
  border-radius: 4px;  
  font-weight: 600;  
  text-decoration: none; /* Remove underline from button links */  
  cursor: pointer;  
}  
 
.button:hover, .wp-block-button__link:hover {  
  background-color: #006799; /* Darker blue on hover */  
  color: white; /* Keep text white */  
}  

c. Search Blocks#

The Gutenberg search block uses .wp-block-search for the container and .wp-block-search__input for the input field.

Example:

.wp-block-search {  
  display: flex;  
  gap: 0.5em; /* Space between input and button */  
}  
 
.wp-block-search__input {  
  flex: 1; /* Input takes remaining space */  
  /* Inherits input styles from above */  
}  

6. Navigation: Menus and Menu Items#

Menus are styled to be intuitive and accessible, with classes for the menu container, individual items, and active pages.

a. Core Navigation Classes#

Example: Horizontal Menu
Modern themes use flexbox for horizontal menus:

.main-navigation ul {  
  display: flex;  
  list-style: none; /* Remove default bullet points */  
  padding: 0;  
  gap: 1.5em; /* Space between menu items */  
}  
 
.menu-item a {  
  text-decoration: none;  
  color: #333;  
  font-weight: 500;  
}  
 
.menu-item a:hover {  
  color: #0073aa; /* Blue on hover */  
}  
 
.current-menu-item a {  
  color: #0073aa; /* Highlight active page */  
  font-weight: 700;  
}  

b. Mobile Menus#

On small screens, menus often “collapse” into a hamburger icon. Default themes use media queries and classes like .has-mobile-menu to handle this:

@media (max-width: 768px) { /* Mobile breakpoint */  
  .main-navigation ul {  
    flex-direction: column; /* Stack menu items vertically */  
    gap: 0.5em;  
  }  
 
  .has-mobile-menu .menu-toggle {  
    display: block; /* Show hamburger icon */  
  }  
}  

7. Widgets: Sidebars and Widget Areas#

Widgets (e.g., “Recent Posts,” “Categories”) live in widget areas (sidebars, footers) and have their own default styles.

a. Widget Containers#

Example Styles:

.widget-area {  
  padding: 1.5em;  
  background-color: #f9f9f9; /* Light background */  
  border-radius: 4px;  
}  
 
.widget {  
  margin-bottom: 2em; /* Space between widgets */  
}  
 
.widget-title {  
  font-size: 1.25rem;  
  margin-bottom: 1em;  
  padding-bottom: 0.5em;  
  border-bottom: 2px solid #0073aa; /* Underline for titles */  
}  

b. Common Widgets#

• Recent Posts: Uses .widget_recent_entries; lists post titles with no bullets.
• Categories: Uses .widget_categories; may show post counts in parentheses.
• Search Widget: Inherits styles from the Gutenberg search block (.wp-block-search).

8. Responsive Design: Mobile-First Adjustments#

Default WordPress themes are mobile-first, meaning styles start with mobile layouts and adjust for larger screens using media queries. Common breakpoints include:

• max-width: 768px (tablets/phones).
• max-width: 600px (small phones).

a. Key Responsive Adjustments#

• Containers: .site may lose max-width on mobile to use full screen.
• Typography: Font sizes may scale down (e.g., clamp() for headings).
• Layout: Multi-column layouts (content + sidebar) stack vertically.
• Menus: Horizontal menus become vertical (as shown earlier).

Example Media Query:

/* Adjust for screens smaller than 768px */  
@media (max-width: 768px) {  
  .site {  
    padding: 1em; /* Less padding on mobile */  
  }  
 
  .site-content {  
    flex-direction: column; /* Stack content and sidebar */  
  }  
 
  h1 {  
    font-size: clamp(1.75rem, 4vw, 2.5rem); /* Smaller heading size */  
  }  
}  

9. How to Inspect & Override Default CSS#

Now that you know what default CSS looks like, let’s learn to change it. Here’s a step-by-step process:

Step 1: Inspect Default CSS with Browser Tools#

1. Right-click any element on your site (e.g., a heading) and select “Inspect” (Chrome/Firefox/Safari).
2. In the DevTools panel, go to the “Styles” tab. You’ll see all CSS applied to the element, including default WordPress/theme styles (labeled with the source file, e.g., twentytwentythree/style.css).

Example: If you inspect a paragraph, you’ll see .wp-block-paragraph with margin-bottom: 1.5em.

Step 2: Override Default CSS#

To change a style, add custom CSS that targets the same selector (or a more specific one). You can add custom CSS in two ways:

Option 1: Theme Customizer#

Go to Appearance → Customize → Additional CSS. Add your styles here (they’ll override defaults).

Option 2: Child Theme (Recommended for Major Changes)#

Create a child theme and add custom CSS to its style.css file. This ensures changes survive theme updates.

Key Rule: Specificity#

If your custom CSS isn’t working, it may be due to specificity. WordPress’s default CSS sometimes uses more specific selectors (e.g., .site-content .wp-block-paragraph). To override, use a selector with equal or higher specificity:

Example: To change paragraph margin:

/* Default: */  
.wp-block-paragraph { margin-bottom: 1.5em; }  
 
/* Your override (same specificity): */  
.wp-block-paragraph { margin-bottom: 2em; }  
 
/* If that fails, use a more specific selector: */  
.site-content .wp-block-paragraph { margin-bottom: 2em; }  

10. Cheat Sheet Summary#

Here’s a quick-reference table of the most useful default WordPress CSS selectors:

11. References#

• WordPress Theme Developer Handbook
• Gutenberg Block Editor Handbook
• Twenty Twenty-Three Theme Styles (Default theme CSS example)
• MDN Web Docs: CSS Basics

By mastering WordPress’s default CSS, you’ve unlocked the ability to tweak your site’s design with precision. Remember: start small (e.g., adjusting paragraph spacing), use browser tools to inspect, and always test changes on mobile. Happy styling! 🚀