Learn About Class and ID Selectors | CSS For Bloggers: Part 2. - The Link Medic

CSS For Bloggers: How to Style Your Text and Links

Welcome back bloggers, in our last lesson: CSS For Bloggers: How CSS Can Help Improve Your Blog Part 1. We discussed why you should learn CSS and how you can use it to improve your blog. Also, the SEO benefits of knowing CSS and the basics of implementing your styles through internal style sheets. At the end I showed you guys how to style paragraph text using <p>.

If you didn't understand a word in that intro paragraph you might want to go check out Part 1. We are going to pick up where we left off styling the paragraphs.

Styling Individual Text

From the last lesson we know that we can style whole paragraphs by utilizing the p selector and the <p> HTML tag. That's great for quickly flushing out how most of your main content's text is going to look on your blog. But what if you wanted to highlight certain text within that paragraph? This is where we use the power of the <span></span> HTML tags.

To set this up we need what's called a Class Selector , it offers more control over elements than using a Tag Selector which is what using the <p> tag is.

Class Selectors

When you want to give something a different look than the rest of your other styles already prepared you use a Class Selector. For example if you wanted to highlight one sentence on one page and have the text red and have large word spacing. I would implement this one-off style using its own custom class selector.

Basically a Tag Selector is site wide styling so you use a Class as a reusable style whenever you need it. It's a great way to solve short-term problems and rare styling occurences to fit any situation.

Let's check out how this is accomplished.

The CSS:

.redspace
{color: red;
word-spacing: 10px;}

</style>

The HTML:

This is my normal text and
<span class="redspace">this is my custom text using the class selector.</span>

The Result:
css class selectors, word spacing, text color

The Breakdown:
Classes are denoted with the start of a (.) in our case I wanted our text to be red and spaced out so I called it (.redspace) you can name classes whatever you want so you can recall them in your head when you need it.

- Be sure to only use numbers, letters, underscores and hyphens when naming your class.

- Your class name must always start with a letter.

- CSS Classes are case-sensitive

Then just like we learned in Part 1, once we have our selector we need to make our declaration block { enclosed in brackets }.

After that we create our individual declarations color: red; word-spacing: 10px, along with whatever attributes you may want to give the text and put those in the brackets.

Applying your Class to other Tags

Now that we have our custom red spaced text maybe you would like to apply it to the whole paragraph. We can accomplish this by simply adding the class to the <p> tag like this:

The browser will recognize your class and apply it to the paragraph text. This way you can apply your custom text to headers, lists and paragraphs quite easily anytime you wish.

ID Selectors

After we learn about ID Selectors we'll be done with all this selector nonsense and move onto what we can do with it all. ID Selectors are mainly set aside for the main elements of a page. Generally you're only supposed to use them once per page, you can use them a few times on a page and your browser will form them correctly but your HTML will not be validated. But don't worry using a few of the same IDs on the same page will not be the end of the world.

Let's look at how we create an ID selector. (I'm omitting the style css tags from now on as they should be assumed)

The CSS:

#navigation-box
{background-color: #000000;
height: 30px;
width:200px;
}

The HTML:

The Result:
div id slectors

(Text color will very)

The Breakdown:
All ID selectors start with the (#) sign. It then corresponds with the <div> tag.

If you check out your template's CSS all the main elements such as the sidebars and main content body and other blocks of content use the # for the ID selectors. This is how you can identify where your sidebar is for example.

Think of using ID selectors for blocks of content. The <div> is a division in the page and that's how you should think of it. The <div> is a blank block that you can stretch and place where you want. This is the essence of CSS layouts.

Another great thing about the div tag is that you can have many other div blocks inside of it. Just make sure you're closing off the tags properly or this will lead to your blog looking like swiss cheese. Just remember just like in HTML, every opening tag needs a closing tag.

That's all for today

In my opinion the best way to learn is hands on experience and trial and error. Make a few of your own classes and format the text to how you want it and play with the properties explained in Part 1. Next time we'll look at how we can make our "blocks" look good by giving them backgrounds, borders, padding and margin and more.

CSS For Bloggers