Font sizes and colors (w3-text-red, w3-large).
The W3.CSS Framework Component Library provides several utility classes for manually applying font size and text color to user-defined webpage element content. These pre-created class styles in W3.CSS help you directly style and format your webpage content without writing custom CSS class code. This allows web developers to immediately modify the appearance of text font size and color styles to suit their web design needs without having to apply large lines of CSS code.
Font Size Class in the W3.CSS Framework.
The W3.CSS Framework provides web developers with a variety of built-in class support to increase, decrease, or control webpage text size. These predefined W3.CSS classes have pre-defined values for font size added. These make it easy to grow, shrink, or adjust the size of heading text, titles, paragraph content, and other webpage text elements on any webpage.
Common W3.CSS framework font size classes.
Some of the most popular font size classes used in the W3.CSS framework library are:
- .w3-xlarge – This class is used in the W3.CSS framework library to display webpage text in extra-large size.
- .w3-large – This class is used in the W3.CSS framework library to display large font sizes for text.
- .w3-medium – This class is used in the W3.CSS framework library to display the default size (standard size) for text.
- .w3-small – This class is used in the W3.CSS framework library to display small font sizes for text.
- .w3-xsmall – This class is used in the W3.CSS framework library to display text in an extra-small size.
- .w3-tiny – This class is used in the W3.CSS framework library to apply a smaller font size to text.
Example of the W3.CSS framework font size class.
Here, you can display webpage text in different sizes using the W3.CSS font size class in this HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let’s Explore W3.CSS framework font size classes</title>
</head>
<body>
<!– Example of W3.CSS Extra Large Class Text –>
<h1 class=”w3-xlarge”>Now You See W3.CSS Extra Large Class Text</h1>
<!– Example with W3.CSS Large Text –>
<p class=”w3-large”>Now You See W3.CSS Large Class Text</p>
<!– Example with W3.CSS Default Text –>
<p class=”w3-medium”>Now You See W3.CSS Default Medium Class Text</p>
<!– Example with W3.CSS Small Text –>
<p class=”w3-small”>Now You See W3.CSS Small Class Text</p>
<!– Example with W3.CSS Extra Small Text –>
<p class=”w3-xsmall”>Now You See W3.CSS Extra Small Class Text</p>
<!– Example with W3.CSS Tiny Text –>
<p class=”w3-tiny”>Now You See W3.CSS Tiny Class Text</p>
</body>
</html>
Here in the W3.CSS font size class example above.
- Extra large text <h1 class=”w3-xlarge”> text will be displayed in the <h1> tag element.
- Depending on the class applied to the <p> paragraph tag element, different text font sizes will be displayed on the current webpage. For example, text information will be previewed in different font sizes, from w3-large to w3-tiny.
Popular Text Color Classes in the W3.CSS Framework.
The W3.CSS framework provides web developers with a set of predefined, fixed color classes that can be used to change the title, heading, paragraph, and headline text colors on any website. These W3.CSS framework color classes follow a common naming concept, making it easy to remember color combinations and apply them to webpage content paragraphs.
Common W3.CSS Framework Text Color Classes.
The following are the most commonly used text color classes in the W3.CSS framework.
- .w3-text-red – Displays the current webpage text color in red color in the W3.CSS framework.
- .w3-text-blue – Displays the current webpage text color in blue color in the W3.CSS framework.
- .w3-text-green – Displays the current webpage text color in green color in the W3.CSS framework.
- .w3-text-yellow – Displays the current webpage text color in yellow color in the W3.CSS framework.
- .w3-text-orange – Displays the current webpage text color in orange color in the W3.CSS framework.
- .w3-text-purple – Displays the current webpage text color in purple color in the W3.CSS framework.
- .w3-text-grey – Displays the current webpage text color in gray color in the W3.CSS framework.
- .w3-text-black – Displays the current webpage text color in black color in the W3.CSS framework.
- .w3-text-white – Displays the current webpage text color in white color in the W3.CSS framework.
Example of the text color class in the W3.CSS framework.
So, let’s look at a detailed HTML webpage example of the use of these text color classes in the W3.CSS framework.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let’s Explore W3.CSS framework Text color classes</title>
</head>
<body>
<!– Example of W3.CSS Red class Text –>
<p class=”w3-text-red”>Example with red class color text. </p>
<!– Example of W3.CSS Blue class Text –>
<p class=”w3-text-blue”>Example with blue class color text. </p>
<!– Example of W3.CSS Green class Text –>
<p class=”w3-text-green”>Example with green class color text. </p>
<!– Example of W3.CSS Yellow class Text –>
<p class=”w3-text-yellow”>Example with yellow class color text. </p>
<!– Example of W3.CSS Orange class Text –>
<p class=”w3-text-orange”>Example with orange class color text. </p>
<!– Example of W3.CSS Purple class Text –>
<p class=”w3-text-violet”>Example with purple class color text. </p>
<!– Example of W3.CSS Gray class Text –>
<p class=”w3-text-grey”>Example with gray class color text. </p>
<!– Example of W3.CSS Black class Text –>
<p class=”w3-text-black”>Example with black class color text. </p>
<!– Example of W3.CSS White class Text –>
<p class=”w3-text-yellow” style=”background-color:green;”>This is yellow W3.CSS text color with a green background shadow.</p>
</body>
</html>
In the above text color class example from the W3.CSS framework.
- In this example, each <p> tag paragraph element displays using a different text color class. For example, w3-text-red to w3-text-white uses a different color class.
- The last line demonstrates how yellow text appears on a green background, using inline style=”background-color:green;”
Use of font size and color class groups in the single W3.CSS framework class example.
It is an easy task to group and display the font size and text color classes used in the W3.CSS framework within a single webpage. Web developers can manually apply multiple font size and text color class effects to a single webpage element. This allows both font size and color class attributes to be applied simultaneously to a single webpage.
Example of the font size and color group classes in the W3.CSS framework.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let’s Explore W3.CSS framework font size and color group classes </title>
</head>
<body>
<!– W3.CSS framework Large class text , with Red Text color –>
<h1 class=”w3-large w3-text-red”>Now we see a Large font text size with Red color text display </h1>
<!– W3.CSS framework Small text, with Blue Text color –>
<p class=”w3-small w3-text-blue”>Now we see a Small font text size with Blue color text display </p>
<!– W3.CSS framework Extra Small text, with Green Text color –>
<p class=”w3-xsmall w3-text-green”>Now we see an Extra Text size with Small Green text display </p>
<!– Tiny, Yellow Text –>
<p class=”w3-tiny w3-text-yellow”>Now we see a Tiny Text size with Yellow text display </p>
</body>
</html>
Here, in the font size and color group classes example above.
- In this HTML webpage, both the w3-large (for font size class) and w3-text-red (for color class) classes have been applied to the <h1> tag element. This causes the text in the current webpage to be displayed in large size and red color.
- Similarly, in the current webpage, the other <p> tag elements have been applied a combination of font size and text color classes.
