WHAT IS CSS?

CSS stands for Cascading Style Sheet. Where HTML is what defines the structure and content of a web page, a Cascading Style Sheet is a web document that allows you to change the appearance of the HTML.

CSS allows you to change the size, style, font, and color of text; margins and padding; background colors and border styles. It can also be used to position elements on a page (but we’ll leave that for another day).

ONE BIG ADVANTAGE OF CSS IS CONSISTENCY

The best thing about CSS is that is allows you to make global style changes that affect every instance of a certain element throughout your blog or website so that you don’t have to make these changes at the individual page level. This saves you a ton of time when it comes to redesigning your blog.

Here’s an example of what I mean: as we learned last week, the page title on a blog page is defined by an HTML element called an H1 (heading 1). By default, the browser displays an H1 as extra large, bold, black text, much like we saw in the PAWS example.

If we want to change the color, font and size of all the H1’s on our blog to keep consistency throughout, all you need to do is define what all H1’s will look like in your CSS.

Sometimes different browsers may display slightly different default styles. Using a style sheet to define what a specific element should look like can keep the look of your blog consistent from one browser to another as well as one device to another.

CSS for absolute beginners plus a free CSS Cheat Sheet!

CLICK TO TWEET

HOW DOES CSS WORK?

THE CASCADE

A very important piece of CSS is the “Cascading” part. The browser reads style definitions from top to bottom in a style sheet. This means that a style you define lower in the style sheet will override any previous styles defined earlier in the style sheet.

We’ll get into that in a moment.

You can also have a style sheet override another style sheet. This is how we are able to override predefined styles from our blog themes or plugin widgets, as our custom style sheet is usually the last one read by the browser.

Related: How to Edit the CSS in your Blog

HOW CSS IS APPLIED

CSS is applied to HTML elements in a web page by declaring specific styles for each element. A style declaration looks like this:

selector {property: value;}

Let’s look at each of these pieces separately:

Selector

The selector is the piece of content that we want to target and style. It is either an HTML element or a Class Name.

When defining an HTML element, we use the tag name without the opening and closing bracket. For example, the <p> (or paragraph tag) would simply be:

p

A Class Name always begins with a dot. For example,

.big-font

We’ll get more into classes in a bit.

Property

Properties and their respective values always live within curly braces:

p {}

Properties are predefined terms within CSS that all web browsers understand. They are things like:

font-family, font-size, color, etc.

p {font-family:     font-size:     color:}

A property is always followed by a colon (:)

Value

The value is the particular style or variable you choose to assign to a property. For example:

p {font-family: Arial;font-size: 16px;color: gray;}

A value is always followed by a semi-colon (;)

So the example above tells the browser that we want all of our page titles (or any element surrounded by an <p> tag) to be displayed in Arial font at 16 pixels in size and in the color gray.

Pretty easy, right? Let’s do another one.

a {color: pink;font-weight: bold;text-decoration: none;}

This example tells the browser to make all links (anchor tags that look like this: <a>) within our blog the color pink, bold, and not underlined. (Browsers by default display links in blue with an underline).

text-decoration: is a predefined property that all browsers understand. I wish it was something easy like underline: but it’s not. After using CSS for a while, you begin to memorize the more common properties. But to make it easy for you, I’ve created a cheat sheet of all the most commonly used properties and their available values! Download your free CSS cheat sheet here!

Make sense so far?

Ok, I should make a disclaimer here.

In these last two examples, I used names for the colors instead of hex codes. While these are perfectly valid and will be read just fine by any browser, it really is best to use hex color codes or RGB values (explained in the cheat sheet) in your CSS. This will allow you to use very specific colors from your branding. Hex color codes look something like this:

#1bded1 

You can find hex colors in any color picker tool or image editing tool.

DEFINING MULTIPLE ELEMENTS

Ok, let’s do a little shorthand. Let’s say you want to use the same font and color to define your page titles and subtitles but display them in different font sizes (a common style request). We could define each HTML element separately like this…

h1 {font-family: Verdana;font-size: 24px;color: green;}h2 {font-family: Verdana;font-size: 20px;color: green;}h3 {font-family: Verdana;font-size: 18px;color: green;}

…but since all three tags share the same font-family and color values, that creates a lot of repetition. Instead we can define multiple HTML elements together be separating them with commas, like this:

h1, h2, h3 {font-family: Verdana;font-size: 24px;color: green;}

Now in order to change just the font-size of the h2’s and h3’s, we can override the font-size by defining them just below:

h2 {font-size: 20px;}h3 {font-size: 18px;}

That’s how the cascade works! There’s no need to redefine the font-family and the color because they’ve already been defined up above. This also makes it easier in the future if you decide to change your font to something else. You only need to change it once instead of three times!

Either way is correct because the browser will understand both methods, but

a) it’s quicker for you to write and edit version 2 and
b) it helps your CSS to load faster because you’re keeping the file size smaller by cutting out the repetition.

OTHER ELEMENTS

We can style more than just text in our CSS. We can define the look of a widget or image for example. Let’s say you want a black border around all your images. Remember our <img> tag? Here’s how we do that:

img {border-width: 1px;border-style: solid;border-color: #000000;}

This will add a one-pixel-width, solid, black border around all your images.

Related: How to Create a CSS Ombré (gradient) Background for Your Blog

CSS CLASSES

Now let’s say you didn’t want certain images on your web page to have a border on them, like your icons for example. We can add a class to those elements in the HTML to specifically target them. We add a class like this:

<img src="image/twitter-icon.png" class="icons" />

Note that there are NO spaces between the word class, the equal sign, or the double quotes.

You can name a class whatever you want, you just want to name it something that makes sense. Also note that there are never any spaces in class names.

In CSS, all class names begin with a dot. Now we go back into the CSS and add the following after the previous image style (defined above) so that it’s overridden:

.icons {border: none;}

This will tell the browser to only apply this style declaration to image tags with the class “icons” added to it.

You can actually add this class to any HTML element that you don’t want a border around.

Bloggers should know the basics of CSS. Learn it now with this free cheat sheet for newbies!

CLICK TO TWEET

NESTED CSS STYLES

HTML tags can be nested within other HTML tags. For example, a bulleted (or unordered) list looks like this:

<ul><li>list item number one</li><li>list item number two</li><li>list item number three</li></ul>

Now let’s say we want all our list items (li’s) in a list to be italicized. We would define it like this in the CSS:

li {font-style: italics;}

But what if we wanted to target a particular unordered list, not all of them? We could do that by adding a class to our list items:

<ul><li class="slanted">list item number one</li><li class="slanted">list item number two</li><li class="slanted">list item number three</li></ul>

This could get VERY cumbersome if we had 100 list items! So instead of adding a class to every <li> in our list, we can very easily do this by adding our class to the <ul> tag instead:

<ul class="slanted"><li>list item number one</li><li>list item number two</li><li>list item number three</li></ul>

But now we need a slight change to our CSS. Since the class is applied to the parent element of the <li> tag, this is how we handle that:

.slanted li {font-style: italic;}

Do you see what I did there? I added the class name, then a space, THEN the li tag. This tells the browser to italicize ALL li tags within the class named “slanted.”

Related: How to Make Your Text Appear Letterpressed with CSS

TROUBLESHOOTING AND COMMON SYNTAX ERRORS

Sometimes after editing your style sheet, you might get an error or find that a particular style definition is not working when you refresh your browser window. Oftentimes, these are caused by syntax errors.

Browsers can be very particular when it comes to proper syntax and one little mistake can throw everything off. If this happens…

• Check your style sheet for missing semi-colons, spelling errors or missing opening and closing curly braces.
• Did you forget the dot before a class name or add a dot before an HTML element?
• Are there commas between multiple selectors?

Your error may be in your HTML:

• Did you follow the word ‘class’ with an equal sign and no spaces?
• Did you surround the class name with double quotes?
• Is the class name spelled exactly the same in the HTML as it is in the CSS?