An introduction to using CSS in themes

Themes are terrific, but sometimes they don’t look exactly as we wish.  If you have a premium or a business account on WordPress.com, you can “tweak” themes with “css” (or cascading style sheets).  Here’s how!

Introducing CSS

Cascading style sheets have been around since the middle 1990s, so we’re talking my language, blogging in the Olden Days! Before there were themes, if we wanted to create a common style of fonts, colors, and layout, we had to know “css” –which is just a little bit more sophisticated than regular HTML.

Themes are largely a kind of “interactive” cascading style sheet (with a number of more complex features).   Themes include an “external” style sheet we don’t see in WordPress.com, but we interact with it when we set our fonts and colors and backgrounds using the theme customizer.  The “cascade” part of cascading style sheets refers to the idea of having a kind of waterfall of style sheets associated with a blog (or website).   There can be several style sheets associated with a single blog page.

Style sheets are simply text documents in which we set up code  with a particular grammar called “statements.”  The browser finds the style sheets and interprets the statements to figure out how to render the page.    Let’s start with an easy example to get the ball rolling.

Creating a custom blockquote

One of the things I really hate about my current theme is it’s plain “blockquote” style.  Bleah.   Let’s say .I want my blockquote to be in a different font, indented, with a nice pale yellow box instead of the current grey one.

Blockquote is an “HTML selector” — an element we can manipulate using style sheets.

We can set the block quote selector to have a certain background color, in this case a cheerful yellow.  I used the W3 school HTML color picker to find the right shade of yellow I want, called #ffffcc.

That’s all I’m going to change at the moment, just to give you a quick look at how this is done.   We’re just going to add this one statement to our current theme.  To do this, we modify a style sheet using the theme customizer.

Adding CSS to your current theme

This shows the CSS menu selected in the Theme Customization side panel

Once we choose to customize the CSS, we open up the CSS customizer.

The customizing CSS screen with the CSS Help button just over the sample page

Note: the link sends you to a WordPress.com help site not nearly as helpful as this tutorial. 🙂

This is the style sheet you can work with.   The items between the slash-asterisk and the asterisk-slash are COMMENTS.  They are not interpreted by the browser as code. Using comments help you remember what statements that you create actually do.

We start our statement with the selector we’re going to be editing, blockquote, and an “open curly brace” or {  , then we go to the next line, to spread out the statement for easy reading.

The CSS customizer will add a tab to indent the text, also a convention so that we can more easily read and debug the code.  Then we add the parameters of what we want to change, in this case “background” and then the HTML color name.

Finally, we go to the next line and enter a closing curly brace } to end the statement.

Screen Shot 2018-01-29 at 5.27.15 PM

Notice how the CSS editor uses line numbers.  Many times, css codes can get to be many dozens of lines long.  The editor also helps by indicating comments are dark brown, the selector name as green, the values as blue!   This  helps the coder catch mistakes like misspellings.

Screen Shot 2018-01-29 at 5.35.05 PM.png

In the editor, the blockquote is still the same boring light blue-grey box we’ve always seen. But when you hit preview, you’ll see the difference.

Getting Fancier

I don’t like that black line for the quote.  What I want is a sans-serif font, 16 point, for the quote text and perhaps a dashed line, in pale gray, instead of the black line.

Screen Shot 2018-01-29 at 8.26.34 PM

Here I’ve added a sans-serif font,  specified the font size and style and created a dashed line, left border with a grey color (that would be the #clclcl; HTML code for light grey).

And here is the example of that change.

Browser support for certain CSS tricks will vary.

What I want to do is create one of those big “quote” marks. I’m having difficulty doing this using the knowledge from the Olden Days.   This is in part because your browser gets a vote–browsers often differ over what CSS tricks they will support.  CSS is largely instructions to your browser–so your mileage will vary.  It’s going to vary for your readers as well.

Another reason I’m having difficulty with this has to do with the use of some advanced “pseudo” elements of CSS that I’m still working on figuring out.

One more trick: Inline Styling

You can also change many aspects of text, including the color of headers, by using css techniques in the body of your WordPress document.  These changes will only impact the one instance of the element (such as a header or a paragraph) but not all instances of that element on all the pages of all your blog posts–which is what happens when you change the style sheet with the customizer.

We have to switch over from Visual editing  to HTML editing to do this kind of css, typing the code directly into the body of the text. Then you can set an “inline style” for just one limited instance, as I did here.

Screen Shot 2018-01-29 at 8.49.46 PM

Here in this next example,  I change the paragraph to green, by setting the style to color:green. Note that I also stopped the style by closing the style setting using the angle brackets, slash, and close-angle bracket syntax.

Here’s the syntax and below it, the output.

Screen Shot 2018-01-29 at 8.54.51 PM

You can set the color, change the font, and make other changes. But some things work, other things not so much, depending on your theme and the way the browser handles the code.

We’ll be talking more about CSS as we’ll also need it for other, more advanced tweaks for themes in the future.

If you’re really geeky and want a thorough introduction to css, you can take a look at this guide from Mozilla that will walk you through just about everything anyone would want to know about css. It’s actually a full class on the subject.

But as I am from the Old School, I’m also going to recommend  the old W3 school guide to CSS.  I find it a bit easier and faster than the mozilla site, but then again, I’m old school. 🙂

Thanks for dropping by! More to follow soon. Ciao! ~Lola

Author: Lola

Recovering academic, real-life, honest to cornflakes anthropologist (Ph.D. and fieldwork and everything), tech-head and social media researcher.

3 thoughts on “An introduction to using CSS in themes

Leave a Reply