CSS/C2/Font-Properties-in-CSS/English

From Script | Spoken-Tutorial
Revision as of 12:02, 24 October 2020 by Pravin1389 (Talk | contribs)

Jump to: navigation, search

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:
  • Font properties of an element in CSS
Slide:

System Requirements

This tutorial is recorded using
  • Ubuntu Linux OS v 18.04
  • CSS3
  • HTML5
  • gedit Text Editor
  • Firefox web browser

However you may use any other editor or browser of your choice.

Slide: Prerequisite

https://spoken-tutorial.org

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
font-family font-style
font-weight font-variant
font-size
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
  • font-family property is used to set the font of the text.
  • One or more fonts, separated by commas, are used to specify the font-family.
Slide: Font Family
  • Sometimes the user's system doesn’t contain the first font.
  • Then the browser uses the second font and so on.
  • Font should be written priority wise from highest to lowest.
Slide: Font Family
  • The last font should ideally be a generic font.
  • For example: serif, sans-serif, monospace, etc.

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:
  • normal (default): sets the style of text to normal.
  • italic: sets the style of text to italics.
  • oblique: sets the style of text to slanted or sloped form.

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 the 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:
  • Keywords:
    • normal, bold, lighter and bolder
  • Numeric:
    • 400 equals to normal
    • 700 equals to bold.

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:
  • small-caps:
    • Convert all the letters to uppercase letters
    • Sets the font size smaller than the uppercase letters.
  • Normal: removes the small-cap property.

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
  • font-size property specifies the size of the text.
  • The default font size in most of the browsers is set to 16px.
Slide: Font Size Values of this property are:
  • Length values: pixels, cm, points, em, etc.
  • Keywords: absolute, relative
  • Percentage

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.
  • Absolute keywords: sets the font size based on default font size
Slide: Absolute keywords


xx-small xx-large
s-small x-large
small large
medium (equals to default font size)
These are the values of absolute keywords.
Slide: Relative keywords
  • Relative keywords: It sets the font size relative to parent elements.
  • The keywords are:
    • smaller and
    • larger

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 that 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
  • Using shorthand, we can write all the font properties in a single line.
  • font-size and font-family values are mandatory for font property in 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:
  • Font properties of an element in CSS
Slide: Assignment As an assignment,
  • Open the file styles.css which you have created earlier.
Slide: Assignment
  • Using shorthand, set the following properties to the paragraph:
    • font-family to Arial
    • font-style to oblique
    • font-weight to 400
    • font-variant to small-caps
    • font-size to 18 pixels
Slide: Assignment
  • Link the styles.css file to webpage.html file
  • Observe the output
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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C2/Font-Properties-in-CSS/English&oldid=54121"