Blog

Typography and text alignment (w3-center, w3-left).

Typography and text alignment (w3-center, w3-left).

W3.CSS has a group set of classes related to typography to control and manage the size, content weight, content styles and default black color of any webpage content text using W3.CSS in existing HTML website webpage.

Typography and text alignment (w3-center, w3-left)

So letтАЩs learn about the classes related to typography in W3.CSS in HTML website.

W3.CSS Text Size Classes.

You can preview web page text content font size in large to small size order using W3.CSS .w3-xlarge, .w3-large, .w3-small, etc. built-in readymade text classes in your existing HTML website webpage.

W3.CSS Text Size Classes Example.

<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>

<p class=”w3-small”>This is a smaller text example </p>

Classes for W3.CSS text size.

  • .w3-xlarge тАФ Previews text in extra large text size in existing HTML website webpage.
  • .w3-large тАФ It previews the web page text content in the current HTML website webpage in large size order.
  • .w3-small тАФ It previews the web page text content in the current HTML website webpage in small text font size.
  • .w3-xsmall тАФ It previews the web page text content in the current HTML website webpage in extra small size.
  • .w3-tiny тАФ It previews the web page text content in the current HTML website webpage in small tiny size.

W3.CSS Text Weight Classes.

You can use W3.CSS Text Weight Classes in your current HTML website webpage to preview any web page text content weight in bold or slightly dark order.

W3.CSS Text Weight Classes Example.

<p class=”w3-bold”>Example of W3.CSS bold text </p>

W3.CSS Classes for Text Weight.

  • .w3-bold тАФ This previews the webpage text content text in bold order in the current HTML website webpage.
  • .w3-light тАФ This previews the webpage text content text in light thin order in the current HTML website webpage.
  • .w3-medium тАФ This previews the webpage text content text in default (medium) font typography weight order in the current HTML website webpage.

W3.CSS Text Style Classes.

You use text style classes in W3.CSS text to control and manage the default style of your existing webpage text in your existing HTML website webpage, such as italicizing and underlining webpage content.

Example of W3.CSS Text Style Classes.

<p class=”w3-italic”> italicized text example</p>

 <p class=”w3-underline”> underlined text example</p>

Classes for W3.CSS text styles.

  • .w3-italic тАФ It previews the text content text in italic order in the current HTML website webpage.
  • .w3-underline тАФ It underlines the text content text in the current HTML website webpage.

W3.CSS Text Color Classes.

W3.CSS provides you with a number of built-in collections of color classes to change the color of the text in your current HTML website webpage.

Example of W3.CSS text color.

<p class=”w3-text-yellow”> yellow text example</p>

<p class=”w3-text-green”>green text example</p>

Classes for W3.CSS text color.

  • .w3-text-red тАФ It previews the text content text in the current HTML website webpage in red text color.
  • .w3-text-blue тАФ It displays the text content text in the current HTML website webpage in blue color.
  • .w3-text-green тАФ It previews the text content text in the current HTML website webpage in green color.
  • .w3-text-grey тАФ It previews the text content text in the current HTML website webpage in grey text color order.
  • .w3-text-yellow тАФ It previews the text content text in the current HTML website webpage in yellow color.

W3.CSS Text Transform Classes.

You can manage text capitalization order in your current HTML website webpage by previewing text in upper case, lower case, capitalized order with W3.CSS Text Transform Example.

Classes for W3.CSS Text Transform.

  • .w3-uppercase тАФ It previews the text content text in the current HTML website webpage in uppercase text order.
  • .w3-lowercase тАФ It previews the text content text in lowercase text order in the current HTML website webpage.
  • .w3-capitalize тАФ It previews the first character of each word of the text content text in capitalized upper case order in the current HTML website webpage.

Example of W3.CSS text alignment and typography.

<p class=”w3-uppercase”>You see uppercase text</p>

<p class=”w3-lowercase”>You see lowercase text.</p>

You can use W3.CSS classes like text alignment and typography to style text in an effective order in your current HTML website webpage with W3.CSS text.

Here is a W3.CSS example of centered, bold and capitalized text with green color.

<!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 Tray W3.CSS Typography Example</title>     

</head>

<body>

    <div class=”w3-left w3-xlarge w3-bold w3-capitalize w3-text-green”> <!– example of left-aligned, bold, large, and green text example–>

        <h1>You Can See W3.CSS Typography </h1>

        <p>You Can See Many Other w3.css Attributes</p>

    </div>

<div>   

<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>

<p class=”w3-small”>This is a smaller text example </p>

<div>

    <p class=”w3-bold”>Example of W3.CSS bold text </p>

</div>

<div>

<p class=”w3-italic”> italicized text example</p>

 <p class=”w3-underline”> underlined text example</p>

</div>

<div>

<p class=”w3-text-yellow”> yellow text example</p>

<p class=”w3-text-green”>green text example</p>

<div>

<p class=”w3-uppercase”>You see uppercase text</p>

<p class=”w3-lowercase”>You see lowercase text.</p>

</div>

</div>

</body>

</html>