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

Nancyvarkey at 17:40, 25 October 2020

2020-10-25T17:40:57Z

Pravin1389 at 06:32, 24 October 2020

2020-10-24T06:32:52Z

Nehasolanki: Created page with "'''Title of the script: '''Font properties in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi..."

2020-10-22T15:57:08Z

Created page with "'''Title of the script: '''Font properties in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi..."

New page

'''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

{| border="1"
|-
| | '''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

{| style="width: 22em;"
|-
| '''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 '''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 '''browse'''r 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 '''browse'''r 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 '''browse'''r 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''': 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 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.

|-
|}

@@ Line 63: / Line 63: @@
 |}
-|  | These are the properties which we use to style the '''font''' of '''text''' in '''CSS'''
+|  | These are the properties which we use to '''style''' the '''font''' of '''text''' in '''CSS'''
 '''  '''
@@ Line 78: / Line 78: @@
 |  |
-* Sometimes the user's system doesn’t contain the first '''font'''.
+* Sometimes the '''user's system''' doesn’t contain the first '''font'''.
-* Then the browser uses the second '''font''' and so on.
+* Then the '''browser''' uses the second '''font''' and so on.
-* '''Font''' should be written priority wise from highest to lowest.
+* '''Font''' should be written priority-wise from highest to lowest.
 |-
@@ Line 332: / Line 332: @@
 |  | Values of this property are:
-* '''Length values: '''pixels, cm, points, em, etc.
+* '''Length values: it includes '''pixels, cm, points, em, etc.
-* '''Keywords: '''absolute, relative
+* '''Keywords: it includes '''absolute, relative
 * '''Percentage'''
@@ Line 348: / Line 348: @@
 |  | 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'''.'''
+Inside the '''p tag''', next to '''font-weight property''' type the code as shown.
 |-
 |  | Press Ctrl + S
@@ Line 393: / Line 393: @@
 |  | Next let us see how to set the '''font''' size using '''keywords'''.
-* '''Absolute keywords''': sets the '''font''' size based on default '''font''' size
+* '''Absolute keywords''': it sets the '''font''' size based on default '''font''' size
 |-
@@ Line 431: / Line 431: @@
 |  | Now I will set the '''font''' size of the '''paragraph''' to '''medium'''.
-Inside the''' p tag''', update the '''font-size property''' code as shown.
+Inside the''' p tag''', update the '''font-size''' property code as shown.
 |-
 |  | Press Ctrl + S
@@ Line 446: / Line 446: @@
 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'''.
+This is because we have set the '''font size''' to '''medium''' which is the default '''font''' '''size'''.
 |-
 |  | Switch to mystyle.css
@@ Line 458: / Line 458: @@
 |  | 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.
+Inside the''' p tag''', update the '''font-size''' property code as shown.
 |-
 |  | Press Ctrl+S

@@ Line 188: / Line 188: @@
 * '''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.
+* '''oblique''': sets the '''style''' of '''text''' to slanted or sloped form.
 Let us try this.
@@ Line 202: / Line 202: @@
 |  | Now I will set the '''style''' to '''Italic''' for the '''paragraph'''.
-Inside the '''p tag''', next to '''font-family''' type the code as shown.
+Inside the '''p tag''', next to the '''font-family''' type the code as shown.
 |-
 |  | Press Ctrl + S
@@ Line 414: / Line 414: @@
 |  | Slide: Relative keywords
 |  |
-* '''Relative keywords''': sets the '''font''' size relative to parent '''elements'''.
+* '''Relative keywords''': It sets the '''font''' size relative to parent '''elements'''.
 * The '''keywords''' are:
 ** '''smaller '''and
@@ Line 444: / Line 444: @@
 |  | Observe the output.
-Notice there is no change in the''' font size''' of the '''paragraph.'''
+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'''.