Setting Fonts with CSS

In HTML, if you want to change the used in an element you would use the element.  This could make your code very messy if you had the same that you want to use multiple  times, but not make the the same on the whole page. Also, if you wanted to make a  bold, italic, or underlined you would need to use the correct element to do so. If needing to make some text that was red, size 12, bold, underlined, and italic the code you use may look something like this in HTML.

This is a test

With CSS, we can do the same thing. In addition to these options, CSS allows us more  control over the that is on the site. CSS will also make it easier for us to change the in the future if we choose to use a different theme for the site we are coding for, and make it easier to read and follow.

p { : italic bold 12px arial;
 color: red;
 text-decoration: underline;
}

The CSS above will do the same as the HTML code that we looked at. By using the attribute, we have told CSS to make all paragraph elements use the Arial , make the text 12 pixels tall, make the bold, and italic. We use the color attribute to change the color of the text, and the text-decoration to underline the text. Now if we wanted to change the color of the text, or the size we can do it in one place instead of having to manually edit each element.

There are some additional attributes we can set using the attribute. Above we used the generic attribute to set a variety of settings. If we did not want to make the array of changes that we did we can use other attributes, like -family. Below are the different attributes, what they do, and what values can be assigned to them.

The attribute allows you to declare multiple settings in one attribute. This is a short hand way of setting the values.

-Family

The family sets the type of that is going to be used. This is similar to the HTML  face attribute for the element. The family attribute allows you to set a roup of fonts that the site should use if the user has them installed. You can use any that you would like, but it is best to use fonts that most people will have, like Arial, Times New Roman, or Courier. You could also use a generic family, like sans-serif. A generic  will use the default for that family. Here is an example of the family attribute.

-family: courier, arial, sans-serif;

In the example, the browser will try to use the Courier first if the user has it, if not then it will try to use Arial. If the user does not have any of those fonts, then the browser will use the default for the sans-serif family of fonts. It is always best to use a generic at the end of a family attribute, this allows you a little more control over how the text will look.

Size

size attribute does as it names suggests. It changes the size of the . There are some built in sizes that this attribute can use. Those are:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller
  • larger
  • length

Along with these you can also declare what size of you want to use, such as 12px. This will make the 12 pixels high. You can use pixels (px), points (pt), percentage of the parent size (%), and ems (em) as measurements for the size of the .

Size Adjust

This adjusted the size for an element based on the ’s aspect value. The aspect value is the ratio of the ’s lowercase x size in relationship with the size. To use this attribute you would just put in the aspect value. Here is an example:

h2 { -size-adjust: 0.58 }

Stretch

The stretch attribute stretches or condenses the horizontally only. Below is a list of options that can be used with the attribute.

  • wider
  • narrower
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Style

style only has three options that can be used with it. These set the style of the  that is being used. The values that can be used are italic, oblique, and normal. Normal  is the default value, and does not make any changes to the text. Italic, will make the  italic, and oblique looks similar to italic.

Variant

This attribute only has two values. One value is normal and it is the default value, the other is small-caps. The small-caps value makes all lowercase letters look like their uppercase versions, but the same height as the lowercase letters. Below is an example of how the small-caps value looks.

This is an example of the small-caps value

-Weight

The -weight attribute sets how bold text is on the site. You can use the values bold, bolder, lighter, and normal. You may also use any hundred value between 100 and 900.

Tags: ,