W3.CSS Tutorial
Selected Reading
- W3.CSS - Discussion
- W3.CSS - Useful Resources
- W3.CSS - Quick Guide
- W3.CSS - Utilities
- W3.CSS - Navigation
- W3.CSS - Colors
- W3.CSS - Icons
- W3.CSS - Images
- W3.CSS - Lists
- W3.CSS - Tables
- W3.CSS - Modal Dialog
- W3.CSS - Tooltips
- W3.CSS - Buttons
- W3.CSS - Forms
- W3.CSS - Grids
- W3.CSS - Responsive Design
- W3.CSS - Cards
- W3.CSS - Code Coloring
- W3.CSS - Containers
- W3.CSS - Environment Setup
- W3.CSS - Overview
- W3.CSS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
W3.CSS - Utilities
W3.CSS - Utipties
W3.CSS has several utipty classes which are very useful for day-to-day designing needs.
Color utipty classes − Examples: w3-red, w3-yellow
Padding utipty classes − Examples: w3-padding-jumbo, w3-padding-16
Margin utipty classes − Examples: w3-margin-8, w3-margin-64
Border utipty class − Examples: w3-border-left, w3-border-right
Size utipty classes − Examples: w3-tiny, w3-small
Circle utipty class − Example: w3-circle
Center utipty class − Example: w3-center
Example
w3css_utipties.htm
<html>
<head>
<title>The W3.CSS Utipties</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>W3.CSS Utipties</h2>
<hr/>
<h3>Color Utipties Demo</h3>
<span class = "w3-container w3-red">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-green">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Padding Utipties Demo</h3>
<span class = "w3-container w3-red w3-padding-jumbo">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-green w3-padding-16">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Margin Utipties Demo</h3>
<span class = "w3-container w3-margin-64">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-margin-8">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Border Utipties Demo</h3>
<span class = "w3-container w3-red w3-border-left w3-border-right">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-green w3-border">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Size Utipties Demo</h3>
<span class = "w3-container">
<p class = "w3-small">Using w3-small font.</p>
<p>Using Default (medium).</p>
<p class = "w3-large">Using w3-large font.</p>
<p class = "w3-xlarge">Using w3-xlarge font.</p>
</span>
<h3>Circle Utipty Demo</h3>
<span class = "w3-container">
<img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
</span>
<h3>Center Utipty Demo</h3>
<span class = "w3-container w3-center w3-black w3-card-2">
<img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
</span>
</body>
</html>
Result
Verify the result.
Advertisements