Font Families and Font Sizes


Page sections

1-9 A 1 Discover 1-9 A 2 1-9 A 3 1-9 A 4 Discover 1-9 A 5 1-9 A 6 1-9 A 7 1-9 A 8 Cats.html 1-9 A 9 Dogs.html 1-9 A 10 Birds.html 1-9 A 11 Your own HTML file 1-9 A 12 Rereading the yellow sections 1-9 A 13 StarfruitJuice08.html 1-9 Example 1: Property values for the font-family property 1-9 Example 2: Property values for the font-size property 1-9 Explanation 1: The font-family property 1-9 Explanation 2: Values for the font-family property 1-9 Explanation 3: Font-family value case 1-9 Explanation 4: The font-size property 1-9 Explanation 5: Property values for the font-size property 1-9 Explanation 6: Several attributes in one tag 1-9 Explanation 7: Font tag pair in list tag pair 1-9 Orientation 1: Font sizes and types. 1-9 Orientation 2: HTML files from previous exercises

Workbook pages

1. Settings. Line breaks and paragraphs.

2. Commenting code and checking your StarfruitJuice files

3. Style Terms

4. Headings

5. Fonts and Colors.

6. Simplified HTML structure. Colors.

7. Ordered and unordered lists

8. More List Styles

9. Font Families and Font Sizes

10. Bold, Italic and Underline

11. Tables. Online HTML Editor.

12. Including images in Tables

13. Visual Studio Code. Table Colors.

14. Table Headings and Heights of Table Rows

15. Table Sizes, Borders and Alignments

16. Rice Files

17. Hyperlinks

18. Further studies

1-9 Orientation 1: Font sizes and types.

The following sections show how to set font sizes and types.

1-9 A 1 Discover

In the Exercises01 folder, create an HTML file with these lines of code:

<html>
<body>

<p style= "font-family:Courier;">Hello.</p>
<p style= "font-family:Arial;">Hello.</p>

</body>
</html>


Open this file in a browser and explain the font-family property:




































1-9 Explanation 1: The font-family property

The font-family property specifies the font type for an element.

1-9 Explanation 2: Values for the font-family property

Some property values of the font-family property are:
Courier
Verdana
Arial
'Times New Roman'
Consolas

Note that values consisting of multiple words must be enclosed in single quotes: '.

1-9 Explanation 3: Font-family value case

Property values are typically written in lowercase letters. However, font-family values start with an uppercase letter for better readability

1-9 Example 1: Property values for the font-family property

Here are some values for the font-family property. The font styles used here can be applied in the opening tags of HTML tag pairs like <h1></h1>, <h2></h2> and so on, the paragraph tag pair<p></p>, or the span tag pair<span></span>. This example uses the paragraph tag pair.

Font family
Style
Display
Courier <p style= "font-family:Courier;">This is a little text.</p>

This is a little text.
Verdana <p style= "font-family:Verdana;">This is a little text.</p>

This is a little text.
Arial <p style= "font-family:Arial;">This is a little text.</p>

This is a little text.
'Times New Roman' <p style= "font-family:'Times New Roman';">This is a little text.</p>

This is a little text.
Consolas <p style= "font-family:Consolas;">This is a little text.</p>

This is a little text.

1-9 A 2

Using the Courier property value create an HTML file that shows this content:

This is a little text.

1-9 A 3

Create an HTML file that shows this content:
  • This is a little text in Courier.
  • This is a little text in Consolas.
  • This is a little text in Times New Roman.
  • This is a little text in Arial.
  • This is a little text in Verdana.

1-9 A 4 Discover

Create an HTML file with this code:

<html>
<body>

<p style="font-size:150%;">Hello.</p>
<p style="font-size:80%;">Hello.</p>

</body>
</html>


Open this file in a browser and explain the font-size property:




































1-9 Explanation 4: The font-size property

The font-size property specifies the font size for an element.

1-9 Example 2: Property values for the font-size property

Here are some examples for value types of the font-size property:

<p style="font-size="50;">In this example, the property value for the font-size property is 50.</p> Size 50.
<p style="font-size:150%;">In this example, the property value for the font-size property is 150%.</p> Size 150%.
<p style="font-size:large;">In this example, the property value for the font-size property is large.</p> Size large.
<p style="font-size:medium;">In this example, the property value for the font-size property is medium.</p> Size medium.
<p style="font-size:10px;">In this example, the property value for the font-size property is 10px.</p> Size 10px.

1-9 Explanation 5: Property values for the font-size property

For the property values of font-size property you can use whole numbers, percent pixels: px or words like small, medium or large.

1-9 A 5

Using size 55px create an HTML file that shows this content:

This is a big text.

1-9 Explanation 6: Several attributes in one tag

Both the font family and font size styles can be included in one element.

1-9 A 6

Using the font-family Arial and the font-size 80% create an HTML file that displays this content:

This is a little text.

1-9 A 7

Create an HTML file with this code:

<html>
<body>

<ol style="font-size:150%;" font-family:Courier;>
         <li>Hello.</li>
         <li>Hello.</li>
</ol>

</body>
</html>


Open this file in a browser and explain the above lines of code:




































1-9 Explanation 7: Font tag pair in list tag pair

Both the font family and the font size styles can be used in the list tag pair.

1-9 Orientation 2: HTML files from previous exercises

In the Exercises01 folder, create a copy of the corresponding previous HTML file for each of the following four exercises, and rename each copied HTML file, using the exercise numbers of the following exercises. Apply the styles specified in the exercises.

1-9 A 8 Cats.html

Apply the Courier font to the title and the following text. Additionally, set the text under the title to a smaller size.

1-9 A 9 Dogs.html

Apply the Consolas font to the title and use Verdana for the text under the title.

1-9 A 10 Birds.html

Apply the Arial font to the title and use Courier for the text.

1-9 A 11 Your own HTML file

Modify your own file with various fonts and sizes.

1-9 A 12 Rereading the yellow sections

Now that you have gone through the exercises on this page, reread the yellow sections.

1-9 A 13 StarfruitJuice08.html

  1. within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice07.html file
  2. rename the copy of the StarfruitJuice07.html file to StarfruitJuice08.html

At this point you have 2 identical files, named StarfruitJuice07.html and StarfruitJuice08.html.

  1. modify StarfruitJuice08.html to make it look exactly like this.
  2. save StarfruitJuice08.html

This page was created by Hanspeter Amend
Previous page   Table of contents

Solution proposals

 

1-9 A 2

<html>

<body>

<p style= "font-family:Courier;">This is a little text.</p>

</body>

</html>

 

1-9 A 3

<html>

<!--List of different font families -->
<body>
           <ul style="list-style-type:circle;">
                     <li style="font-family:Courier;">This is a little text in Courier.</li>
                     <li style="font-family:Consolas;">This is a little text in Consolas.</li>
                     <li style="font-family:'Times New Roman';">This is a little text in Times New Roman.</li>
                     <li style="font-family:Arial;">This is a little text in Arial.</li>
                     <li style="font-family:Verdana;">This is a little text in Verdana.</li>
             </ul>
</body>

</html.



 

1-9 A 5

<html>

<body>

<p style="font-size:55px;">This is a big text.</p>

</body>

</html>



 

1-9 A 6

<html>

<body>

<p style="font-size:80%;font-face="Arial">This is a little text.</p>

</body>

</html>



 

1-9 A 13

<html>

<!- - Set style attribute for the color style of the page background. - ->
<body style= "background-color:lightblue;">

<!- - Title: Set style attribute for text style. - ->
<h1 style= "text-align:center;color:blue;">About the Star Fruit</h1>

<!- - Line break - ->
The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

<!- - Paragraph - ->
<p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

<!- - Set heading - ->
                     <h1>Starfruit Juice Recipe</h1>

<!- - Set style attribute for font styles. - ->
<p style= "text-align:left;font-family:Courier;font-size:150%;">Starfruit Healing Properties</p>

<!- - Set style attribute for list style and font styles. - ->
<ul style="list-style-type:circle;font-size:110%;font-family:Verdana;">
         <li>low calories</li>
         <li>supports metabolism</li>
</ul>
</body>

</html>

This page was created by Hanspeter Amend Previous page   Table of contents