How To Style Text Elements With Font, Size, And Color In CSS

Trang chủ » H1 H2 P Css » How To Style Text Elements With Font, Size, And Color In CSS

Có thể bạn quan tâm

Using the font-size Property

In this section you will use the font-size property to apply different font sizes to the content throughout the page. The size of text is an important factor in communicating information. Well-sized text is easier to read and appropriately sized headings help convey hierarchy for easier skimming of the information. You will change the font-size of all the elements you created in index.html to create a document that is more readable.

Start by setting a default font-size on the body element. The default browser font-size is 16px, but it can be helpful for increased legibility for many fonts to be just a little bigger. Open your styles.css file and add a font-size: 18px; to the body element:

styles.css body { font-family: "Public Sans", Verdana, sans-serif; font-size: 18px; } ...

Open index.html in your browser or refresh the page. The font-size change on the body element changed all the fonts on the page, increasing their size.

The default font sizes for elements are relatively sized based on the parent element, in this case the <body> element, using a percent value for the font size. Using the formula (target / base) * 100% will give you a percentage value that is relative to the base font size set on the <body> element.

To give this formula a try, you will work with setting a target font-size for the <h1> element to be 45px. Using the formula, the target size is 45px and the base size is 18px, so the formula for this will be (45 / 18) * 100%, which comes to 250%. This means that the intended size for the <h1> will be 2.5 times the size of the base font-size.

Return to you styles.css file and add an element selector for h1 and add a font-size: 250%; property and value to set the font size:

styles.css ... h1 { font-size: 250%; } ...

Now that you have set a relative font size for the <h1> element, apply the same formula to the remaining heading elements. With each you can choose to either round, or keep the full decimal values. It can also be helpful to leave comments explaining the target size or even the formula.

Open up your styles.css file and start by adding a comment after the h1 font-size property explaining the rendered size. Then for each heading apply the formula so the h2 has a font-size equivalent of 36px, the h3 equal to 32px, h4 to 26px, the h5 to 22px, and lastly the h6 to the base size of 18px. The default size of the <h6> element is smaller than the base size, so setting it to 100% will ensure that it does not go below the base value:

styles.css ... h1 { font-size: 250%; /* 45px */ } h2 { font-size: 200%; /* 36px */ } h3 { font-size: 177.78%; /* 32px */ } h4 { font-size: 162.5%; /* 26px */ } h5 { font-size: 122%; /* 22px */ } h6 { font-size: 100%; /* 18px */ } ...

Return to your browser and refresh index.html. All the headings will increase their font-size based relatively on the default font-size set on the <body> element. The following image shows how this change will render in a browser:

The content of the website in black text with custom font sizes throughout with the main heading being 2.5 times larger than the base text size.

With this step you used the font-size property to change the size of the text on the web page. You used the design concept of size to give hierarchy to the content beyond the default browser styles. In the next step, you will take the design of the content further with the color property.

Từ khóa » H1 H2 P Css