Home Logic Battle Card RPG Godot Tutorials Website Builder Linux Gaming Blog NodeJS + Postgres LAMP Stack HTML CSS PHP ReactJS VR Tech Blog PHP Fiddle

CSS Colors - Intro to CSS Styles

Quick Copy Boxes


CSS is can be used to customize your web application's color scheme. There are some colors you can write by name, such as green, blueViolet, and grey. However, you can use color codes, such has hex and rgb, to customize exact shades.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.


Selecting a Color

✶Color Selector Tool✶
Below is a tool you can use to find the hex or rgb color code.

Color Selector

Simply click in the color box below to select a color. The hex number for that color will appear in the color box. Below the color box, the Hex and rgb code will appear.

Color Box:


Hex:


RBG:

Now that we know how to find the color code, let's learn how to use it in our CSS.


Text Color

In CSS, 'color' indicates text color.

Example: Redish Text


          .redishText {
            color: #FF4E4E;
          }

➼ .redishText - This is our class name, used in HTML tags.
➼ {} - The CSS code for the class redishText is inside these curly brackets.
➼ CSS Code - The text contained in redishText HTML elements, will be this color: #FF4E4E
➼ ; - Each line ends with a semi-colon.

HTML Tag: redishText class <div>

 <div class = 'redishText'>This is redish text!</div>

Example: Body with Redish Text


          body {
            color: #FF4E4E;
          }

➼ body - This CSS code is for every page body that includes it.
➼ {} - All the CSS code for the body is in these curly brackets.
➼ CSS Code - The text contained in the body will be this color: #FF4E4E
➼ ; - Each line ends with a semi-colon.


<body>
  <div>
    The text in this div will be: #FF4E4E.
  </div>
</body>

Background Color

Let's add a background-color to our CSS code.


       .redishText{
         color: #FF4E4E;
         background-color: blue;
       }

➼ .redishText - Class Name
➼ {} - All the CSS code for redishText is inside these curly brackets.
➼ CSS Code - The code for redishText.
➼ color - Color of the text within redishText class elements: #FF4E4E
➼ back-ground color - The background color of redishText elements will be blue.


Project - Part I: Creating an Ad


Background:
Earth has been occupied by alien bugs. You are a front-end web developer in the human resistance. Coding Commanders (the resistance web developers) use web development to defeat the bugs. They are desperate for new recruits and are willing to train.
Assignment:
Make a Coding Commanders ad that encourages new volunteers to sign up. Use HTML and CSS. As you go through the CSS tutorials, continue customizing your ad.

Play with the code in the code editor below.