css sheet

What is CSS?

CSS Stands for Cascading Style Sheets. It’s a language that describes the visual appearance of an HTML document.

You can use the Customizer’s Additional CSS/Custom CSS panel to change the appearance of your theme on both self-hosted and WordPress.com sites.

How do HTML and CSS Relate in a Theme?

In simplest terms, the pages of your website are HTML documents. HTML (Hypertext Markup Language) is a language used to create the structure of a website. An HTML document is made up of elements like paragraphs, headings, images, lists, and divs. These elements form the foundation of your website, much like the foundation of a house.

Example of HTML.

Example of HTML.

CSS provides styling to your HTML elements, with colors, font faces, spacing, backgrounds, and more. It’s like the interior design of a house.

WordPress themes are a combination of HTML and CSS. Think of them like houses (HTML) that are already decorated (CSS), ready for you to move in with all of your belongings (your posts, pages, photos, videos). You can override the existing CSS of your theme with custom CSS to make it yours. For example, you can use CSS to make your post titles green.

Anatomy of a CSS Declaration

With declarations, we can target HTML elements to add style to them. Declarations live inside declaration blocks.

Anatomy of a CSS Declaration Block.

Anatomy of a CSS Declaration Block.

  • Selector – This is the HTML element that we’re targeting. It can be an HTML tag, or it can be an ID or a Class (more about those later). The selector in this example is the anchor tag.
  • Declaration Block Start – An open curly brace { marks the start of a declaration block.
  • Property: This is what we’re changing – the text color in this example. #ffffff is the color code for white.
  • Property/Value Separator: The colon : appears after the property.
  • Value: This is the value of the property. In this example, it’s white.
  • Declaration: The property/value pair combined is the declaration, indicated by the orange box in the above diagram.
  • Declaration Separator: The semi-colon marks the end of the declaration.
  • Declaration Block End: A closing curly brace } marks the end of a declaration block.

Declaration blocks can contain multiple declarations and selectors:

Declaration blocks with multiple declarations (top) and multiple selectors / declarations (bottom).

Declaration blocks with multiple declarations (top) and multiple selectors / declarations (bottom).

All About Selectors

Selectors are what you use to target specific HTML elements to style. There are three types of selectors:

Tag An HTML tag such as h1 or p.
Class A class attribute of one or more elements, such as:

<p class="class-name">Sample text.</p>.

Referenced in CSS with a “.” before it.

ID An id attribute of a unique element, should only be used once, such as:

<section id="first">Sample header.</section>.

Referenced in CSS with a “#” before it.

The above table is from CSS Basics.

Selectors illustrated

Types of selectors: HTML tag, class, and id, and how they're used in HTML.

Types of selectors: HTML tag, class, and id, and how they’re used in HTML.

Remember this…

When you’re first learning CSS, here are the most important things to remember about selectors:

  • ID selectors use a “#” and may only be used for one element.
  • Class selectors use a “.” and can be used for more than one element. Classes are used for styles that repeat throughout the theme.

A quick exercise follows, if you want to dive deeper…
Dive Deeper

CSS Properties and Values

Properties and Values are the actual styles you can change. CSS has a pre-defined set of properties, and each property has pre-defined values you can use. Over time, you’ll become familiar with the properties and their values. See the resources section for primers that go deeper into CSS properties and their values.

Here is a list of common properties:

  • background
  • background-color
  • color
  • display
  • font-family
  • font-size
  • font-weight
  • height
  • line-height
  • margin
  • padding
  • position
  • text-decoration
  • text-transform
  • width
  • z-index