CSS/C2/Font-Properties-in-CSS/English
Title of the script: Font properties in CSS
Author: Neha Solanki
Domain Reviewer: Ankita Maske, Om Prakash Soni
Novice Reviewer: Madhuri Ganapathi
Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Property, CSS Font, CSS Font Family, CSS Font Style, CSS Font weight, CSS Font Variant, CSS Font Size, CSS Font Shorthand
Visual Cue | Narration | |||||||
Slide: Title | Welcome to the spoken tutorial on Font Properties in CSS. | |||||||
Slide: Learning Objectives | In this tutorial we will learn about:
| |||||||
Slide:
System Requirements |
This tutorial is recorded using
However you may use any other editor or browser of your choice. | |||||||
Slide: Prerequisite | To practise this tutorial, you should have basic knowledge of HTML and CSS.
If not, please go through the HTML and CSS tutorials on this website. | |||||||
Slide: Code Files | The files used in this tutorial are available in the Code Files link on this tutorial page.
Please download and extract them. Make a copy and then use them while practising. | |||||||
Slide: Font
|
These are the properties which we use to style the font of text in CSS
Let us understand these one by one through examples. | |||||||
Slide: Font Family |
| |||||||
Slide: Font Family |
| |||||||
Slide: Font Family |
Let us try this. | |||||||
Open my-css folder | Go to the practice folder my-css. | |||||||
Open mystyle.css | Let’s open the file mystyle.css in a text editor.
The same is available in the Code files link for practice. I have already opened it in the gedit Text Editor. | |||||||
[gedit - mystyle.css]
Update: height: 3cm |
First of all for better visibility, I will change the height of the div block.
Inside the div section, update the height to 3cm. | |||||||
Press Ctrl + S | Save the file. | |||||||
Point to Mypage.html in my-css folder | Switch to my-css folder.
For this demonstration, I’m also using the file Mypage.html. The same is available in the Code files link for practice. | |||||||
Open Mypage.html in firefox | Open the file Mypage.html in a web browser.
The webpage opens. | |||||||
[gedit - mystyle.css]
Type- font-family: Arial, "Times new roman", sans-serif; |
Switch back to mystyle.css file.
I will use three different fonts for the text of the paragraph. Inside the p tag, next to the direction property, type the code as shown. | |||||||
[gedit - mystyle.css]
Highlight: "Times new roman" |
If the font name has more than one word, then it must be written within quotes. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
Content of the paragraph is set to Arial font. As this font is available in my system, it uses the first font instead of proceeding further. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Update- font-family: monospace; |
Now I will set the paragraph to a single generic font: monospace.
Update the font-family property code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
Content of the paragraph is now set to monospace font. | |||||||
Slide: Font Style | font-style property is used to style the font of the text. | |||||||
Slide: Font Style | Values of this property are:
Let us try this. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Type: font-style: italic; |
Now I will set the style to Italic for the paragraph.
Inside the p tag, next to font-family type the code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
The Paragraph is set to Italic style. Similarly explore the remaining font-style properties on your own. | |||||||
Slide: Font Weight | font-weight property specifies how thick the font of the text should be. | |||||||
Slide: Font Weight | Values of this property are:
Let us try this. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Type: font-weight: bold; |
I will set the font-weight property using keyword value bold for paragraph.
Inside the p tag, next to font-style property type the code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
Paragraph is set to bold. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Update: font-weight: 700; |
Now I will set the font-weight property to bold using a numeric value 700.
Update the font-weight property code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
There is no change in the paragraph, it is still in bold. This is because I have set the font-weight to 700, which is equal to bold. | |||||||
Slide: Font Variant | font-variant decides whether the font of a text should be small capital or not. | |||||||
Slide: Font Variant | Values of this property are:
Let us try this. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Type: font-variant: small-caps; |
Now I will set the small-cap value to heading.
Inside h1 tag, next to text-shadow property type the code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox] Highlight:
Welcome to Farmer's Market |
Observe the output.
All the letters of the heading are converted into small-cap. | |||||||
Slide: Font Size |
| |||||||
Slide: Font Size | Values of this property are:
Let us try this. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Type: font-size: 15pt; |
Now I will set the font-size to 15 points for paragraph.
Inside the p tag, next to font-weight property type the code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
Notice the difference in the font size of the paragraph. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Update: font-size: 100%; |
Now I will set the font size using percentage.
Update code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox]
Highlight the paragraph: |
Observe the output.
Now the font size of the paragraph is back to its original size. This is because it is 100% relative to the parent size. We can set the font size values using percentage or with font length values. | |||||||
Slide: Absolute keywords | Next let us see how to set the font size using keywords.
| |||||||
Slide: Absolute keywords
|
These are the values of absolute keywords. | |||||||
Slide: Relative keywords |
Let us try this. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Type: font-size: medium; |
Now I will set the font size of the paragraph to medium.
Inside the p tag, update the font-size property code as shown. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
Notice there is no change in the font size of the paragraph. This is because we have set the size to medium which is the default font size. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Update: font-size: x-small; |
Now I will set the font size of the paragraph to x-small.
Inside the p tag, update the font-size property code as shown. | |||||||
Press Ctrl+S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page | |||||||
[Firefox]
Highlight the paragraph |
Observe the output.
Now the font size of the paragraph is smaller than the normal font size. Similarly explore the remaining text-size properties on your own. | |||||||
Slide: Shorthand |
Let us try this. | |||||||
Switch to mystyle.css | Switch to the mystyle.css file. | |||||||
[gedit - mystyle.css]
Delete: font-family: monospace; font-style: italic; font-weight: 700; font-size: x-small; |
In our case, we have written the font properties for paragraph individually.
Let me delete all the font properties. | |||||||
[gedit - mystyle.css] Type:
font: italic 18px serif; |
Now inside the p tag, next to direction property type the code as shown. | |||||||
[gedit] Highlight:
font: italic 18px serif; |
Here I have set font-style to italic, font-size to 18 pixel and font-family to serif. | |||||||
Press Ctrl + S | Save the file. | |||||||
Switch to firefox | Switch to the browser and refresh the page. | |||||||
[Firefox] Highlight the paragraph | Observe the output.
The paragraph has changed as per our code. | |||||||
Only narration | In this manner, we can style our fonts for the text using CSS properties.
With this we have come to the end of this tutorial. Let us summarize. | |||||||
Slide: Summary | In this tutorial, we have learnt about:
| |||||||
Slide: Assignment | As an assignment,
| |||||||
Slide: Assignment |
| |||||||
Slide: Assignment |
| |||||||
Slide:
About Spoken Tutorial project |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. | |||||||
Slide: Spoken Tutorial Workshops | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. | |||||||
Slide: Forum | Please post your timed queries on this forum. | |||||||
Slide: Acknowledgement | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India. | |||||||
Slide: Thanks | The script for this tutorial is contributed by Neha Solanki
and this is Madhuri Ganapathi from IIT Bombay. Thank you for watching. |