Text and Font Style in CSS

Zia

1 Follower

Follow

Jun 17, 2024

-

0 sec read

344

0

0

0

Introduction

Earlier Web designers had limitations in the presentation of text. <font> tags were used to change the color and typeface of the text. Sizing was still a concern and designers used pre-defined font sizes. Effects such as boldness and strike-through were possible only through basic forms of HTML tags. Even applying different colors to the borders and alignment of a paragraph was a concern. Since Web page presentation has become an important aspect of Web designing, style sheets allow various styles for formatting texts, borders, or paragraphs.

Text and Font Style

Text properties specify and control the appearance of text on a Web page. You can change the color of text, increase or decrease the space between characters, align text, and so on using text properties.

Lists different text properties.

• Color: It is used for specifying the color of the text.
• text-align: It is used in specifying the horizontal alignment of text in an element.
• text-decoration: It is used for specifying the decoration of the text in an element.
• text-indent: It is used for specifying the indentation of the first line of text in an element in length or %.
• text-transform: It is used in specifying the casing of text in an element.
• word-spacing: It is used for increasing or decreasing the space between words.
  
  
  

The font properties allow you to specify the font for the text. They allow you to change different font attributes of the text such as the font, size, and style of the text. The browser must support the font specified in the font properties. Otherwise, it will display the default font, which is dependent on the browser.

Lists different font properties.

• font-family: It is used for specifying the font and can specify a generic family or a specific family name such as 'Serif' or Times New Roman'.
• font-size: It is used for specifying the size of the font and can have an absolute or relative value.
• font-style: It is used for specifying the style of the font.
• font-variant: It is used for specifying whether the text should be displayed in small caps.
  
  
  

Text Styles

Different text styles such as text-align, text-indent, and text-transform provide different values that allow specifying the alignment, indentation, and casing of text in an element.

The text-aligned property allows the text to be centered, left or right-aligned, or justified.

Lists the values of the text-align property.

• left: It is used for aligning the text to the left of the Web page.
• right: It is used for aligning the text to the right of the Web page.
• center: It is used for aligning the text in the middle of the Web page.
• justify: It is used for justifying the text on both sides of the Web page.
  
  
  

As discussed, the text-indent property is used for specifying the indentation of the text.

Lists the values of the text-indent property.

• length: It is used in specifying fixed indentation and the default value is 0.
• %: It is used to specify an indentation as a percentage of the width of the parent element. The parent element is the element within which the selector element is defined.
  
  
  

The text-transform property is for changing the case of letters in a text.

Lists the values of the text-transform property.

• none: It is used in specifying that the text will be displayed with the same casing as written within the element.
• Capitalize: It is used to specify that the first letter of each word will be capitalized.
• uppercase: It is used for specifying only uppercase letters.
• lowercase: It is used for specifying only lowercase letters.
  
  

HTML CODE

CSS CODE

The text specified in the DIV element is aligned towards the left and all the letters are displayed in uppercase.

The text-decoration and word-spacing properties provide different values that allow the user to specify the decoration and word-spacing of the text in an element.

Lists the values assigned to the text-decoration property.

• none: It is used for displaying normal text without any formatting.
• underline: It is used for displaying a line under the text.
• overline: It is used for displaying a line over the text.
• line-through: It is used for displaying a line through the text.
• blink: It is used for flashing the text.
  
  

Lists the values assigned to the word-spacing property.

• normal: It is used in specifying normal spacing between words and it is the default value.
• length: It is used in specifying fixed space between words.