Welcome to The Coding College! 🚀 If you’re looking for a complete W3.CSS Reference, you’re in the right place. This guide provides a comprehensive list of W3.CSS classes and properties so you can quickly find what you need while working on your web projects.
W3.CSS is a lightweight, responsive CSS framework that helps you design modern, clean, and beautiful websites without much hassle.
Why Use This W3.CSS Reference?
- Quick Navigation: Find classes for specific styling needs fast.
- Easy to Understand: Simple explanations with code examples.
- Helpful for Beginners: No need to memorize; just refer to this guide.
- SEO-Friendly: Fully optimized for performance.
Bookmark this page and enhance your coding efficiency with W3.CSS!
1. W3.CSS General Classes
These general utility classes are the backbone of W3.CSS. Use them to style your HTML elements quickly.
| Class | Description |
|---|---|
w3-padding | Adds default padding. |
w3-margin | Adds default margin. |
w3-round | Makes borders rounded. |
w3-border | Adds a border around an element. |
w3-center | Aligns content to the center. |
w3-hide | Hides the element. |
w3-show | Makes a hidden element visible. |
w3-hover-opacity | Changes opacity on hover. |
Example:
<div class="w3-container w3-border w3-round w3-center">
<p>Centered Box with Border and Rounded Corners</p>
</div>2. W3.CSS Layout and Grid
W3.CSS provides a fluid grid system to create responsive layouts easily.
| Class | Description |
|---|---|
w3-row | Defines a row. |
w3-half | Divides content into 2 equal parts. |
w3-third | Divides content into 3 equal parts. |
w3-quarter | Divides content into 4 equal parts. |
w3-col | Defines a custom column width. |
Example:
<p class="w3-text-red">This is red text.</p>
<div class="w3-container w3-green">Green Container</div>3. W3.CSS Colors
W3.CSS includes a variety of predefined colors.
| Class | Color |
|---|---|
w3-red | Red |
w3-blue | Blue |
w3-green | Green |
w3-yellow | Yellow |
w3-grey | Grey |
w3-black | Black |
w3-white | White |
Example:
<button class="w3-button w3-red w3-round w3-hover-blue">Click Me</button>4. W3.CSS Buttons
Buttons are an essential part of any UI. W3.CSS provides customizable buttons.
| Class | Description |
|---|---|
w3-button | Styles a button. |
w3-hover-blue | Changes background on hover. |
w3-red | Adds a red color. |
w3-round | Makes button corners rounded. |
Example:
<p class="w3-large w3-serif">This is large serif text.</p>5. W3.CSS Text and Fonts
Control text alignment, size, and fonts using W3.CSS classes.
| Class | Description |
|---|---|
w3-large | Larger text size. |
w3-small | Smaller text size. |
w3-text-blue | Changes text color to blue. |
w3-serif | Applies a serif font family. |
w3-monospace | Applies a monospace font. |
Example:
<p class="w3-large w3-serif">This is large serif text.</p>6. W3.CSS Tables
Quickly style your tables with W3.CSS classes.
| Class | Description |
|---|---|
w3-table | Styles a table. |
w3-bordered | Adds borders to a table. |
w3-striped | Adds striped rows. |
Example:
<table class="w3-table w3-bordered w3-striped">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>7. W3.CSS Containers and Cards
Containers and cards help organize your content.
| Class | Description |
|---|---|
w3-container | A content wrapper. |
w3-card | Styles a card container. |
Example:
<div class="w3-card w3-padding w3-round">
<p>This is a card.</p>
</div>8. W3.CSS Images
Control image size and responsiveness.
| Class | Description |
|---|---|
w3-image | Makes an image responsive. |
w3-round | Rounds image corners. |
Example:
<img src="example.jpg" class="w3-image w3-round" alt="Sample Image">9. W3.CSS Navigation
Design menus, navbars, and sidebars easily.
| Class | Description |
|---|---|
w3-navbar | Styles a navigation bar. |
w3-sidebar | Styles a sidebar. |
Example:
<div class="w3-sidebar w3-blue w3-padding">
<h3>Menu</h3>
</div>10. W3.CSS Animations and Effects
W3.CSS provides smooth animations and visual effects.
| Class | Description |
|---|---|
w3-animate-fading | Fades in an element. |
w3-hover-opacity | Adds opacity hover effects. |
Example:
<div class="w3-container w3-animate-fading">
<p>Fading Text</p>
</div>11. W3.CSS Advanced Features
Advanced classes include modals, tooltips, accordions, and more.
| Class | Description |
|---|---|
w3-modal | Styles a modal. |
w3-tooltip | Adds a tooltip effect. |
Example:
<div class="w3-tooltip">
<p>Hover over me</p>
<span class="w3-text w3-tag w3-small">Tooltip text</span>
</div>Conclusion
This W3.CSS Reference serves as your go-to guide for designing websites quickly and efficiently. Use it as a cheat sheet while coding your projects.
To learn more about W3.CSS and other programming resources, visit The Coding College. Start building professional websites today! 🚀