Learn CSS – A beginner’s guide for bloggers

I love it when bloggers and websites owners are interested in learning how to customize their site.   One of the most frequent questions and “calls for help” I receive are questions about CSS.   Generally these requests are from bloggers interested in doing a little customization of their sites on their own and who are interested to learn CSS and HTML on their own.

Just last week, Nikol Murphy was asking for some CSS help on her site, Talking Moose Media and I offered my assistance to help her out.  Nikol wasn’t looking to have me do it for her, she wanted to learn it.  After working with Nikol for a bit, I realized that I should probably write up an article to help people learn CSS basics.   This article certainly won’t make you into a CSS Pro, but I do hope it helps you understand basic CSS and give you enough information to help you make basic CSS changes to your site or blog.

Learn CSS by looking at other site CSS files

One of the best ways to learn CSS and learn how other sites are using CSS is to use Chrome’s built in developer tools.   I’ve written an article on using Chrome’s developer tools before, so I’ll only offer this section as a basic refresher.  If you aren’t running Chrome, you can get it here.

Once you have Chrome up and running, navigate to a site, either yours or another and on a Mac press Option+Command+i, or on a PC press Ctrl+Shift+i.   A small window will open up in the lower portion of your browser that looks like this:

On the left side you’ll see the site’s HTML, and on the right side you’ll see the site’s CSS code.   To look at a particular element’s HTML and CSS, click the magnifying glass in the lower left hand corner, then in the upper portion of your browser (the area showing the webpage), hover around.  Chrome will highlight different HTML areas on the page.  Once you find the element you want to look at, left click.  In the lower pane, Chrome will show the HTML and the CSS for that HTML for you.

One of the really slick things you can do with the developer tools is edit the CSS “on the fly”.  Over the right hand section, find a CSS element towards the top and change it by clicking on it and entering a new value.  When you press enter, the browser section above will show your change.  Don’t worry, it’s only local to your browser, but this is a great way to get the CSS right before you actually place it in your CSS file.   You can even add new CSS properties by clicking inside the {}.

I’d encourage you to play around with it, using the developer tool is one of the best way to learn CSS.  There are also some other really great tools built into Chrome developer tools as well, but I’ll save those for another day.  A couple of important things about the inspector tool:

• The HTML element highlighting isn’t always exact as I would like, so sometimes you have to just get close to the HTML element you want, then use the HTML window to goto the precise HTML element you want to look at manually.
• The CSS on the right side is from top to bottom, meaning the items at the top take precedence over the items further down.

What is CSS?

CSS stands for Cascading Style Sheet.   CSS is tightly coupled with HTML, and each depends on the other to create a nice looking web-page.

HTML defines the structure of your page.   Let’s use humans as analogy.   All humans have a head, 2 arms, a body, and two legs.   These things combined, define the structure of a human.   But, each person looks different right?

That is where CSS comes.  HTML defines the structure of a page, but the CSS defines how each of those page elements looks.

One of the great things about using HTML and CSS together is that by just changing the CSS, you can create a very different looking page without any HTML changes.

How does CSS work?

To understand how CSS works, you need to understand a little about how a website works and what a webpage really is.

When you access a webpage from your browser, your browser actually initiates a connection with a piece of software running on another computer out on the internet.  This computer is a special computer, generally called a “webserver”.   That webserver knows, based on the type of request your browser is sending, which page to return.   That page is stored more or less as a HTML file on that webserver.  Most HTML pages contain a reference to a CSS file that tells the browser how to make that HTML page look.

Going back to Chrome’s developer tools, pull up and inspect a webpage again.   Find an HTML tag, like H1, H2, P, or A.   You’l most likely note that some of those tags contain attributes named ID and/or CLASS.  Here’s an example:

<p class="blue" id="special-paragraph">This is some sample paragraph text.</p>

The ID and CLASS attributes tell the browser that there may be some CSS for this HTML element, and thus the browser will go look in the referenced CSS file for them.

The difference in ID and class is subtle:

• An ID can only be used once.  In the example above, no other paragraph can have the ID “special-paragraph”.
• Classes can be used over and over again by elements within the page.

The real difference?   ID allows us as designers to target a specific HTML tag and make it unique to all other tags.   Classes allow us to define CSS that is shared across multiple tags.   This whole concept is a bit difficult to grasp conceptually, but once you actually start creating some CSS you’ll “get it” pretty quickly.

The point you really need to walk away with here is that the ID and CLASS attributes tell the browser what CSS elements to use when rendering an HTML tag.

CSS Basics

Let’s focus on the CSS file for a bit.   A CSS file is similar to an HTML file, in that they are both files that contain some text that tells the browser what to do.   CSS is very different looking than HTML though, and frankly CSS is a bit cryptic in my opinion.

Going back to our same “special-paragraph” HTML above, let’s look at what some CSS for that paragraph might look like:

#special-paragraph {
     font-size: 14px;
     font-weight: bold;
}
.blue {
     color: blue;
}

First, note that the ID name used in the HTML has a # symbol in front of it in the CSS.  ID names (called selectors in CSS) are always proceeded by a #.  While class selectors are always preceded by a period.  That is exactly how the browser knows how to style the tag.  If the browser is working on showing the paragraph, it sees the id=”special-paragraph”, and then looks in the CSS file for the #special-paragraph section.  Same with class=”blue”, it looks in the CSS for the .blue section.

After the selector, and inside braces is where the CSS properties are declared.  CSS properties and their values tell the browser how to render the particular HTML element.   Properties are are made up of a property name, followed by a colon, followed by a value and always end with a semi-colon.

In the CSS declaration above for the selector, #special-paragraph, the CSS properties tell the browser to make the font 14 pixels in height and to bold the text.

CSS has the term “cascading” in it’s name, and for good reason.   CSS selectors and properties start at the top of the file an flow down.   What this means is that you can over ride prior selectors and properties further down in the file.  You generally want to avoid that and have your selectors declared once in one CSS file, but it’s something you will want to be aware of.

Cascading really becomes useful when your CSS is scattered across multiple files or when you’re overriding CSS from say a parent theme.   That whole topic is a little more than I want to get into here, but I did want to mention this concept for your awareness so it doesn’t trip you up.

CSS Properties

You could literally fill a book with the many different CSS properties.  Thus it would be far too exhaustive for me to discuss them all.   I will try to hit on a few key properties that I personally find myself using more frequently than others, and also the one’s my clients seem to ask me the most about.    A more exhaustive list with tons of detail can be found on the W3 Schools site.

Background

The background selector is used to set the background of an HTML element to either a color or image.  A typical use looks as follows:

p {
     background: #cccccc url('someimage.jpg') no-repeat scroll center; 
}

This background selector would set the background color of all paragraphs to a light gray (#cccccc), set the background to an image named someimage.jpg.  The image would no be repeated and would be centered.   If the paragraph in this case was larger than the image, you would see the image on top of a black background and the paragraph text on top of both the black background and the background image.

CSS often provides one property that combines many property into one single statement, and background is an example of this.  The same thing could also be accomplished by doing:

p {
     background-color: #cccccc;
     background-image: url('someimage.jpg');
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: center;
}

Both declarations do the same thing, and it’s really a matter of which style you prefer.  I prefer the single statement, as it’s a cleaner and smaller.

Border

The border property allows you to place a line based border around an HTML element.  Here’s an example:

p {
     border: 2px solid black; 
}

This CSS statement would place a black border around all 4 sides of the paragraph that is 2px wide.  The border would be a solid line.  Border also has an alternative syntax that lets you use multiple properties:

p {
     border-width: 2px;
     border-style: solid;
     border-color: black; 
}

Margin/Padding

Two of the most common CSS selectors you will use are margin and padding.

Margin specifies the amount of spacing outside of the HTML element.  Padding specifies the amount of spacing inside the HTML element.

Here is a an example of margin and padding:

p {
     margin: 20px 10px 0px 10px;
     padding: 20px;
}

The above margin statement tells the browser to put a margin around the paragraph element of the top 20px, right side 10px, bottom 0px, and left 10px.  The numbers go clockwise from the 12:00 position.

The padding command tells the browser to put a 20px padding inside the paragraph element on all sides.   The padding selector can also use 4 numbers like the margin command and the margin selector can use a single number like the padding selector.

Font

Another common set of CSS selectors you’ll use are for controlling fonts.  Here’s an example of a few of the common font selectors:

p {
     font-size: 18px;
     color: blue;
     font-weight: bold;
}

The first selector, font-size is used to specify how large the font is.  Different fonts look differently at various heights, so you’ll need to play around with this value to get it right.  Generally most blog text is around 12-14px and most headings are 18px or larger.

The color selector really isn’t a “font” selector per say, but sets the foreground color color used for the HTML element.  In the case of a paragraph, that’s the text.   For the property value, you can either use any of he predefined colors (like red, blue, white, green, etc) or you can use hex values for far more control.  Most designers use the hex codes.

Font-weight basically controls if the font is bold or not.   The selector is a little more flexible than that, but 99% of the time you’ll see it used just as in the example to bold the font.

Float

Many times when viewing a modern webpage, you’ll see DIV tags in the HTML.  DIV tags are basically boxes that contain other HTML tags.  So for example, if I want put a box on my page that contains my name, image and a few paragraphs about me, I would use a div tag, as follows:

<div id="aboutlarry">
     <h3>Larry Deane</h3>
     <img src="larry.jpg" />
     <p>Larry knows HTML and CSS, blah blah blah</p>
</div>

Now, if I want set a background on all of the elements within that DIV, I can do that by using the “aboutlarry” selector.   DIVs are very powerful tools for laying out websites.

Ok, so back to float.  By default, when that DIV tag shows, it will render exactly where it occurs.  Which may be fine, but you may want to have elements after it line up next to it.   A really good example of this is if I wanted to wrap some article text around the “aboutlarry” DIV.   If I didn’t use float, the “About Larry” box would just render right in the middle of the text.

BUT, if I use a float: left;, the text will display to the right of my “About Larry” box.   The opposite occurs if I use a float: right.  Here’s an example of a float: left on the aboutlarry selector:

#aboutlarry {
     float: left;
}

Floats can get a little tricky sometimes, but hopefully this gives you a good overview of how they work.  Using floats in your CSS can really be important to getting your site laid out like you want.

Wrapping Up

I’ve only begun to scratch the surface of CSS and all of the available selectors.  My intent though was to present you with some basic CSS knowledge to help you learn CSS and get started with CSS on your blog.

I would encourage you to play around using the Chrome developer tools and change the CSS settings so you can see what impact they have on your blog.  That is one of the best ways to learn.  Even though I know CSS, I often use the developer tools to work out the CSS, then paste it over into the CSS file once it’s working.

Good luck, and if you ever have any questions, just catch me over on Google+ or contact me here on this blog and I’ll be more than glad to help you out!