Watching:

Setting a class for the resource titles in the text


show more Setting a class for the resource titles in the text provides you with in-depth training on Web. Taught by Laura Franz as part of the Typography for Web Designers show less
please wait ...

Setting a class for the resource titles in the text

So far we have styled our heading using an h1 tag. Our text is styled with P tag. These tags automatically add a line break when we use them. What if we want to style a word or words without adding a line break? We create and use a class. In this lesson you will need biblio_ serif_class.html and biblio_serif_class.css from the exercise folder. Open up the HTML page in the browser. The headlines are italic. But you will see the names of the resources are not italic and they should be.

We are going to fix that with a class. Open up the CSS file and create a class. All classes start with a dot. Let's call this one titles because we are going to use it for our titles. We need our curly brackets and we are going to tell the titles to be font-style: italic. Notice we don't add anything else to the class. We are adding an italic to the text but nothing else. The resource titles will still use the font family from universal selector as well as the font size from the p tag when we set that.

Right now it's still at a default size. A common question I get for my students is what's the difference between a class and a tag? Well tags are standard and recognized. All browsers know what an h1 is and all web designers now what an h1 is. They have default styling. They are part of the backbone of CSS. Classes on the other hand are something you make up to meet your needs. When you put a dot in front of a class browsers will now hey I need to pay attention to the styling here. It's not a tag but it's going to be used to style something in the HTML.

Another difference is how we apply the styling in the HTML. Let's save this and open up our HTML. We want to make the elements of typographic style italic, but we are not going to wrap it with a class tag. There are two different ways to apply a class in the HTML. We are going to use what's called a span tag. In front of the title here, The Elements of Typographic Style, we will start our span tag, using > at the end of the Typographic Style, Elements of Typographic Style will end our span tag.

So we are spanning this title. We are going to span it with our class. So go back to the start of that tag there and add class = titles. I am going to go back and double-check and make sure that I called it titles with an S and I did. Notice I did not add the dot in the HTML. You don't use it here. You only use it in the CSS. Notice I did use quotation marks and that's because I made up the word titles and here I am telling the browser to pay attention to the class that I made up and then I called titles.

I am going to save this and let's view it in our browser. Refresh it and you can see the title is now italicized. We didn't add a line break and we can use this class over and over as we need to. If we had another title we could italicize it as well. So in this lesson we created and applied a class. Classes are powerful tools for typographers. We can use them to style words and sentences when we don't want to create a line break. We can also use them to style a single letter or a whole paragraph if we want these elements to look different from the other letters or paragraphs on the page.

In the next lesson we will look at how to choose a second font, which we will then use to replace the h1 that we have set here.

Setting a class for the resource titles in the text
Video duration: 3m 45s 6h 25m Appropriate for all

Viewers:

Setting a class for the resource titles in the text provides you with in-depth training on Web. Taught by Laura Franz as part of the Typography for Web Designers

Subject:
Web
Software:
TextWrangler
Author:
please wait ...