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

Nancyvarkey at 15:13, 25 October 2020

2020-10-25T15:13:24Z

Nehasolanki at 10:18, 24 October 2020

2020-10-24T10:18:10Z

Pravin1389 at 05:55, 24 October 2020

2020-10-24T05:55:51Z

Pravin1389 at 05:36, 24 October 2020

2020-10-24T05:36:58Z

Pravin1389 at 04:53, 24 October 2020

2020-10-24T04:53:55Z

Pravin1389 at 04:51, 24 October 2020

2020-10-24T04:51:14Z

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

2020-10-22T13:00:44Z

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

New page

'''Title of the script: '''Text 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 Text, CSS Color, CSS Text Alignment, CSS Text Indentation, CSS Text Spacing, CSS Text Line Height, CSS Text Direction, CSS Text Transformation, CSS Text Decoration, CSS Text Shadow, CSS Letter spacing, CSS Word spacing''' '''

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the spoken tutorial on “'''Text Properties in CSS”'''.
|-
|| Slide: Learning Objectives
|| In this tutorial we will learn about '''Text '''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: Text Elements

{| style="width: 25em;"
|-
| '''Color''' || '''Direction'''
|-
| '''Alignment''' || '''Transformation'''
|-
| '''Indentation''' || '''Decoration'''
|-
| '''Spacing''' || '''Shadow'''
|-
| '''Line Height ||
|}

| | These are the properties which we use to format and style the '''text''' '''elements '''in '''CSS.'''

Let us understand these one by one through examples.
|-
| | Slide: Color
| | The color of the''' text''' is set by the''' CSS color''' property using these values:

* '''Color names'''
* '''Hexadecimal values'''
* '''RGB (Red Green Blue) values'''

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.

I have already opened it in the '''gedit Text Editor.'''
|-
| | Point to Mypage.html in 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
| | Now open the file '''Mypage.html''' in a web browser.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''text color''' of the '''heading''' is set to '''blue'''.
|-
| | [gedit - mystyle.css]

Highlight: color: blue;
| | This is because, inside the '''h1 tag''', text color of the '''heading '''is set to '''blue '''using the color name.
|-
| | [gedit - mystyle.css] Update:

color: #008000;
| | Now I will set the '''text color''' of the '''heading '''to '''green''' using the '''hexadecimal''' value

Inside '''h1 tag''', update the '''color '''code as shown.
|-
| | [gedit - mystyle.css] Highlight:

color: #008000;
| |

'''Hexadecimal value '''of''' green '''is''' #008000 .'''
|-
| | 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.

Now the '''text color''' of the '''heading '''is set to '''green'''.

Likewise, you can set the '''text color''' using '''RGB color '''values.
|-
| |
| | Now let’s move on to '''text '''alignment.
|-
| | Slide: Alignment
| |
* '''text-align '''property''' '''is used to set the horizontal alignment of the '''text'''.

|-
| | Slide: Alignment

[Image = left.png]

[Image = right.png]

[Image = center.png]

[Image = justify.png]
| | '''Text''' can be aligned either to the:

* '''Left'''
* '''Right'''
* '''Center'''
* '''Justify'''

Let us try one of these.
|-
| | Switch to firefox
| | Switch to the '''browser'''.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''heading '''is now aligned to the '''center.'''
|-
| | [gedit - mystyle.css] Highlight

text-align: center;
| | This is because the '''text-align''' property for the '''h1 tag''' is set to '''center'''.

You can explore the remaining '''text-align properties''' on your own.
|-
| |
| | Next let’s learn about some more '''text''' properties.
|-
| | Slide: Indentation
| |
* '''text-indent '''property''' '''is used to insert an empty space before the first line of '''text'''
* The size of empty space is set using '''length values''' like '''cm, px, % '''etc.

|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css]

Type: text-indent: 60px;
| | I will insert an empty space of '''60 pixels''' before the first line of the '''paragraph'''.

Inside the '''p tag''', below the '''width '''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.

The paragraph now has an empty space of '''60px''' before the first line.
|-
| | Slide: Spacing
| |
* '''Spacing '''property is used to change the space between '''words '''and '''letters '''of a '''text'''.
* Positive values are used to increase the space.
* Negative values are used to decrease the space.

|-
| | Slide: Spacing
| | It has two types of properties:

* '''letter-spacing '''is used to increase or decrease the space in between letters.
* '''word-spacing '''is used to increase or decrease the space between the words.

Let us try this.
|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css]

Type: letter-spacing: -2px;
| | For the '''heading,''' I will decrease the '''space''' between the letters by '''2px'''.

Inside the '''h1 tag''', next to the '''font-size 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.

The '''space''' between the letters in the '''heading''' has decreased.
|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css]

Update: letter-spacing: 7px;
| | Now in the '''heading,''' let us increase the '''space''' between the letters by '''7px'''.

Update the '''letter-spacing '''property value to '''7 pixels.'''
|-
| | 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.

The '''space''' between the letters in the '''heading''' has now increased.
|-
| | [gedit - mystyle.css]

Type: word-spacing: 20px;
| | Next, in the '''paragraph''', let’s increase the '''space''' between words by '''20px'''.

Inside the '''p tag''', after the '''text-indent '''property, type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

We can see that the '''space''' between the words in the '''paragraph '''has increased.
|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css] Highlight:

word-spacing: 20px;
| | To decrease the '''space''' between the words, '''word-spacing''' also accepts the negative values.
|-
| | [gedit - mystyle.css] Update:

word-spacing: 10px;
| | Now, for properly displaying the paragraph in this web page, we will set it to '''10px.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.

This is the required word spacing which we want on this page.
|-
| | Only narration
| | Let’s now move on to the '''height '''property.
|-
| | Slide: Line Height
| |
* '''line-height''' is used to set the space between the lines of the '''text'''.

|-
| | [gedit - mystyle.css]

Type: line-height: 1.8;
| | Switch to the '''mystyle.css''' file.

Now I will assign 1.8 to '''height property''' in the''' paragraph.'''

That is '''1.8''' times the size of the current font.

Inside the '''p''' '''tag''', next to the '''word-spacing property,''' type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

The '''space''' between the lines of''' text''' has increased.
|-
| | Slide: Text Direction
| |
* Direction of a '''text''' is set by '''CSS direction '''property'''.'''
* It has two values:
** '''ltr '''(default): sets the direction from left to right.
** '''rtl: '''sets the direction from right to left.

|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type: direction: rtl;
| | Let’s set the direction of the '''paragraph''' from right to left first.

Inside the '''p''' '''tag''', after the''' line-height '''property type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

Now the direction of the '''text''' of the '''paragraph''' has changed from '''right to left.'''
|-
| | Switch to mystyle.css
| | Switch back to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update: direction: ltr;
| | Now let’s set the direction of the '''paragraph''' from left to right.

Update the '''direction property '''to''' ltr.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

Now the direction of the '''text''' of the '''paragraph''' has changed to the default left to right '''.'''
|-
| |
| | Next, we’ll learn about the '''transformation '''property.
|-
| | Slide: Transformation
| | The '''text-transform '''property manages the capitalization of '''text'''.
|-
| | Slide: Transformation

[Image = uppercase.png]

[Image = lowercase.png]

[Image = capitalize.png]

| | Values of this property are:

* '''uppercase''': Converts all the letters to uppercase
* '''lowercase''': Converts all the letters to lowercase
* '''capitalize''': Converts the first letter of each word to uppercase

Let us try one of these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-transform: uppercase;
| | Now I will set the paragraph''' '''to''' uppercase.'''

Inside the '''p tag,''' next to '''direction property''' type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

All the letters in the paragraph have now changed to''' uppercase.'''

Similarly try the remaining '''direction properties''' on your own.
|-
| | Switch to mystyle.css

Delete: text-transform: uppercase;

Ctrl + S
| | Switch to the file '''mystyle.css'''

Delete the '''text-transform '''property.

And save the file.
|-
| |
| | Next comes the '''decoration '''property.
|-
| | Slide: Decoration
| |
* '''text-decoration '''property is used to apply or remove the decoration of the '''text'''.

|-
| | Slide: Decoration

[Image = overline.png]

[Image = underline.png]

[Image = line-through.png]

[Image = none.png]
| | The values for the '''text decoration''' property are:

* '''Overline'''
* '''Underline'''
* '''Line-through'''
* '''None'''

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-decoration: overline;
| | Now let’s set the '''overline text-decoration '''to the '''heading'''.

Inside the '''h1''' tag, next to the '''letter-spacing '''property, type the shown code.
|-
| | 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.

Now the '''heading''' has an '''overline''' '''text-decoration'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

text-decoration: underline;
| | Now let’s apply an '''underline '''to the '''heading'''.

Update the '''text-decoration''' property to '''underline'''.
|-
| | 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.

Similarly, explore the remaining '''text-decoration properties''' on your own.
|-
| | Only narration
| | We now come to '''text shadows'''.
|-
| | Slide: Shadow

'''text-shadow: h-shadow v-shadow blur-radius color;'''
| |
* '''text-shadow''' property is used to apply '''shadow effects''' to the '''text'''.
* This is the syntax

|-
| | Slide: Shadow
| |
* '''h-shadow: '''Sets the position of horizontal shadow.
* '''v-shadow:''' Sets the position of vertical shadow.
* '''h-shadow''' and '''v-shadow''' are mandatory values

|-
| | Slide: Shadow
| |
* '''blur-radius:''' Sets the radius of blur.
* '''color:''' Sets the color of the shadow.
* '''blur-radius '''and''' color''' are optional values.

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type: text-shadow: 4px 4px 2px;
| | Now I will use this property in the '''heading''' of the page.

I will set '''h-shadow to 4 pixel, v-shadow to 4 pixel, blur-radius to 2 pixel'''

Inside the '''h1''' '''tag''', next to '''text-decoration 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.

In '''heading''', we can see the '''text-shadow''' effect.

Here the shadow color is the same as the text color.

This is because we have not set any '''color''' for the shadow.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

text-shadow: 4px 4px 6px black;
| | Now I will use the '''color''' value for the shadow property.

I will also change the '''blur-radius to 6pixels '''and''' color '''to''' black.'''

So, update the '''text-shadow property''' 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.

In the '''heading''', we can see the '''text-shadow''' in '''black color'''.
|-
| | Only narration
| | In this manner, we can '''style''' our '''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 '''Text '''properties of an '''element''' in''' CSS.'''
|-
| | Slide: Assignment
| | As an assignment

* Open the file '''styles.css''' which you have created earlier
* Set '''yellow''' color to '''heading '''and''' center '''align''' '''it.

|-
| | Slide: Assignment
| | For the '''Paragraph''' content, set the
* '''text-indentation''' to '''1cm'''
* '''word spacing''' to '''3px '''
* '''line-height''' to '''1.2'''
* Direction as '''left to right'''.

|-
| | Slide: Assignment
| |
* '''Underline''' and '''uppercase''' the '''heading'''.
* Set '''text-shadow '''with '''black''' color in the '''heading.'''

* 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 230: / Line 230: @@
 Type: letter-spacing: -2px;
-|  | For the '''heading,''' I will decrease the '''space''' between the letters by '''2px'''
+|  | I will decrease the '''space''' between the letters by '''2px''' in the '''heading.'''
 Inside the '''h1 tag''', next to the '''font-size property''', type the code as shown.
@@ Line 328: / Line 328: @@
 That is '''1.8''' times the size of the current font.
-Inside the '''p''' '''tag''', next to the '''word-spacing property,''' type the code as shown.
+Inside the '''p''' '''tag''', next to the '''word-spacing''' property, type the code as shown.
 |-
 |  | Press Ctrl + S
@@ Line 395: / Line 395: @@
 |  | Observe the output.
-Now the direction of the '''text''' of the '''paragraph''' has changed to the default left to right '''.'''
+Now the direction of the '''text''' of the '''paragraph''' has changed to the default left to right.
 |-
 |  |
@@ Line 444: / Line 444: @@
 All the letters in the paragraph have now changed to''' uppercase.'''
-Similarly try the remaining '''direction properties''' on your own.
+Similarly try the remaining '''text transform properties''' on your own.
 |-
 |  | Switch to mystyle.css
@@ Line 567: / Line 567: @@
 |  | Now I will use this property in the '''heading''' of the page.
-I will set '''h-shadow to 4 pixels, v-shadow to 4 pixels, blur-radius to 2 pixels'''
+I will set '''h-shadow''' to '''4 pixels, v-shadow''' to '''4 pixels, blur-radius''' to '''2 pixels'''.
-Inside the '''h1''' '''tag''', next to '''text-decoration property''' type the code as shown.
+Inside the '''h1 tag''', next to '''text-decoration''' property type the code as shown.
 |-
 |  | Press Ctrl + S

@@ Line 207: / Line 207: @@
 |  | Observe the output.
-The paragraph now has an empty space of '''60px''' before the first line.
+The paragraph now has an empty space of '''60 pixels''' before the first line.
 |-
 |  | Slide: Spacing
@@ Line 230: / Line 230: @@
 Type: letter-spacing: -2px;
-|  | I will decrease the '''space''' between the letters by '''2px''' in the '''heading,'''
+|  | For the '''heading,''' I will decrease the '''space''' between the letters by '''2px'''
 Inside the '''h1 tag''', next to the '''font-size property''', type the code as shown.
@@ Line 238: / Line 238: @@
 |-
 |  | Switch to firefox
-|  | Switch to the '''browse'''r and refresh the page.
+|  | Switch to the '''browser''' and refresh the page.
 |-
 |  | [Firefox] Highlight:
@@ Line 253: / Line 253: @@
 Update: letter-spacing: 7px;
-|  | Now in the '''heading,''' let us increase the '''space''' between the letters by '''7px'''.
+|  | Now in the '''heading,''' let us increase the '''space''' between the letters by '''7 pixels'''.
-Update the '''letter-spacing '''property value to '''7 pixels.'''
+Update the '''letter-spacing '''property value to '''7 px.'''
 |-
 |  | Press Ctrl + S
@@ Line 273: / Line 273: @@
 Type: word-spacing: 20px;
-|  | Next, in the '''paragraph''', let’s increase the '''space''' between words by '''20px'''.
+|  | Next, in the '''paragraph''', let’s increase the '''space''' between words by '''20 pixels'''.
 Inside the '''p tag''', after the '''text-indent '''property, type the code as shown.

@@ Line 546: / Line 546: @@
 |  | Slide: Shadow
 |  |
-* '''h-shadow: '''Sets the position of horizontal shadow.
+* '''h-shadow: '''It sets the position of horizontal shadow.
-* '''v-shadow:''' Sets the position of vertical shadow.
+* '''v-shadow:''' It sets the position of vertical shadow.
 * '''h-shadow''' and '''v-shadow''' are mandatory values
@@ Line 567: / Line 567: @@
 |  | Now I will use this property in the '''heading''' of the page.
-I will set '''h-shadow to 4 pixel, v-shadow to 4 pixel, blur-radius to 2 pixel'''
+I will set '''h-shadow to 4 pixels, v-shadow to 4 pixels, blur-radius to 2 pixels'''
 Inside the '''h1''' '''tag''', next to '''text-decoration property''' type the code as shown.

@@ Line 296: / Line 296: @@
 word-spacing: 20px;
-|  | To decrease the '''space''' between the words, '''word-spacing''' also accepts the negative values.
+|  | To decrease the '''space''' between the words, '''word-spacing''' accepts the negative values.
 |-
 |  | [gedit - mystyle.css] Update:

@@ Line 182: / Line 182: @@
 |  | Slide: Indentation
 |  |
-* '''text-indent '''property''' '''is used to insert an empty space before the first line of '''text'''
+* '''text-indent '''property''' '''is used to insert an empty space before the first line of the '''text'''
 * The size of empty space is set using '''length values''' like '''cm, px, % '''etc.