Markup language - specify CSS styles for text
|
Click here to return to the 123WORDPRESS.COM HTML Tutorial section. To view the CSS tutorial, please click here. Above: Markup language - CSS layout . Chapter 13 Styling Text I thought it would be a good idea to devote a chapter to styling text with CSS. Text content is probably the most common place to use CSS, even for sites that don't fully adhere to standards. Getting rid of the repetitive <font> tags on a page was (and still is) a very attractive thing for designers, and it's not hard to see the huge advantage of using CSS to control typography, which is to further separate content from presentation. From many of the previous examples, we know that CSS can handle many situations, and setting text styles is the simplest way to add design elements to even the most basic web pages. At the same time, using CSS to style text can also help us avoid adding unnecessary images to the page. In this chapter, we'll see how CSS can take a boring, ordinary piece of text and bring it to another level (with new colors, sizes, and fonts). How can we make hypertext look cool? Specifying text styles is one of the things CSS does best, even in older browsers that don't fully support CSS's advanced features. In the past, designers and developers might have wanted to design text to achieve effects other than size and bold, which would have resulted in a web page that is unbearable and difficult to use by today's standards (ever seen a web page where most of the text is represented by images? But you happen to be using a text browser...) To give you some alternatives to using images and answer the question above, in this chapter, we will start with a piece of text that has not been styled, and gradually add various CSS rules to it to make it an eye-catching design. Start by viewing the text you are about to process in the browser's default font. In my case, the default font is Times 16 pixels. I am using the Safari browser on Mac OS X, so the text will be drawn in an anti-aliased manner. If you are using Windows XP and have ClearType enabled, you can also see a similar effect. Times (or its variant Times New Roman) is the default font for many browsers, however this can easily be changed by users to their own preferred font, so you certainly cannot rely on this default. Figure 1301 shows the unstyled text we use in this chapter: a simple title marked with an <h1> tag, followed by three paragraphs of home decorating tips.  Figure 13-1 Browser displays title, text presets Changing line height One of the simplest and most effective text styling effects is the line-height property. Adding some extra space between each line of text can make paragraphs easier to read and more attractive, and can also bring wonderful effects to your page. To accomplish this trick, simply add the following CSS rule to the <body> tag. You can also add this rule to other tags, for example, if you only want to change the line height of <p>.
This code means: the line height of the text on the page should be 1.5 times the height of the text. I like to use em units when specifying line-height because they change with the font size. Figure 13-2 shows the effect after adding line-height.  Figure 13-2 The effect of the preset text and line height already looks great. It is amazing what a small line-height can do. Previous Page 1 2 3 4 5 Next Page Read More |
<<: Detailed explanation of MySQL combined query
>>: Detailed explanation of component communication in react
Recommend
Simple setup of VMware ESXi6.7 (with pictures and text)
1. Introduction to VMware vSphere VMware vSphere ...
The difference between Update and select in MySQL for single and multiple tables, and views and temporary tables
1. Use data from table A to update the content of...
The magic of tr command in counting the frequency of English words
We are all familiar with the tr command, which ca...
The meaning and calculation method of QPS and TPS of MySQL database
When doing DB benchmark testing, qps and tps are ...
How to install Windows Server 2008 R2 on Dell R720 server
Note: All pictures in this article are collected ...
Based on JavaScript ES new features let and const keywords
Table of contents 1. let keyword 1.1 Basic Usage ...
Circular progress bar implemented with CSS
Achieve results Implementation Code html <div ...
Linux CentOS6.9 installation graphic tutorial under VMware
As a technical novice, I am recording the process...
Docker Nginx container and Tomcat container to achieve load balancing and dynamic and static separation operations
Download Tomcat8 image [root@localhost ~]# docker...
A detailed summary of HTML tag nesting rules suitable for beginners
I have been relearning HTML recently, which can be...
How Database SQL SELECT Queries Work
As Web developers, although we are not profession...
Analysis of several reasons why Iframe should be used less
The following graph shows how time-consuming it is...
Detailed explanation of DBeaver connecting to MySQL version 8 and above and solving possible problems
Database MySQL version 8.0.18 Download a DBeaver....
Pure CSS to hide the scroll bar but still have the scrolling effect (mobile and PC)
Mobile Mobile pages only need to be compatible wi...
Analysis of MySQL lock mechanism and usage
This article uses examples to illustrate the MySQ...