Difference between revisions of "CSS/C2/Text-Properties-in-CSS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 207: Line 207:
 
|  | Observe the output.
 
|  | 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
 
|  | Slide: Spacing
Line 230: Line 230:
  
 
Type: letter-spacing: -2px;
 
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.
 
Inside the '''h1 tag''', next to the '''font-size property''', type the code as shown.
Line 238: Line 238:
 
|-
 
|-
 
|  | Switch to firefox
 
|  | Switch to firefox
−
|  | Switch to the '''browse'''r and refresh the page.
+
|  | Switch to the '''browser''' and refresh the page.
 
|-
 
|-
 
|  | [Firefox] Highlight:
 
|  | [Firefox] Highlight:
Line 253: Line 253:
  
 
Update: letter-spacing: 7px;
 
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
 
|  | Press Ctrl + S
Line 273: Line 273:
  
 
Type: word-spacing: 20px;
 
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.
 
Inside the '''p tag''', after the '''text-indent '''property, type the code as shown.

Revision as of 15:48, 24 October 2020

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


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
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 the 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 60 pixels 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 browser 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 7 pixels.

Update the letter-spacing property value to 7 px.

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.

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 20 pixels.

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 browser 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 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 browser 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: It sets the position of horizontal shadow.
  • v-shadow: It 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 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.

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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki, Pravin1389

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