Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Formatting text

From: CSS Fundamentals

Video: Formatting text

So now that we know a little bit more about how fonts work with CSS, let's take a look at how they're formatted. While CSS doesn't provide you with quite a level of control over typography that most desktop publishing programs do, you still have some very powerful typographic options when writing styles. As we begin exploring text formatting options, we will not only examine the properties themselves, but we are also going to see them in action as we preview how the styles we are discussing affect a sample HTML page. Keep in mind that in this course we are going to concentrate on more of the concept than the actual syntax itself.

Formatting text

So now that we know a little bit more about how fonts work with CSS, let's take a look at how they're formatted. While CSS doesn't provide you with quite a level of control over typography that most desktop publishing programs do, you still have some very powerful typographic options when writing styles. As we begin exploring text formatting options, we will not only examine the properties themselves, but we are also going to see them in action as we preview how the styles we are discussing affect a sample HTML page. Keep in mind that in this course we are going to concentrate on more of the concept than the actual syntax itself.

If you are looking for a deeper dive into the ins and outs of the syntax, I would recommend exploring some of the other CSS courses in the lynda.com Online Training Library. Let's start with something we've already discussed, choosing a font. To define fonts, you use the font-family property. You can define a single font, or you can provide a fallback list of fonts, separated by commas, that instructs the browser to use the next font in order if the previous font isn't found on the client's system. In this example, all the text on the page would be set to Georgia.

Now if that's not available, it would be set to Times New Roman. If that wasn't available, it would be set to Times, and if Times wasn't available it would just say, okay, just go ahead and give me your default serif font. Now in terms of the syntax, note that Times New Roman is in quotation marks since there's more than one word in the font's name. Here is how our page would look with the new font applied. Now to control the size of the text, use the font-size property. CSS gives you a ton of options for defining size as you can use a diverse group of measurements.

Now I know this syntax looks a little weird, but I'm just basically giving you the same syntax that they give you within the specification. Now in one of our earlier chapters we took a look at reading through the CSS specifications and what all these meant. Just so you'll know, we have some computed values of absolute-size and relative-size-- those are about the keywords that you could use-- computed length which is what we are going to focus on, or a percentage, or you could use the inherit value, which is the default value for text. Later on I am going to explore the units of measurement that we can use for things like this in more detail, but for the moment I want to focus on the difference between using units like pixels and units like em.

So I am going to focus on the length value that you're seeing here. Length is basically saying, just give me a value and I will compute the length for you. So I want to talk about differences between using units like pixels and ems. Now pixels are fixed size or fixed units, meaning that if I set a font size to 16 pixels, it's going to be 16 pixels, regardless of which user agent it's viewed on. Now if, on the other hand, I use a relative unit such as em, the font size is relative to the device's current default size. And if you want to visualize this, take mobile devices.

16 pixels may look great on your desktop for body copy, but notice how huge it would be on a mobile device. Now if, for example, I said 1em, I'm essentially telling the device to set the font at 100% of its default font size, which is one size on desktop and another size on a mobile device. It's a way to bring a little bit more flexibility to your design. So let's go back to our example. Now, here you can see that we are setting the font size of the headings and the paragraphs to be relative to each other.

The main heading will be 1.6ems, secondary headings will be 1.4, heading 3s will be 1.2ems, and then finally the paragraph themselves will be 1em, and this is going to establish a strong relationship between all of them. And when I go ahead and apply that, I can see how now the size of the text changes to reflect that new relationship. Now if you are looking to set text as either bold or italic, you are going to use the font-weight and font- style properties respectively. Now font-weight can be either expressed as bold, normal, told to inherit, or it can be specified as a numeric weight from 100 to 900, 100 being the lightest, 900 being the boldest.

Now font-style allows us to specify italic, normal, oblique, or inherit. Now if I go back to our example, you can see how easy it is to set all of our span text to bold, then write custom styles for our title class, to set it as italicized, and overwrite the bold, and then write a specific style for author as well. And we will go ahead and apply that and we see the changes. Now another font property that I want to discuss is font-variant. Font-variant allows you to set text as small caps. Within the title there, we can see how that looks.

And this is a feature that you're not going to probably need that often, but it's nice to know that it's available. So essentially we are setting the author's name here, in this case inside of an h3 as small-caps. Now in a similar vein there are probably going to be times that you are going to want to control the capitalization of text. You will probably need to do that more frequently, to be honest with you, and for that you are going to use the text-transform property. That allows you to set text in all caps, uppercase, all lowercase, and then automatically capitalize text through the capitalize property.

As you can see, if we set text-transform to uppercase, our h2 is transformed and the text is displayed in all caps. The text-align property allows us-- I'm sure you can guess--to control the alignment of our text. You can choose between left, which is the default, center, right, and justified. As you can see here in our example, all of our text is left aligned by default, but by modifying the styles, we can set our paragraphs to be justified and our quote to be center-aligned. The text-indent property allows you to set a value to indent the first line of a block-level element such as a paragraph.

Now if the text only fits on one line, you'll still see the indent. Interestingly enough, you can set indents to negative values, which is sometimes used to hide text or just move it off the screen for a while. Now here you can see the results of our giving the paragraphs a text-indent value of 1em. If you're familiar with desktop publishing or desktop graphic design, I'm guessing that you've heard of the term kerning. If you're not, don't worry. It's just one of the most frequently used questions I get. How do you control kerning through CSS? Well, kerning is the process of changing the space between letters based on the letter pairs themselves.

It's considered actually somewhat of an art form in typography, and it helps to make text more readable. CSS unfortunately doesn't have a true kerning value, at least not yet, but you can control overall letter spacing and word spacing with the letter space and word space property. You can use any value you would like, including negative values, and here we see the effect of letter spacing on our course title. Finally, I want to discuss another common typographic need, controlling the space between lines of text. The common typographic term for that is leading, but if you're looking for the leading property in the CSS specifications, you're going to be disappointed.

To control the line spacing of text blocks, you are going to use the line-height property. Line-height can be set to an absolute value or set to be relative to the size of the text itself. Although you can use any value you would like, line-height is unique in that it's the only property that allows you to use a multiple. Now multiple uses no unit indicator, so it's just a number. So if we were to set our line-height to 1.4, for example, it would be 1.4 times the size of an element's font. Now in our example here, we are going to go ahead and set the paragraph's line-height to 1.6. We are using a 1.6 multiple, and as you can see, it increases the amount of space between the lines of text.

Now we didn't cover every single formatting option for text in CSS, but we've covered them enough to give you a good idea of the type of typographic control you are going to find when writing your styles. Now, I'm also pleased to announce that the W3C is adding OpenType support to the Fonts Level 3 Module. When these features are widely implemented, we will be able to do things like controlling ligatures, font-based kerning, old style numerals, and more. In terms of CSS and typographic controls, the best is yet to come.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 69351 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

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.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.