ACSS 101.07.P1: Background & Text Color (Traditional Approach)

There are two approaches to setting and managing background and text color in Automatic.css. In Part 01, I'll show you the traditional approach. In Part 02, I'll show you the new "contextual" approach.
You can use either approach, but the new contextual approach offers a lot of benefits over the traditional approach. The only caveat is that it might take you a couple explanations and some experimentation to wrap your brain around it.
Nevertheless, let's get started by covering the traditional approach:
- How to set default website background color
- How to set default text color
- How to change background color with utility classes
- How to change background color with variables
- How to change text color with utility classes
- How to change text color with variables
---
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco

[@stphnmwlkr]

Another great video to explain using ACSS. Now on to part 2.

[@ReubenHochstetler]

That makes sense about using BG utility classes for sections instead of styling at the ID. I've been turning off all utility classes in ACSS but am going to turn on BG utility classes and start using them. What convinced me was how much extra CSS is written for styling at the ID and also the specificity issue. Great video as always.

[@eucalyptech]

Some great tips, thank you Kevin !

[@davidwalls2304]

Great lesson, now on with the show in part 2.

As an addition: In order to achieve the transparency on a Windows computer, the Control & ALT keys (German CTRL+ALT) must be pressed at the same time when moving the mouse over it.

[@grizfan93]

Holy smokes - I completely missed picking up on the ability to right-click to access ACSS variables and classes. That helps so much!

[@AutomaticCSS]

Huge productivity increase!

[@Luca-ui3rn]

Awesome! Thank you! :)

[@febryanvaldo]

I'm still on 2.8.3, need to wait till stable 3.0.0 release. Hopefully not too long....

[@jamessowerscom]

Ok, stupid question, how do I get that bracket button to open ACSS panel to show up in my Bricks?

[@AutomaticCSS]

Are you using 3.0?

[@jamessowerscom]

@@AutomaticCSS No, I just now found the receive beta releases option :) Thanks!