The Basics

As you should know, CSS follows one basic pattern:

            
                selector{
                    property: value;
                }

Hello

This is button is represented by the code below :

                
                    button {
                        color: #92dce5;
                        /*Change the text color, not the button color*/
                        background-color: rgb(89, 151, 0);
                    }

As you can see in the code above, we commonly represent colors using text, (e.g. purple), RGB values, or hex. Look at another example here:

            
                h2 {
                    color: teal;
                    background-color: plum;
                    font-family: 'Open Sans', sans-serif;
                }

This is a <h2> header, all the background-color changed using RGB, and text-color changed using the hexadecimal number!

www.coolors.co is one nice way of selecting color codes, either in RGB or hexadecimal

Using common text properties

In the h1, we're also changing the font weight (boldness/lightness): 400 being normal, 700 being bold. <h1> is usually bold, but is now set to 400.

                
                    h1 {
                        text-align: center;
                        font-weight: 400;
                        text-decoration: red underline wavy;
                        letter-spacing: 15px;
                        font-family: 'PT Sans', sans-serif;
                    }

The text-decoration property can be used to add or REMOVE decorative lines on text! I've set h1 to be underlined in red with a wavy line!

If you want to remove all underlines from your web links, just set text-decoration of anchor tags <a> to none.

To double-space your paragraphs (as below), set the line-height to 2! I double-spaced the <body> body of this document to 1.2.

Letter-spacing adds some distance between letters! For this example, I added 15 pixels of letter-spacing in h1.

We can look at different font families on www.cssfontstack.com. We don't always know if our font will work across all machines (Windows, Mac, Chrome, whatever). So, in the font-family part of our specific element, we list a stack of fonts in order. We start with our most preferred and specific, all the way to the most generic.

            
                font-family: Georgia, Times New Roman, serif

This page of my website shows us how to include custom fonts, which guarantee that the user will be able to access them (although possibly at the expense of loading time - don't overuse them!)

Finally, here is a brief and highly UNrecommended way of using inline styles:

                        
                            <h1 style="color:purple">Hello</h1>
                            <button style="background-color:palegreen>I am button</button>

Next in this section, try CSS Selectors