Styling Text, Font, and Properties in CSS Designs

One of the most common parts of website design is the styling of fonts and text. Whether it's changing the default black color of a font, changing the font itself, or just changing its size, CSS alters the way text is rendered on a web page. It also helps to understand how fonts are designed such as using "serif" or "sans-serif." Having some knowledge in font layouts and design and knowing how to work with these designs in CSS will help you when you design your pages.

An Overview of Fonts

Have you ever noticed "extensions" to a font that puts little tips on the end of each corner of the font? These little stylized tips are called "serif." Serif can be set on a font as well as "sans-serif." Sans-serif styles remove those little tips from the font's corners and make a "naked" font display on the browser window.

The other type of font design you should know is monospace. Monospace fonts have the same distance between letters and the same distance between words. You might not have noticed, but stylized fonts usually have different spacing between letters to fit a style and width. A monospaced font will usually take up more space, and this can affect the way you design your pages.

Fonts are usually grouped into families and styles, and these two attributes as well as other properties are used in CSS to create the text layout for your pages.

Font Families and CSS

When websites were first popping up on the web and HTML was still a new language, website designers were forced to use fonts that were installed on the user's computer. If the font wasn't installed, the browser would use a default font. Now, you can use fonts that are used and defined in external files. For instance, Google Fonts lets you download a CSS and JS file that define a font that you can then use in your web pages. However, you should always define a default font family, and you can do this in CSS. The font specified will be used in your pages, but should something happen where the font can't be rendered (such as a user with a very old browser), the browser will default to a specified font family.

There are only a few font families. The two most commonly used are "Times New Roman" and "Arial." To define a font family, use the following CSS code.

p {
font-family: "Arial", Helvetica, sans-serif;
}

The above code defines the font family "Arial," which is a commonly used font. The second parameter, "Helvetica," is the "fallback" font in case this Arial font fails. When you define fonts on your website, you start with the font you want to display, and then define a fallback font in case it fails. This fallback font is a safeguard and should be something that is installed on all browsers and operating systems.

Finally, the sans-serif or serif is defined. Arial is a sans-serif font, but Times New Roman uses serif. You can define either one when you specify the font family.

Changing Font Styles

If you recall from chapter two, we mentioned that using HTML tags that define font styles such as italics, underline or bold were discouraged. But what if you want to italicize a font or use a style? The answer is to use CSS. CSS has a "font-style" property that lets you define a style. For instance, suppose you want to add an italics style to the previously used paragraph class. You can use the following code for font styles.

p {
font-family: "Arial", Helvetica, sans-serif;

font-style: italic;
}

You can also bold a font, which is usually common among page designs. The "font-weight" style is used to add bold text. You can stack these styles. In other words, you can use italics and bold in the same CSS class definition. The browser will use both styles when it renders the web page text. The following code uses both italics and bold font.

p {
font-family: "Arial", Helvetica, sans-serif;

font-style: italic;

font-weight: bold;
}

CSS lets you switch back to a "normal" font style. Let's say you use the above CSS class in your code. As you know from previous chapters, the above class will apply to all tags in the HTML document. What if you don't want to use this style with all paragraphs, so you want to define an alternative CSS class for other paragraph tags. Look at the following CSS classes.

p {
font-family: "Arial", Helvetica, sans-serif;

font-style: italic;

font-weight: bold;
}

p.normal {
font-family: "Arial", Helvetica, sans-serif;

font-weight: normal;
}

Now look at the following HTML code.

<!DOCTYPE html>
<html>

<head>

Interested in learning more? Why not take an online CSS course?

<title>This is my first web page</title>

</head>
<body>

 This paragraph contains bold and italic text.

This is normal font without bold or italics. 

</body>

</html>

Notice that the two CSS styles apply to the same tag, the tag. However, one defines a normal font weight while the other applies more styles. In the HTML code, there are two tags. The first has no class defined while the second defines the "normal" class. In this example, the first paragraph uses the global tag CSS style. The text within has bold and italicized font.

The next paragraph tag overwrites the default, global tag CSS style. This tag uses the class property to then use normal font weight and styles. It still defines the Arial font family, but stops the bold and italics from flowing to the second tag. This type of styling is common when you need to use several styles for one specific tag throughout your web pages.

Setting Font Sizes

We've already seen how to set a font's color using the "color" CSS property, but what about changing a font's size? Standard font sizes have changed over the years. It used to be that small fonts were standard in web page styles. Now, larger fonts are used to make it easier for desktop and mobile users to read the content.

You can use pixels to define your font sizes, but current website design calls for the "em" property. Em styles use ratios of pixel font sizes. The default pixel size for any browser is 16 pixels. Since em styles are a ratio of the browser's text size, an em value of 1 is 16 pixels. An em of 2 is 32 pixels. You can use decimal values to create text sizes based on the standard 16-pixel size.

For instance, the <h> tags are common header tags used to create headers and subheaders within your content. The <h1> tag is the first header on the page, and it usually is a larger font than the rest of the text on the page. Review the following CSS class.

h1 {
font-size: 40px;
}

Instead of using the 40 pixel font size, you can use the em standard. The following code defines 40 pixel font sizes using the em standard.

h1 {
font-size: 2.5em;
}

You might wonder how to figure out the appropriate em size for a particular font size. The em size is pixel/16. In other words, 40pixels/16 = 2.5em. Also note that you must define your units when you declare your font styles. The "40px" tells the browser to use pixels, and the "em" tells the browser to use em ratios.

You can also use percentages to define your font sizes, although this isn't as common as the other two values. Just like em and pixels, you must define your units by using the percentage character. The following code tells the browser to use a 100% sized font, which as you recall is 16 pixels.

h1 {
font-size: 100%;
}

Notice that the recent <h1> tag will use 16 pixels as the size, which means that the header text would be the same size as the rest of the text on the page, unless you specify a smaller font for the rest of the HTML.

Using font styles is as common as using HTML in web design. You will always need to specify your fonts throughout the page, so you should become familiar with the different font families, sizes, and styles. These styles will change in different areas of your HTML, which can be specified in your CSS files.

Styling Page Backgrounds

The default, standard background color on a web page is white. In many website design projects, you want to change this color to something more suitable for your layout. You can use a color, a gradient, or even an image for your background. When you set your background, the entire page is set with the color or image and any layers or elements overlap the background. Old style HTML pages placed the background settings directly in the HTML's <body> tag, but now standards require you to use CSS for background styling.

Using a Standard Color

The first step in understanding HTML and CSS backgrounds is using colors. You can set a background color either as a predefined color value such as "red" or "green," or you can use hexadecimal color codes. Hexadecimal color codes give you more granular control over the colors shown, and they are generally suggested rather than using predefined color values. With hexadecimal color values, there is no chance of the browser not being able to understand what color to use.

The following CSS class sets the background to black.

body {
background-color: #000000;
}

You can also use predefined color labels. The above code uses the hexadecimal notation. The following code uses the predefined "black" name.

body {
background-color: black;
}

The above code sets the background of the entire page, but you can also use the same CSS declarations for other HTML tags. For instance, it's common to use background colors in div HTML tags. The following CSS code sets a background to blue for div tags.

div {
background-color: #6495ed;
}

Using Background Images

While background colors in HTML pages is popular, you also need to use images in many instances. You might not use an image for the entire page, but you'll use background images with div, table, and other HTML tags. These images can be used to set an image with text that describes a product or service. Whatever you use it for, the "background-image" CSS property is commonly used among most HTML website designs.

One issue to note with background images is that you should not leech bandwidth from other sites. This means that you don't use URLs or images located on other sites. If the image is freely available and you have rights to use it, you should download the image to your cloud server or to the local web server and place it in a directory. You then use this local image to define your HTML backgrounds. Using a remote image uses not only your bandwidth needlessly, but you also use other webmasters' bandwidth, which is generally discouraged across the web as unethical.

To use a background image for the entire, use the following CSS code.

body {
background-image: url("/images/myimage.png");
}

The above code sets the body of the HTML page to "/images/myimage.png." Of course, you need this image stored on your local web server in the "images" directory for this code to work. You can save your images in any directory, but the images must be accessible by the CSS file and web server. The images must also have read rights for the public, or you could get a permission error when the viewer tries to open the web page.

The above CSS class sets the image for the body, but you might also want to use images in a div tag. The following CSS code sets an image for a div with the set class name of "divimage."

div.divimage {
background-image: url("/images/myimage.png");
}

The above two examples defined one image to the background, but images rely on sizing. What happens when the image is a small square? The image won't satisfy the requirements for a large background, and then your website design looks awkward. You can remedy the situation by setting the "background-repeat" property. This property uses an image and then repeats this image either horizontally or vertically. With the repeat property, you use the "x" or "y" values. The "x" line runs horizontally and the "y" line runs vertically. This means that you can repeat an image from left to right of the screen or from top to bottom.

For example, suppose you want to repeat one tall image from left to right across the page in a linear fashion. The following code repeats the image across the x axis.

body {
background-image: url("/images/myimage.png");
background-repeat: repeat-x;
}

As stated, you can also repeat an image across the y axis using the "repeat-y" value. The following code repeats a background image from the top to the bottom of the page.

body {
background-image: url("/images/myimage.png");
background-repeat: repeat-y;
}

What if you want to repeat the image in both directions? In other words, what if you have one small image that you want to repeat across the entire page? You can also perform a full repeat using the repeat value. The following code repeats the image across the entire page.

body {
background-image: url("/images/myimage.png");
background-repeat: repeat;
}

Incidentally, the background property also has a shorthand concept. You can use a shorthand property and value to reduce the lines of CSS code and use only one line of code for all values. The following code is an example.

body {
background: #000000 url("/images/myimage.png") repeat;
}

Notice that the values from previous CSS code are all inserted into the one line of code in the above CSS. The "background" property sets all values of each individual property. The above line of code sets the color background as black, the image that overlays the black background is "myimage.png," and the image is repeated across the entire page. Of course, you can also use any of the other background values you've seen in this section.

By default, background images are placed at the top left corner of a web page. This x,y axis position is 0,0. Moving to the right of the screen increases the x axis value and moving down the screen increases the y value. This is important when you position elements on your web page.

The background image properties let you define the location of an image on your page. For instance, you might want to center the image in an element. If you don't define a location, the default is the top-left corner of the element. In all HTML styling, the top-left corner is the default, but you can define location by changing the x,y values just like in any graphing calculations. CSS also gives you the ability to use predefined values such as "center," "left center," or "center bottom." There are a number of predefined positions you can use depending on where you want the image to show up on your page.

For instance, the following CSS class positions an image in the center of a div element.

div {
    background-image: url('/images/myimage.png ');
    background-repeat: no-repeat;
    background-position: center;
}

In the above code, we use the same image as we have used in other code examples. The image is set not to repeat but it displays in the center of the div.

You can also use percentages to define the location of an image. Percentages are a percentage from the x,y axis at 0,0, which again is the top-left corner. 100%,100% is the bottom-right corner, so percentages move diagonally down and to the right of the screen.

For instance, the following CSS class places an image in the center of the screen instead of using the "center" value.

body {
    background-image: url('/images/myimage.png ');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

The background and background image properties are valuable assets when working with website design. These properties set the overall look and feel of your site as you place text on the foreground. Remember to use a good color or image for your background or your users can have a hard time reading the text. The text and background colors or images must work together to define a good user interface.