Lesson 8 - The class selector and styling text in CSS

In the previous lesson, Basic CSS selectors and properties, we showed you the basics of CSS. Including how to change text color and align elements. In today's lesson, we're going to continue learning about and working with CSS.

Centering images

Up until now, we only have one image on our website, and I think a little styling will definitely make it look better. It would be a nice improvement if the image was centered in the middle of the page. Centering in CSS is a pretty big deal. Throughout the course, we're going to teach you several ways to center elements on the page. We center images by putting them in a paragraph (our image is in one already) and assigning the text-align attribute with the center value to paragraph, in the CSS document. The problem is that I've only gone over one type of selector so far, and if we wrote this:

p {
    text-align: center;
}

Every single paragraph on the page would look like this:

Paragraphs like those are very hard to read. Today, we're going to teach you how to style specific elements on a page.

The class selector

Sometimes, you don't want to style every single element of a specific type. Which is why, CSS offers 2 more types of selectors: the class selector and the ID selector. The way the class selector works is by assigning elements on a page to a class, using the class attribute. Elements with this attribute will be styled based on the properties specified for the given class (in CSS).

Let's go ahead and center the contents of specific paragraphs. We'll create the "center" class to do just that. We can name the class whatever we'd like, but only using lowercase letters and hyphens. It should be obvious what is the class for just from reading its name (so you had better not use class names like class15 etc.).

Let's move to style.css and define the "center" class selector. The class selector always starts with a dot, which is followed by the class name. After that, it works the same as the type selector. Add the text-align property with the "center" value into the selector.

h1, h2 {
    text-align: center;
    color: #0a294b;
}

.center {
    text-align: center;
}

Now move to index.html and assign the "centered" class to the paragraphs with the image (using the class attribute):

<p class="center">
    <img src="image/avatar.png" alt="HoBi the programmer" />
</p>

Save it and test it. Here's what it should look like:

The content of each element with the "center" class will now be centered horizontally. If you find it confusing that the image reacts to the text-align property, you're on to something. The property name is a bit confusing, however, all it's doing is centering all of the contents, not just text. We can assign elements to as many classes as we want. All we have to do is simply separate each class with spaces. However, try not to assign a single element to too many classes.

Text styling

Let's add improvements to the text style on our website and go over several CSS properties to do just that.

Text font

We can change the text font using the font-family property. The default font for websites is Times New Roman serif font, which doesn't suit websites very well and is more appropriate for printed documents.

We usually don't combine too many fonts on a single page. We usually set the limit to 2 fonts - one for headings and one for the rest of text.

The problem with fonts is that when we use one that only we have installed, the website will be displayed in the default font to others who don't have the font installed. For that very same reason, fonts are either imported to a website (which we will get into later) or use one of the few fonts that everyone should have on their computer. These fonts are, for the most part, web-safe (however, you might still need to install some of them on Linux):

• Arial
• Times New Roman
• Verdana
• Georgia
• Comic Sans MS
• Arial Black
• Impact
• Lucida Console
• Tahoma

Let's set Verdana as our website's font. We'll set it as such in the body type selector, which will apply the font to all of the elements in the website's body. As for the headings, Arial will do.

Let's add the body type selector and modify the selector for headings:

body {
    font-family: Verdana;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b;
    font-family: Arial;
}

I added the 4 other heading types to the selector so that they would look the same if we decided to use them.

Here's what your site should look like now:

Font size

We set the font size using the font-size property. Just like with colors, there are several ways you could set a font's size. Here are the 2 most important approaches:

Pixels

The first way is to specify the font size in pixels. Let's set the font size to 14 pixels for everything in the body:

font-size: 14px;

The advantage is that the font will have the same size everywhere, which is useful to set a uniform font for the entire body.

Em == The second way to specify the font size is using "em" units. A value given in ems specifies how many times the font is bigger than the size of the letter M in the current font. In other words, it is a relative unit. Lot's of people use "em" everywhere because if they decide to change the font size of their website, all they would have to do is change the body (every other size would be adjusted based off of that). Let's set the <h2> heading size as a little bit bigger, using the 1,7em value (which is 70% bigger than the current font):

h2 {
    font-size: 1.7em;
}

The result:

Notice how we only make small adjustments. There is no need to create headings in extravagant colors or gigantic sizes.

We usually use the font shorthand property to specify the font size. So instead of:

font-family: Verdana;
font-size: 14px;

You could just write:

font: 14px Verdana;

Font shadow

We are also able to, very easily, add a shadow to the font using the text-shadow CSS property. Let's add a little drop shadow to our headings:

text-shadow: 3px 3px 7px #666666;

The first two parameters specify a location for the shadow. I made it so that the shadow is located 3 pixels to the right from the text and 3px lower. The third parameter specifies the blur (higher values make the shadow blurrier). The shadow would be perfectly sharp if when a value of "1" is used. The last parameter is the color, which in this case is, gray.

Here's what it looks like:

There is quite a lot we can do with shadows. If you add multiple shadows and color them, you can create a fire effect. I'll show you some tricks like that later on in case you want to add text effects to your website

There are tons of things we can do with fonts using CSS, what we went through today is just scratching the surface. In the next lesson, Layout and backgrounds in HTML, we'll start working on the page layout, i.e. the website template with a navigation menu, a content part, and a footer. The code we worked on today is available in the attachment below, as always.

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.