 |
| HTML and CSS tutorial for beginners |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will learn Lesson 25.
In last lesson we have learned CSS text properties.
Today we will learn CSS font properties.
CSS font properties
Font is a group of specific special type of characters. Letters in a font are displayed in a specific style. See sentences written below. Same sentence is written in different fonts.
This sentence is displayed in Arial font.
This sentence is displayed in Times font.
This sentence is displayed in Courier font.
This sentence is in Georgia font.
This sentence is in Verdana font.
Letters in a font have a specific style, letter size, and thickness etc. See fonts shown above. We know these fonts. There are many fonts available. We find many fonts in applications where we can type some text, for instance, MS-word, Notepad, MS-Excel and so on.
Today we are going to study CSS font properties and we will see their functions. In CSS there are font properties like font family, font size, font style and so on. We will see font properties one by one.
1. Font family:
This property is to specify the name of font in which the text is to be displayed. There are two categories of font family namely 1. generic family and font family. Generic family name is a group which has a number of font families of similar type. Font family is a specific font in that generic group. Let us understand this concept.
1. Serif:
The characters in these fonts have a small line at the end. See how "A" is displayed in Times New Roman font - A. We can see two small lines at bottom of this character. Generic font family for Times New Roman is serif.
2. Sans-serif:
In these fonts there are no lines at the end of characters. For example "A" in Arial font is A. Arial font belongs to generic font family Sans-serif.
3. Cursive:
These are the characters which are written in running scripts. This is a handwriting script. Brush script MT, Edwardian Script ITC are examples of this font. See the image displayed below.
 |
| Figure 25-1 Font families |
4. Monospace:
In this family all characters have same size. In other families characters have varying sizes. For example, in Times New Roman letters "o" and "O" are of different sizes. Courier New and Lucida Console are font families belonging to Monospace generic family.
5. Fantasy:
This group contains decorative fonts. Impact, stencil fonts come under this group.
In the similar way there are a number of fonts available. This property is written as follows:
font-family: "Times New Roman", Times, serif;
Remember:
1. If there are one than more words in the name of a font then font name is written in quotation marks, for instance, "Times New Roman"font-family: "Times New Roman", Times, serif;
Remember:
2. We can specify more than one font names in the CSS font-family property. The first name in the list is displayed by default. If this font could not be displayed then next font is displayed. The last name given in this list is the generic name.
We will write CSS font-family property in our script. Open a new Notepad file. Copy all script from lesson-24. Write following style for #para1.
font-family: "Arial", Sans-serif;
and for #para3 write following:
font-family: "Edwardian Script ITC", Cursive;
Delete following line from "style".
text-transform:uppercase;
Save our file as "Lesson-25" and "Lesson-25.html". See the figure displayed below. Click on figure 25-1 for PDF file of source code. Double click on HTML file and see the output.
2. Font size:
We can specify the font size using this property. Default font size is 16px. We can specify font size either in absolute units or in relative units.
For this let us write script in our Notepad file.
#para3 {
font-family: "Script MT", Cursive;
font-size: 3vw;
}
We will apply this style to para3.
3. Font style:
This property has three values namely normal, italic, and oblique. We will make our heading italic. Write in the style of header following:
font-style: italic;
Save this file as "Lesson-25" and "Lesson-25.html". Again see the output.
4. Font variant:
This property is used to display text in small capital letters. This property has two values - 1. normal and 2. small-caps.
5. Font weight:
This property is used to make text bold. This property has two values namely, 1. normal and 2. bold.
Write the following style for #para1.
font-weight: bold;
Now save our file as "Lesson-25" and "Lesson-25.html". This is shown in the following figure. Click on this figure for PDF file of source code. Note carefully the style and font properties used in the style.
 |
| Figure 25-1. CSS font properties |
Now double click on HTML document. See the output. Font style that we have given in our script is displayed in the output. Click on the following figure to see actual output in a web page.
 |
| Figure 25-3. Output of CSS font properties |
Important points:
1. Font family property is used to specify the name of font.2. Font size property is used to specify size of the text displayed.
3. Font style is used to make text italic or oblique.
4. Font variant displays text in small caps.
5. Font weight property is used to make text bold.
Lesson-24 Lesson-26
