Colors create the first impression of your site. Bright, vibrant, jewel-like colors make a radically different statement than earth tones. Even if you choose to use only black and white, your design will make a statement. Beyond their decorative impact, colors can also guide the viewer’s eye around the page, helping to highlight some important areas while downplaying others. There are many methods used to add and control color with CSS. Keep in mind, however, you can specify color using several CSS properties. But, how to choose colors?. Choosing Color Values The saying, “There is more than one way to skin a cat,” is grotesque, but it is also applicable to most creative decisions, such as color values in Web designs. You can use several traditional methods to define the same Web page color, and CSS3 even introduces a few new ways.
| Class | Defines |
|---|---|
| w3-color | A background color for an element |
| w3-hover-color | The hoverable background color for an element |
| w3-text-color | A text color for an element |
| w3-hover-text-color | The hoverable text color for an element |
| w3-link-color | The text color for the link |
| w3-link-color-hover | The hover color for the text link |
| w3-link-bg-color | The background color for the link |
| w3-button-color | The button colors |
| w3-button-color-hover | The hover color for the button |
Some custom disable classes. |
To disable shadow: w3-box-shadow-0 | To disable border: w3-border-0 | To disable border round: w3-round-0 | To disable margin: w3-margin-0 | To disable padding: w3-padding-0 | To disable the whole page opacity: w3-animate-opacity-disabled | To disable 100 percent image inside any link: w3-disabled-has-image | To disable text transform: text-transform-none |
*color can be any predefined W3.CSS color name.
