Pages Navigation Menu

Book Reviews, Author Features, Recipes & Home of Fourth-Wall Fridays

Fresh Souls Welcome! Simple CSS for Busy Bloggers – Part 1

Fresh Souls Welcome!

You’ve been meaning to brush up on your CSS. Everyone keeps saying how important it is. You know you ought to understand it, and eventually you’re going to have to just break down, move to Tibet, climb a mountain, and swear an oath to spend fifteen years curled around the base of a Himalayan Pine doing nothing but reading arcane CSS manuals the thickness of unabridged dictionaries and struggling to scratch notes in the scree.

Meanwhile, I’ll try to give you enough to help get you by. This won’t bring you up to full speed by any means, but if you bookmark this post and refer back to it as you progress I promise that you will one day wonder how such-and-such-a-thing didn’t make sense to you Once Upon a Time. And, if you can stick with me through this, I’ve got a little tutorial for you on how to make your pages shine with the addition of Google web fonts!

I Just Want to Be a WordPress Blogger, Damn it!

We all get busy. As a professional designer, I often take for granted the opportunities I’ve had to follow the modern trends in styling. I find myself feeling grumpy with clients when they’ve just laid out a slew of money for a fresh design, I’ve invested the time in trying to train them how to use the theme I developed for them, and the first thing they do is copy-paste some text straight from Word into the text of an article. Usually the next thing they do is call or write me in a state of borderline panic.

Truth be told, web design is a huge area of knowledge. I’m pretty specialized – having confined myself more or less to PHP, HTML, CSS, Javascript, and SQL – and I can’t stay up-to-date in all of them at once. Not to embarrass professional web designers the world over, but I use Google on a daily basis to remind myself of the proper syntax for some obscure feature or function that I haven’t used in months. We all need to do it.

This article assumes that you have enough of a working knowledge of HTML to read the source of a web page and know more or less what you’re looking at. If you don’t feel confident enough to find and modify text in an HTML document, you should start by exploring that language rather than CSS. There are plenty of sites which do a much better job than I could of teaching you HTML - here’s one from w3schools.

Cascading Style Sheets

Deep Breaths… you CAN do this!

I’ve written a number of articles on CSS over the years. I’m more fond of it than any other language, and here’s why:

  • It’s simple — The rules governing CSS syntax (the way you actually write your instructions to get the styling you want) are incredibly simple compared to other languages.
  • It’s relaxed — CSS is very forgiving. If you flub a line of code by fat-fingering the name of a property or forgetting to leave off with a semicolon it’s not going to break the entire world.
  • It’s (mostly) plain English — CSS property names are generally terms which describe exactly what you’re trying to control, so it’s fairly easy to determine what property you need to manipulate and locate the proper syntax to make your desired value changes.

The full CSS 2.1 Specification is a hell of a document. I don’t recommend you dive into it and try to just plow your way through. I will try provide some links to direct you to additional information that’s a bit more accessible, should you feel the need for it at any point.

Definitions

I didn’t want to have to do this, but if you’re going to learn anything from me I can’t just make up words for things. I’m going to be forced to use the proper terms to refer to the various parts of CSS. Please bear with me for a moment. I’ll try to keep it as painless as possible. First, let me just give credit where credit is due.

Rule Sets, Declaration Blocks, and Selectors
From the CSS 2.1 Specification – Section 4.1.7 – Rule Sets, Declaration Blocks, and Selectors [citation]:

A rule set (also called “rule”) consists of a selector followed by a declaration block. [...] A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations. [...] The selector [...] consists of everything up to (but not including) the first left curly brace ({). [...] When a user agent [ed. basically, geek jargon for a web browser] cannot parse the selector (i.e., it is not valid in CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

 

Declarations and Properties
From the CSS 2.1 Specification – Section 4.1.8 – Declarations and Properties [citation]:

declaration is either empty or consists of a property name, followed by a colon (:), followed by a property value. [...] A user agent must ignore a declaration with an invalid property name or an invalid value.

 

A POX on his HOUSE!

“Oh, holy shit! Is this guy serious?” Again, I’m sorry. Please allow me to soften the blow by offering the following:

body {
	font-family: "Book Antiqua", Times, serif;
	color: #000033;
}

In this example, the selector is body, which corresponds to the HTML body tag (the entire document contents). We can also clearly see the curly braces enclosing thedeclaration block. The properties we’re modifying via those two declarations are the font-family (which should be fairly explanatory if you look at the value following the colon) and the color (which always refers specifically to font color). The net effect of this CSS in a vacuum would be to set the font for an entire page to Book Antiqua (or, if a user didn’t have that font, to Times or to fail over to the user’s default serif font) and to color that text a deep blue.

A Word About Selectors

There are a couple of ways to create custom selectors. We’re going to see these methods in action in a moment, so I’m going to describe them up front. Classes and IDs are two ways to be able to apply a rule to any specific object, and they’re among the most useful tools in CSS.

  • Class — A CSS Class is prepended by a period (.). Classes are useful for specifying styling for objects which might appear multiple times on a page (i.e., a special header style, special image formatting, etc.) but which you only want to apply in certain circumstances, as opposed to every single image or every single H3tag.
  • ID — A CSS ID is prepended by a hash symbol (#). An ID is properly used only once on a single page, but the same concept applies. There are cases where you have a certain container (like ‘#sidebar’, below) that needs to have styling applied to it, and assigning the ID is a way to control that specific div element.

Let’s say, for instance, that we wanted to automatically create a drop shadow on our images in selected cases. Using CSS could save us a ton of time having to use Photoshop to modify every single image that crosses our desk. We would add the following to the end of our theme’s ‘style.css’ file (found in the theme’s main folder under /wp-content/them/{your theme}):

img.dropshadow {
	margin: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
}

Oh, now you've done it! You shouldn't have cursed at your computer like that...

The img.dropshadow selector denotes any image tag with a class attribute of ‘dropshadow’. Note that an element can be a member of multiple classes. If you need to add one just insert a space after the last class listed and enter the name of the one you’re adding. So, any time I insert an image into a post, I can add ‘dropshadow’ to the image’s class attribute to automatically give the image a drop shadow if I so desire.

The box-shadow property is considered experimental, and is slated for inclusion in CSS 3, but the current generation of browsers all support it in one form or another. Astute readers will have noticed that I specified three different box-shadow properties. This is because Internet Exploder, Firefox, and Safari/Chrome currently have different ways of implementing the box-shadow property. Fortunately, with the relaxed rules I mentioned above, a browser will use the properties it recognizes and ignore the ones it doesn’t, and so the triumvirate definitions above will make sure that everyone is invited to the party. For more information on the box-shadow property, check out this awesome article at css3.info.

Here are some additional resources to help improve your CSS education:

 

Enhanced by Zemanta

5 Comments

  1. You do know that is a Jain God, right? The images you have up there?
    Show me some love!My Profile

  2. @ritesh, What do you mean, Jain God?
    Show me some love!My Profile

  3. Hi Kriss, you are such a star. I haven’t gone through the whole post yet, but aim to work my way through it as I need it. How amazing of you to share your knowledge like this, utterly awesome! Hope you’re edging back to 100% mate, take care and catch you next time. Such a cool blog! :)

  4. I am so bookmarking this. I just moved to WP last week, so I’m trying to learn everything. I know enough to get by, but I need to know it all. lol.
    Show me some love!My Profile

  5. You are indeed a “Cabin Goddess”! Sharing your insight like this will help so many people that are willing to take the time to learn. Kudos!
    Show me some love!My Profile

Trackbacks/Pingbacks

  1. Plagiarism, Dog on car roof, Kid handcuffed, and Other Stuff on My Mind « Anita's Desk… - [...] with us, as well as many other interesting things including reviews, recipes, and even a little CSS.  Why has …

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge