Tips for applying CSS to webpage text

I would like to take a chapter to discuss how to set text styles with CSS. generally, most CSS applications are used to process text content, even for websites that do not fully comply with the standards. removing the repeated <font> labels on the Web page is a very attractive thing for designers, and it is not difficult to see the huge advantage of controlling text layout with CSS, that is, the content and display method are further separated.

We have learned from many previous examples that CSS can handle many situations, and setting text styles is the easiest way to add design elements to the most basic web pages. at the same time, adding styles to CSS text also avoids unnecessary images on the page.

In this chapter, we will see how CSS brings a boring plain text to another height (with new colors, sizes, and fonts ).

How to Make hypertext look cool?

Specifying text styles is one of CSS's best practices. It is the same for browsers that do not fully support advanced CSS functions. in the past, designers and developers may want to design text in a way that is not large or bold, create a webpage that is intolerable and hard to use by today's standards (have you ever seen a webpage with most of the text shown in images? But you happen to be using a text browser ...)

To provide you with some alternative methods to use images and answer the above question at the same time, in this chapter, we will start with a text that has not been set as a style, and gradually add various CSS rules for it, make it a compelling design.

Changing Times

Start by reading the text to be processed in the preset font of the browser. in my case, the default font is 16-pixel Times. the Safari browser is used on Mac OS X. As a result, the text displayed will be deprecated in the form of anti-aliasing. If Windows XP is used and ClearType is enabled, you can also see similar results.

Times (or variant Times New Roman) is the default font of many browsers. However, it is easy for users to change the font they like, So you certainly cannot rely on this default value.

Figure 13-1 shows the text that we have used in this chapter with no styles added: A simple title marked with

Figure 13-1 display the title and text preset in the browser

• 5 pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• 5
• Next Page