Intro to CSS

What does CSS stand for, and what is its purpose?

Cascading Style Sheets -- Apply visual styles (colors, fonts, spacings, and more!) to HTML elements.

What does CSS code look like?

In this unit we will focus on the rule-set syntax of CSS.


                selector{
                
                    property: value;
                
                }

Other parts of CSS use the at-rule syntax, such as @import and @media statements. We will explore these in a later unit.

Step 1: Copy Template for Today's Work

First, open your template file.

Then, go to File, Save As...

Name the new file "colors.html" and save it in the proper location for your class.

Step 2: Add CSS Code using a STYLE tag

In the <head> section of your code, add the code below.


                <style>
                
                    body{
                    
                        color: pink;

                        background-color: green;
                    
                    }

                    h1{
                    
                        background-color: black;
                    
                    }
                
                </style>

Step 3: Test and Play

Save colors.html to be sure your changes are applied. Test by opening the file in a browser.

Try other names of colors you know. What could be some limitations of using named colors?

How can we achieve over 16 million colors?

Using RGB (Red, Green, Blue) color codes, we can show a lot more colors than the named ones.

The RGB colors can be described with a hex code such as #B398DE. There are 4 parts to this code:

The pound sign (#) tells your browser that this is a color code. There will alwasy be a pound sign in this position.
The first two digits (B3) are the RED value. That's the amount of red light showing.
The next two digits (98) are the GREEN value. That's the amount of green light showing.
The last two digits (DE) are the BLUE value. That's the amount of blue light showing.

You might instead want to use a decimal-based code, such as rgb(179,152,222). This example is exactly the same color as #B398DE. Try them both in your colors.html file to see! The red, green, and blue values, instead of two-digit 0-9A-F, are ordinary up-to-three-digit 0 through 255.

Step 4: Get New Color Codes

Open the Pixlr Editor and create a new image.

Click on the color swatch tool to open the color selector. Use the HSL and/or RGB tabs to find new colors.

In the right-hand side of the color selector you can copy the entire RGB hex code or the individual RGB decimal values.

If you open or paste an existing picture into the editor, you can use the eyedropper tool to select any color in the image, and then open the color selector to find the color code.

Choose your own colors to apply to your colors.html file. Everyone in the class should have all different colors.

Step 5: Add a New Selector

Your template file also includes a paragraph tag. Write new CSS code inside your <style> tag which changes the color of the text in the paragraph tag.

When you are finished, save and test your file one last time before submitting it.

What colors are on this page?

Use your browser's element inspector and/or view-source feature to examine the code of this page.

You may have to follow a <link> tag to a separate stylesheet containing the CSS code. This is an alternative and usually better way to add CSS to a web page. We will discuss these methods and their pros and cons in a later lesson.

Find the color codes and look at the CSS to explore how the selectors choose which elements to apply the colors.