WordpressConceptBeginner · 3 min read

What is style.css in WordPress: Purpose and Usage Explained

style.css in WordPress is the main stylesheet file that controls the visual appearance of a theme. It contains CSS rules that style the website and also includes important theme information in its header comments.

⚙️

How It Works

Think of style.css as the outfit your WordPress website wears. Just like clothes decide how you look, this file decides how your website looks—colors, fonts, spacing, and layout. When WordPress loads a theme, it reads this file to apply all the style rules to your pages.

Besides styling, style.css also acts like an ID card for the theme. At the top of the file, there is a special comment block that tells WordPress the theme's name, author, version, and other details. This helps WordPress recognize and manage the theme properly.

💻

Example

This example shows a simple style.css file with theme info and some basic styles.

css

/*
Theme Name: Simple Theme
Theme URI: https://example.com/simple-theme
Author: Jane Doe
Author URI: https://example.com
Description: A clean and simple WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simple-theme
*/

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 0;
  padding: 0;
}
h1 {
  color: #0073aa;
  text-align: center;
  margin-top: 2rem;
}

Output

The website background becomes light gray, body text uses Arial font in dark gray, and all <h1> headings appear centered in blue color.

🎯

When to Use

You use style.css whenever you want to change how your WordPress site looks. This includes customizing colors, fonts, spacing, and layout to match your brand or style preferences.

It is essential when creating or modifying a theme because WordPress expects this file to exist and contain the theme's style rules and metadata. Without it, the theme won't work properly.

For example, if you build a custom theme from scratch or create a child theme of an existing one, you edit or add a style.css file to control the design. It’s also the place to add responsive styles so your site looks good on phones and tablets.

✅

Key Points

style.css is the main CSS file for a WordPress theme.
It contains both style rules and theme information in a comment block.
WordPress uses it to apply styles and recognize the theme.
Editing this file changes the website’s look and feel.
It is required for every WordPress theme to function correctly.

✅

Key Takeaways

style.css controls the visual style of a WordPress theme.

It includes a special comment block with theme details WordPress reads.

Every WordPress theme must have a style.css file.

Use it to customize colors, fonts, layout, and responsive design.

Editing style.css changes how your website looks.