Learning on CSS - Part 3

Go back to Learning on CSS - Part 2

Learning on CSS - Part 3

Style font characteristics

Now that you know how different types of style sheets are created, let’s look at the options for customizing certain page characteristics.

Faces

When you create a document in your favorite word processor, one of the choices you make is which font to use. In CSS, the font itself is set using the font-family property.

p {
     font-family: arial;
}

This property can be applied to just about any chunk of content on your web page, provided that content is rendered as text. To clarify, you cannot alter the text embedded within an image with this property (or any other CSS property for that matter).

When customizing the font family of the text on your pages, it’s important to remember that in order for the user to see the text in a particular font, that font must be loaded on the user’s computer or device. Here are a few other tips to keep in mind when customizing font families:
• Capitalization of font names varies from system to system, so we recommend sticking with lowercase names in your style sheets.
• Likewise, the actual font names can vary somewhere. To compensate, if you want to use a font known to be referenced by two different names, you can list both.
• Font names that include two or three words should be enclosed by single quotes.

In addition, it is common to include multiple preferred font families, in case one is not available on the user’s system. This process is called cascading. Here’s an example that takes each of these situations into consideration:

p {
     font-family: ‘comic sans’, ‘comic sans ms’, arial, sans-serif;
}

Here, we’re telling the browser to display all paragraphs in the Comic Sans font. But, if that is not available, it should look for Comic Sans MS (an alternative name for Comic Sans). If neither Comic Sans options are found, Arial will be used.

However, if none of the first three fonts are accessible to the browser, any sans-serif font is allowed.

NOTE : There are ways to force a page to display in a font not loaded on a user’s system, but they are a bit
             beyond the scope of this course. To learn about some of these methods Visit

http://webdesign.tutsplus.com/articles/typography-article/a-web-designers-guide-to-font-replacement-methods/

Sizes

After the font family, the next most common font characteristic to style is the size. Font sizes can be described using several different methods, each with its own pros and cons. Below shown explains.

 
Notice two units of measurement are scalable, but two are not. Those that are scalable are preferred by usability and accessibility experts because they allow users to easily adjust the font size if needed. If you use a scalable unit, be sure to test your pages at a variety of font sizes, to be sure they scale gracefully. Ultimately, the choice of which unit(s) to use is based on personal preference. The most popular two methods are ems and pixels, as a combination of scalable text (for body copy) and fixed sizes (for navigation) can often help you get the best of both worlds.

Colors

So far we’ve only shown you the most basic method of specifying colors in CSS, which is to use color names. There are 147 color names pre-defined for us in HTML/CSS. You can find a list of those names, as well as how they display on screen here: http://www.w3schools.com/cssref/css_colornames.asp.

h1 {
       color: darkblue;
}

There are several other ways you can specify color values in CSS, aside from color name. In the early days of HTML, we all had to use some math (boo!) to calculate the hexadecimal codes of colors in order to reference them in our web pages. A hexadecimal color value looks like this: #003366, where the first two characters represent the red value, the second pair accounts for the green value, and the final pair is the blue value.

If you’re particularly nostalgic, or just love math, you are certainly free to continue using hex values to change colors in CSS. This page provides a visual reference to the most common 216 hex color values: http://html-color-codes.com.

h2 {
       color: #346782;
}

You can also specify color using RGB (red, green, and blue) values or HSL (hue, saturation, and lightness), the same way graphics tools like Photoshop do.

h3 {
      color: rgb(0,0,255);
}
h4 {
      color: hsl(240,50%,20%);
}

Other properties

Aside from altering the font family, size, and color, there are several additional font and characteristics that can be adjusted with CSS. Below lists the most common.

Refer to http://www.w3schools.com/cssref/ - font and text for further explanation.

Quick tip: use shorthand!

Whenever you want to adjust several properties that all begin with the same word, such as font-size, font-face, and font-style, you can use CSS shorthand to make the process more efficient. Todo so, simply group them together like this:
p {
     font: 12px arial italic;
}

Read Next - Learning on CSS - Part 4