📖 Using the W3.CSS Library
The W3.CSS library is a library of predefined styles saved in external style sheets. They are free to use and fairly easy to learn how to use. This will give you a basic experience using frameworks to help provide the basis for incorporating more advanced techniques.
Since the library is designed, distributed and supported by W3 Schools, we should use their site as the official reference when working with the library. Go to https://www.w3schools.com/w3css/default.asp to get an overview of using the library.
In order to use the library, you must either install the files to your site or link to them at W3 Schools. W3 Schools maintains a CDN (Content Distribution Network) to allow developers to use their library directly. I prefer using their CDN, but it has the limitation of not being customizable in the event I want to change their core files. They welcome you to make changes, if you desire, without any limitations, but you have to download the core library to make changes. You'll have to decide how you want to approach this issue, but for now you can just use the CDN.
To use the style sheets from W3 Schools, you just need to add a link reference in the <head> of your page pointing to the CSS files. This works from anywhere in the WWW.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">The only other thing you need to know is how to access the design styles in the library. There are pages and pages of examples and how to articles at W3 Schools. Basically, the method of using any particular style is through the extensive use of classes. The W3 Schools library is coded using specific styles that provide a variety of style options including layouts, colors and themes.
Using the W3 Schools Classes
Here is a basic example of using a W3 class to set the background color of a div. I'm adding the text "My Div Example" to help you correlate the effect with the code. The two classes used in the example will define a button (w3-button) and the color (w3-theme). Notice that the class names all start with w3-.
<div class="w3-button w3-theme">
<p>My Div Example</p>
</div>I know that this isn't overflowing with style, but it does demonstrate how easy it is to create styled elements with just a couple of classes. By the way, you can stack many classes in an element to get even more effects. Just make sure you separate the class names with a blank space. You should also know that not all classes are compatible. It might be best to take a working sample of what you are trying to create and adapt it to you site.
It's a good time for you to go over to W3 Schools and take a look at some of the samples they provide so you can get an idea of the kind of what you might do with this tool. Review the intro at https://www.w3schools.com/w3css/w3css_intro.asp. Try to find one you could use to enhance your site. Just be aware that W3 Schools does tutorials for web coding including CSS. That means they have tutorials on CSS and W3-CSS. If you are looking at a page that doesn't seem right, it could be you went to the wrong area. Also, use W3-CSS or W3.CSS in your Google searches to help you find the right spot.