Join Laura Franz for an in-depth discussion in this video Setting a class for the resource titles in the text, part of Typography for Web Designers.
- View Offline
- Exercise Files
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.
- Understanding how good typography promotes reading
- Choosing web-safe fonts
- Applying web fonts in CSS with @font-face
- Adding and applying the Google Fonts syntax
- Finding and applying a good font size, line height, and line length
- Improving a color palette by improving contrast and reducing optical vibration
- Understanding how people mentally organize, or chunk, visual elements
- Applying a system of hierarchy in HTML and CSS
- Applying vertical spacing in CSS
- Adding emphasis within a heading
- Understanding classic and modernist typographic pages
- Adding a list of links
- Creating drop caps
- Fixing quotation marks, apostrophes, and dashes
Skill Level Appropriate for all
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Creative Inspirations: Doyald Young, Logotype Designerwith Doyald Young1h 41m Appropriate for all
1. Using Fonts to Communicate the Meaning of a Word or Headline
2. Using Fonts for Text
3. Maximizing Readability
4. Visually Chunking Text
5. Shaping a Page Using Typography
6. Shaping a Traditional Typographic Page
7. Shaping a Modernist Typographic Page
8. Attending to the Typographic Details
Additional resources3m 9s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.