Introduction
This chapter demonstrates about the W3.CSS Text which gives different types of text with different fonts and different effects, following are the concepts covered in this chapter.
- Headings
- Text Alignment
- Overriding the Standards
- External Fonts
- Text Shadow
Description
W3.CSS text headings are same as the HTML headings which by default follow the HTML headings these are <h1> to <h6> in which <h1> is the big size <h6> is the small size The code below demonstrates the Headings of the W3.CSS as shown in below image.
The code below demonstrates the headings as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h1>SPLESSONS</h1>
<h2>SPLESSONS</h2>
<h3>SPLESSONS</h3>
<h4>SPLESSONS</h4>
<h5>SPLESSONS</h5>
<h6>SPLESSONS</h6>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Font size Classes
In W3.CSS Font sizes can be set into different classes The code below demonstrates the different size classes as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Font-Size Classes</h2>
<div class="w3-tiny">SPLESSONS-tiny</div>
<div class="w3-small">SPLESSONS-small</div>
<div class="w3-medium">SPLESSONS-medium (Default)</div>
<div class="w3-large">SPLESSONS-large</div>
<div class="w3-xlarge">SPLESSONS-xlarge</div>
<div class="w3-xxlarge">SPLESSONS-xxlarge</div>
<div class="w3-xxxlarge">SPLESSONS-xxxlarge</div>
<div class="w3-jumbo">SPLESSONS-jumbo</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can arrange the text in a required positions either Left or Right or Center by using the w3-left-align and w3-right-align and w3-center. The code below demonstrates the aligning the text at right side or left side.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Text Alignments</h2>
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>SPLESSONS-Left.</p></div>
<div class="w3-right-align"><p>SPLESSONS-Right.</p></div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates the align the text at center as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="splesson.png" alt="splessons" style="width:80%;max-width:320px">
<p>The w3-center class centers an element.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Wide and Slim Classes
W3.CSS also display the wide and slim classes by which it can display the text in a wide type and slim type. The code below demonstrates the Wide and slim classes as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Wide and Slim Classes</h2>
<p class="w3-wide">Simple Programming Lessons Tutorials.</p>
<p class="w3-slim">Simple Programming Lessons Tutorials.</p>
<p>Normal text.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can override the W3 standard very easy in which user can override the <head> section of a web page instead of head section user can add own CSS file after W3.CSS. User can download and change the content of W3.CSS file the code below demonstrates the Override head section as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
h1 {font-size: 64px;}
h2 {font-size: 48px;}
h3 {font-size: 36px;}
h4 {font-size: 24px;}
h5 {font-size: 20px;}
h6 {font-size: 18px;}
</style>
<body>
<div class="w3-container">
<p>How to override the W3.CSS standards.</p>
<h1>SPLESSONS</h1>
<h2>SPLESSONS</h2>
<h3>SPLESSONS</h3>
<h4>SPLESSONS</h4>
<h5>SPLESSONS</h5>
<h6>SPLESSONS</h6>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In order to make the W3.CSS More effective user can include the external font styles and give the external font in Head section the code below demonstrates the using of external fonts as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.w3-tangerine {
font-family: "Tangerine", serif;
}
</style>
<body>
<div class="w3-container w3-tangerine">
<p class="w3-xxlarge">SPLESSONS!</p>
<p class="w3-xxxlarge">SPLESSONS!</p>
<p class="w3-jumbo">SPLESSONS!</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can make the text more effective by giving the background and external fonts. The code below demonstrates making text more effective by using external font as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
<style>
.w3-allerta {
font-family: "Allerta Stencil", Sans-serif;
}
</style>
<body>
<div class="w3-container w3-black w3-center w3-allerta">
<p class="w3-xlarge">SPLESSONS!</p>
<p class="w3-xxlarge">SPLESSONS!</p>
<p class="w3-xxxlarge">SPLESSONS!</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS User can make the text shadow by using the all possible colors. w3-text-shadow class is designed to work with all colors. The code below demonstrates the Text shadow as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2 class="w3-text-shadow">SPLESSONS!</h2>
</div>
<div class="w3-container w3-light-grey">
<h2 class="w3-text-shadow">SPLESSONS!</h2>
</div>
<div class="w3-container w3-blue">
<h2 class="w3-text-shadow">SPLESSONS!</h2>
</div>
<div class="w3-container w3-lime">
<h2 class="w3-text-shadow">SPLESSONS!</h2>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- W3.CSS Supports the External Fonts.
- User can align the text at anywhere.
- In W3.CSS User can override the head section.