W3.CSS is one of the most popular, open-source front-end framework which helps us in developing responsive, mobile-first websites, and web applications. As a part of its offering, it provides us with a collection of classes, called the Text Utility classes, which controls various text properties, such as, text alignment, text size, text opacity.
Text Alignment: W3.CSS has three classes to align the text to center, left, and right. The description of them are as follows:
Sr. No. | Class Name | Description |
---|---|---|
1. | w3-left-align | It is used to align the text to the left. |
2. | w3-right-align | It is used to align the text to the right. |
3. | w3-center | It is used to align the text to the center. |
Example:
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
<!-- Text Alignment Classes in W3.CSS -->
< div class = "w3-container" >
<!-- Text Alignment Classes -->
< h3 class = "w3-text-blue" >Text Alignment Classes:</ h3 >
< div class = "w3-container w3-pink w3-round-large" >
<!-- w3-left-align class -->
< p class = "w3-left-align" >
Using w3-left-align class...
</ p >
<!-- w3-center class -->
< p class = "w3-center" >
Using w3-center class...
</ p >
<!-- w3-right-align class -->
< p class = "w3-right-align" >
Using w3-right-align class...
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Wide Text: To make the text appear to look wider we make use of a w3-wide class of W3.CSS.
Example:
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" </ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >GeeksForGeeks</ h2 >
</ div >
<!-- Wide Text Class in W3.CSS -->
< div class = "w3-container" >
< div class = "w3-container" >
<!-- Normal text -->
< h4 class = "w3-text-pink" >Normal Text:</ h4 >
< p >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- Wide text -->
< h4 class = "w3-text-pink" >Wide Text:</ h4 >
< p class = "w3-wide" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Font Sizes:
You can set the font of the text using the size classes of the W3.CSS. The classes that come under this category are as follows:
Sr. No. | Class Name | Description |
---|---|---|
1. | w3-tiny | This class sets the font size of the targeted element to 10px. |
2. | w3-small | This class sets the font size of the targeted element to 12px. |
3. | w3-large | This class sets the font size of the targeted element to 18px. |
4. | w3-xlarge | This class sets the font size of the targeted element to 24px. |
5. | w3-xxlarge | This class sets the font size of the targeted element to 32px. |
6. | w3-xxxlarge | This class sets the font size of the targeted element to 48px. |
7. | w3-jumbo | This class sets the font size of the targeted element to 64px. |
Example:
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
<!-- Different Text Sizes in W3.CSS -->
< div class = "w3-container" >
< div class = "w3-container" >
<!-- w3-tiny text -->
< h4 class = "w3-text-pink w3-tiny" >
w3-tiny Text:
</ h4 >
< p class = "w3-tiny" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-small text -->
< h4 class = "w3-text-pink w3-small" >
w3-small Text:
</ h4 >
< p class = "w3-small" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-large text -->
< h4 class = "w3-text-pink w3-large" >
w3-large Text:
</ h4 >
< p class = "w3-large" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-xlarge text -->
< h4 class = "w3-text-pink w3-xlarge" >
w3-xlarge Text:
</ h4 >
< p class = "w3-xlarge" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-xxlarge text -->
< h4 class = "w3-text-pink w3-xxlarge" >
w3-xxlarge Text:
</ h4 >
< p class = "w3-xxlarge" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-xxxlarge text -->
< h4 class = "w3-text-pink w3-xxxlarge" >
w3-xxxlarge Text:
</ h4 >
< p class = "w3-xxxlarge" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-jumbo text -->
< h4 class = "w3-text-pink w3-jumbo" >
w3-jumbo Text:
</ h4 >
< p class = "w3-jumbo" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Font Styles: W3.CSS also has some inbuilt font styles which can be extensively used to decorate webpages. The list of the classes for the font styles are as follows:
Sr. No. |
Class Name |
Description |
---|---|---|
1. |
w3-serif |
The font style is changed to serif. |
2. |
w3-sans-serif |
The font style is changed to sans-serif. |
3. |
w3-cursive |
The font style is changed to cursive. |
4. |
w3-monospace |
The font style is changed to monospaced. |
Example:
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
<!-- Different Font Styles in W3.CSS -->
< div class = "w3-container" >
< div class = "w3-container" >
<!-- w3-serif Styled Text -->
< h4 class = "w3-text-pink" >
w3-serif Styled Text:
</ h4 >
< p class = "w3-serif" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-sans-serif Styled Text -->
< h4 class = "w3-text-pink" >
w3-sans-serif Styled Text:
</ h4 >
< p class = "w3-sans-serif" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-cursive Styled Text -->
< h4 class = "w3-text-pink" >
w3-cursive Styled Text:
</ h4 >
< p class = "w3-cursive" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
<!-- w3-monospace Styled Text -->
< h4 class = "w3-text-pink" >
w3-monospace Styled Text:
</ h4 >
< p class = "w3-monospace" >
GeeksforGeeks is a Computer
Science portal for geeks.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output: