W3.CSS Text And Fonts
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:
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ 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" > w3wiki </ 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:
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ 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" >w3wiki</ 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 > w3wiki is a Computer Science portal for Beginner. </ p > <!-- Wide text --> < h4 class = "w3-text-pink" >Wide Text:</ h4 > < p class = "w3-wide" > w3wiki is a Computer Science portal for Beginner. </ 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:
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ 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" > w3wiki </ 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" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-small text --> < h4 class = "w3-text-pink w3-small" > w3-small Text: </ h4 > < p class = "w3-small" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-large text --> < h4 class = "w3-text-pink w3-large" > w3-large Text: </ h4 > < p class = "w3-large" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-xlarge text --> < h4 class = "w3-text-pink w3-xlarge" > w3-xlarge Text: </ h4 > < p class = "w3-xlarge" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-xxlarge text --> < h4 class = "w3-text-pink w3-xxlarge" > w3-xxlarge Text: </ h4 > < p class = "w3-xxlarge" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-xxxlarge text --> < h4 class = "w3-text-pink w3-xxxlarge" > w3-xxxlarge Text: </ h4 > < p class = "w3-xxxlarge" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-jumbo text --> < h4 class = "w3-text-pink w3-jumbo" > w3-jumbo Text: </ h4 > < p class = "w3-jumbo" > w3wiki is a Computer Science portal for Beginner. </ 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:
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ 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" > w3wiki </ 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" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-sans-serif Styled Text --> < h4 class = "w3-text-pink" > w3-sans-serif Styled Text: </ h4 > < p class = "w3-sans-serif" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-cursive Styled Text --> < h4 class = "w3-text-pink" > w3-cursive Styled Text: </ h4 > < p class = "w3-cursive" > w3wiki is a Computer Science portal for Beginner. </ p > <!-- w3-monospace Styled Text --> < h4 class = "w3-text-pink" > w3-monospace Styled Text: </ h4 > < p class = "w3-monospace" > w3wiki is a Computer Science portal for Beginner. </ p > </ div > </ div > </ body > </ html > |
Output: