cssworkshop.wordpress.com

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.

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.

What does CSS Look Like?

Here’s a CSS document:

The document is made up of declarations. Declarations are style rules that add styling to HTML elements.

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.

• 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).

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.

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…

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

The CSS Panel and Browser Inspectors

Now that you know more about CSS, it’s time to experiment. On WordPress.com, you can add custom CSS by going to Customize → Custom Design → CSS. Self-hosted sites include a custom CSS editor as of version 4.7, at Customize → Additional CSS.

Self-hosted Customizer’s CSS panel

How do you find which elements in your theme to target so that you can write your custom styles? For that, you’ll need your browser inspector, which let you see the HTML and CSS of any web page. Every modern browser has a web inspector — they’re all similar, so feel free to use the one you’re most comfortable with.

Browser inspectors are like opening the hood of a car and examining the machinery inside. You can fiddle with the HTML and CSS of a web page and see your changes in real time. The changes you make in your browser inspector don’t affect the website. They’re visible to you only, and when you reload the page, your changes disappear.

Web inspector in action

CSS Editing with the Help of Web Inspectors

We’ll be moving on to live examples in a bit so you can see in real time how to make CSS Edits using the web inspector. In a nutshell, here is the process:

• Right-click the element whose style you wish to change. In the menu that pops up, select “Inspect Element”.
• Examine the CSS of that element, and make your changes in the web inspector. You’ll get a realtime preview.
• When you have it to your liking, copy the updated CSS changes into the CSS Panel (Self-hosted WordPress: Customize → Additional CSS / WordPress.com: Customize → Custom Design → CSS).
• Save your changes in the CSS panel and reload your site to see the changes.

Now we will have some examples that walk through some common things people change with CSS.

Bonus Reading: CSS Selector Overrides – The Cascade

CSS works a little like genetics. We may inherit the genes for both brown and green eyes, but which color will our eyes be? Likewise, more than one CSS rule can apply to a single HTML element. How does the browser decide which rule to use?

The browser uses what’s called the cascade to choose which rule to display on screen, based on a number of criteria:

• Class selectors override HTML tag selectors.
• ID selectors override both class and HTML tag selectors.
• HTML elements can be nested like china dolls. The more nested an HTML element is, the more specific it is.
• Rules applied to the innermost nested HTML elements override those applied to the outer HTML elements.
• Order matters. Rules that appear later in the CSS document override those that appear earlier.

You’ll see some examples of these in action by diving deeper…