What Is CSS and How Is It Used for Customization?

You might recall that CSS is a useful tool for designing and customizing your website, but what is CSS?

CSS, or Cascading Style Sheets, is a method of adding stylistic instructions for your website to its back-end code. Before we dive any deeper, let’s define code and discuss what it does.

Website code is the language that tells your web browser exactly what a website should look like and what it should do. The most common coding language is HTML (hypertext markup language), a form of code that indicates which elements are present on a webpage. HTML specifies, for example, where a heading is, where each paragraph breaks, and how big an image should be.

CSS is an extension of HTML that outlines specific stylistic instructions. CSS is used to specify the color of a heading, or what font your content should be written in. If HTML is the structure of a house, then CSS is the paint, the size of the windows, and the width of the hallways. CSS allows you to customize the look of your website and apply stylistic decisions across its entirety. It ensures that your site’s appearance aligns with your brand voice.

The elements of CSS

Before we walk through the steps of adding customized CSS language to your website, let’s define a few terms. When talking about CSS, there are three main components that you need to understand: selectors, properties, and values.

A selector uses HTML code to indicate the part of your website that you want to style. For example, the HTML code for a paragraph is “p.” If you want to use CSS to change the style of your paragraph, “p” becomes your selector.

Properties and values are then used to apply stylistic instructions to the selectors. If you want your paragraphs to be written in red text, the property will come first and will indicate the specific attribute that you’re trying to change (color in this case). The value is what you want to change that attribute to, which is red in our example.

Written out, your CSS code for a red paragraph of text will look like this (note the unique punctuation used in CSS):

p {
color: red;
}

Any time that the “p” is used within your site’s code, the text will appear red. If you want to further familiarize yourself with the basics of CSS, WordPress.com offers several useful resources and guides.

Using CSS with WordPress.com

There are two ways to add CSS customization to your WordPress.com site. The first method involves inserting the CSS language directly into your HTML code. To access it, navigate to the HTML view within the WordPress.com editor. Here, you can insert the relevant code snippet wherever you want the CSS style to appear. If you take this route, you’ll need to insert the CSS code snippet into every page and post where you’d like the style to appear.

For site-wide customization, you’ll need access to the Custom Design feature. This is available through WordPress.com’s Premium and plugin-enabled plans. To get to it, navigate to Appearance > Customizer > CSS.

The following examples highlight how to style your site using CSS.

Changing text color with CSS

If your theme uses yellow subheaders by default but you want them to be green, you can change the color using CSS. The HTML code for a subheader is “h2,” (this is your selector). The property that you’re changing is the color, and the value that you’re changing it to is green. Therefore, you will insert the following code into the CSS panel within the Customizer:

h2 {
color: green;
}

You can use this property to change the color of the body text, as well:

body {
color: blue;
}

Changing font and font size

If your theme defaults to a font that you don’t like, you can change it by using the “font-family” property:

h2 {
font-family: Helvetica;
}

Using the above code will change the font of your sub headers to Helvetica; however, there are many other fonts to choose from.

Changing the font size is another option. In CSS, font size is managed with percentages. The code below represents a 250 percent sub header change:

h2 {
font-size: 250%;
}

With the following text, you can also change the font and the font size at the same time:

h2 {
font-family: Helvetica;
font-size: 250%;
}

Additional text properties that you should know about include font-weight (which determines if a font is bold or not), font-style (controls if a font is italicized or not), and text-decoration (can be used to add an underline, an over line, or a strikethrough).

Changing text spacing with CSS

Sometimes your font will look great, but the letters will appear too close together. To combat any spacing concerns, HTMLdog offers tips on how to change the text spacing using CSS. If the letters look squished, use the following:

p {
letter-spacing: 0.5em;
}

From here, you can tinker with the number value until the spacing between letters looks right to you.

Getting started

So, what is CSS? By now you can answer this question and then some, as you’ve read enough information to get started. Don’t forget: you can always post additional questions to the WordPress.com forums.