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>.

body {
line-height: 1.5em;
}

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

Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet

Blog

An article teaches you JS function inheritance

Markup language - specify CSS styles for text

Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet

An article teaches you JS function inheritance

CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

Web interview Vue custom components and calling methods

Complete steps for Nginx proxy front-end and back-end separation projects with the same domain name

Simple tips to increase web page loading speed

CSS mimics remote control buttons

What scenarios are not suitable for JS arrow functions?

Summary of four ways to loop through an array in JS

Summary of data interaction between Docker container and host

Recommend

Mysql implementation of full-text search and keyword scoring method example

Mysql Workbench query mysql database method

Vue implements form validation function

Detailed explanation of SELINUX working principle

Example of how to modify styles via CSS variables

The difference between useEffect and useLayoutEffect in React

How to install Elasticsearch7.6 cluster in docker and set password

How to use Docker+DockerCompose to encapsulate web applications

Detailed understanding and comparative analysis of servers Apache, Tomcat and Nginx

Some basic instructions of docker

10 Tips to Improve Website Usability

Implementation of the login page of Vue actual combat record

Two ways to export csv in win10 mysql

XHTML tutorial, a brief introduction to the basics of XHTML

How to read the regional information of IP using Nginx and GeoIP module