GIVING YOUR ROBOT STYLE

GETTING THE BASICS OF CSS

Take a look at the first three lines in the CSS pane:

body { font-family: Arial; }

These three lines form a CSS rule. A CSS rule consists of two main components:

Selector: The selector indicates what parts of the HTML we’re going to be styling. In this case, it’s the body element. In other words, the styles that we set will apply to everything that comes between <body> and </body> in the HTML.
Declaration block: The declaration block contains one or more CSS declarations, which indicate how to style the selected element(s). In this example, we have just one declaration: font-family: Arial;. This declaration will change the look, or font, of all the text that appears in the Result pane.

The HTML body element is where everything that will display in your document goes. Even though you don’t need to type it into JSFiddle, it’s still there, because JSFiddle puts it into the Result pane for you.

CSS SELECTORS

The selector is the part of the CSS rule that comes before the {. CSS selectors tell the web browser which HTML elements a style should apply to.

The official name for the { and } characters are curly braces or curly brackets. You can also call them mustaches, though, because they look like fancy mustaches turned on their sides. Figure 4-2 shows Douglas sporting a curly brace mustache.

Figure 4-2: Douglas demonstrating that curly braces look like mustaches.

When you select an element to apply a style to, that same style is applied to every element inside the selected element.

CSS selectors have a number of different ways to select elements. Let’s look at three of these while working with Douglas the Robot:

Element selectors: Take a look at the first two rules in the CSS panel:
body { font-family: Arial; } p { font-size: 1em; }

These are both examples of element selectors. Element selectors select HTML elements using the name of the element.

To use an element selector, just type the name of the element you want to select. In these cases, we’re selecting the body element (which uses <body> and </body> tags) and the p element (which uses <p> and </p> tags).
Class selectors: Class selectors are ideal for times when you need to apply the same style to multiple elements.

You can think of them like a class in school — many kids are all in the same class and that class has a name (like History or Math). All the students in the class are unique, but they’re all learning the same subject because they’re all part of the same class.

Now take a look at the third CSS rule in the JavaScript CSS pane:

.eye { background-color: blue; width: 20%; height: 20%; border-radius: 50%; }

The class selector starts with a period (.), followed by the name of the class.

In this case, we’re selecting all the elements that have class="eye". If you look in the HTML pane, you can see that there are two elements with class="eye". These are used to make Douglas’s two eyes.

When you put text like something="something" inside a starting tag in HTML, that’s called an attribute. For example, in the tag <p class="myText">, class is an attribute and its value is myText.

The same style is applied to both of Douglas’s eyes. They’re both blue, and they're the same size (see Figure 4-3).
ID selectors: The id attribute of an HTML element is how you can uniquely identify an element. Think of an id attribute as being like an element’s name. If your teacher wants to call on a single student in your class, she can do that by using the student’s name. Using an ID selector works the same way.

Douglas has two eyes, which you know are both part of the "eye" class. But we also need to be able to style, move, blink, and wink his eyes separately. To make this possible, we gave each eye its own unique name. The right eye is called (appropriately enough) "righteye" and the left eye is called "lefteye", as you can see in the HTML for his eyes:

<div class="eye" id="righteye"></div> <div class="eye" id="lefteye"></div>

ID selectors start with a hash symbol (#) and select elements using the element’s unique name, or ID attribute.

For example, Douglas’s left eye and right eye have separate ID attributes (see Figure 4-4).

ID selectors are useful when you need to select a single element in an HTML document.

Every ID attribute must be unique within your HTML page.

Figure 4-3: Douglas’s eyes are styled with class selectors.

Figure 4-4: Douglas's eyes have separate IDs.

Table 4-1 is a handy guide to everything you need to know about CSS selectors and how to use them.

TABLE 4-1 THE BASICS OF CSS SELECTORS

Selector Name	Selector Symbol	Example
element	(none)	p {} selects <p></p>
class	. (period)	.red{} selects <p class="red"></p>
id	#	#best{} selects <p id="best"></p>

Now that you know how to select what element or elements you want to style, let’s talk about how to go about styling them and all the great things you can do with CSS declarations.

CSS DECLARATIONS

CSS declarations go inside the curly braces following CSS selectors. Each declaration must end with a semicolon (;). You can have as many declarations between the curly braces as you need to get the job done.

Declarations are made up of two parts:

Property: The property part of a declaration tells what should be modified. For example, you can change the color, width, or location of an element.

CSS contains many different properties, and we’ll show you how to use some of them shortly!

The property must be followed by a colon (:).
Value: The value tells how the property should be changed. For example, you might change the color of Douglas’s nose to red. In this example, color is the property, and red is the value.

To see how declarations work, let’s take a look into Douglas’s eye styles. For the eye class, we created four declarations:

.eye { background-color:blue; width:20%; height:20%; border-radius: 50%; }

Each of these four declarations changes something about Douglas’s eyes.

Figure 4-5 shows each part of a CSS rule.

The word on the left is called the property, and the word on the right is called the value.

Let’s look at some CSS properties now.

CSS PROPERTIES

CSS properties change the characteristics of elements. Douglas the Robot’s beautiful eye color, the size of his body and arms, the roundness of the corners of his head, and the position of his different parts are all determined by the values of those properties.

Let’s make some changes to Douglas’s looks by modifying the values of some different CSS properties:

In the CSS pane, find the CSS rule for the p element.

It’s currently the second rule in the CSS pane.
Change the value of the font-size property to 2.5em.

The complete rule should now look like this:

p { font-size: 2.5em; }

There are several different ways to say how big text should be. The most commonly used ways are by using pixels (px), percent (%), or ems (em). The bigger the number before the px, %, or em, the bigger the text will be. For example, 2.5em is two and a half times bigger than 1em.
Click the Run button to see the change in the Result pane.

The text on Douglas’s shirt is now bigger.
Find the CSS rule for the body element.
Change the value of the body element to the following, paying attention to the use of quotes:
"Comic Sans MS", cursive, sans-serif

The complete CSS rule should now look like this:

body { font-family: "Comic Sans MS", cursive, sans-serif; }
Click the Run button to see the results.

Douglas now has interesting letters on his shirt, as shown in Figure 4-6.

Next, let’s change Douglas’s eye color to match your eye color!
Find the CSS rule that contains Douglas’s eye color.

It currently looks like this:

.eye { background-color:blue; width: 20%; height: 20%; border-radius: 50%; }
Change the value of the background-color property to your eye color.

For example, if your eyes are brown, you would change it to the following:

background-color: brown;
Click the Run button to see the results.

Our CSS pane with the changes made should look similar to Figure 4-7.

Figure 4-6: Douglas, now with fun letters!

Figure 4-7: CSS styles give Douglas the Robot brown eyes.

Notice that the color that Douglas’s eyes change to when you use the word brown doesn’t look very realistic, and the color that is used when you try to make Douglas’s eyes green also isn’t a color that anyone’s eyes are likely to be. To get a more precise color, check out the next section.

COLORIZING DOUGLAS

CSS lets you use millions of different colors. In this section, we’ll explore the vast universe of colors that are available to you.

USING CSS COLORS

CSS colors use different combinations of red, green, and blue to describe the millions of possible colors that a web browser can display.

Some colors can be named using color words. These include the names that you’re familiar with such as red, blue, pink, and yellow. There are also more exotic and interesting colors available, and they have names like HoneyDew, HotPink, and LemonChiffon (yum!).

Even the full list of color names in CSS doesn’t come close to describing every color you might want to use. Fortunately, CSS also lets us specify colors using a code called RGB notation. RGB notation uses different amounts of red, green, and blue to make every possible color. RGB colors are made up of three numbers, ranging from 0 to 255. The color red is made up of all red, no green, and no blue, so it’s written as (255,0,0). The color black is made up of no color at all, so it’s written as (0,0,0). The color blue is all blue, no red, and no green, and its RGB code is (0,0,255). Can you figure out how to make purple?

Table 4-2 lists some color names you can use in HTML, as well as their RGB codes.

Color Name	RGB Value	Color Swatch
Aqua	(0,255,255)
Black	(0,0,0)
Blue	(0,0,255)
Fuchsia	(255,0,255)
Gray	(128,128,128)
Green	(0,255,0)
Lime	(0,255,0)
Maroon	(128,0,0)
Navy	(0,0,128)
Olive	(0,0,128)
Orange	(255,165,0)
Purple	(128,0,128)
Red	(255,0,0)
Silver	(192,192,192)
Teal	(0,128,128)
White	(255,255,255)
Yellow	(255,255,0)

For a complete list of all the color names and RGB codes, visit www.rapidtables.com/web/color/RGB_Color.htm. When you get there, you'll see a table near the bottom of the page with a long list of colors. Figure 4-8 shows just the beginning of this table.

Figure 4-8: The beginning of the complete table of named colors.

If you look at the CSS color table in Figure 4-8, or if you examine certain parts of Douglas’s CSS, you’ll also see another way to make colors in CSS. This third method uses letters and numbers that start with a hash symbol (#). This method is called hexadecimal notation.

CHANGING COLORS

Now let’s use our new color knowledge to make some changes to Douglas’s different parts.

You already played around with changing the color of Douglas’s eyes. What about changing the color of his mouth? In the CSS pane, find the ID selector and declaration for Douglas’s mouth. It looks like this:

#mouth { position: absolute; width: 65%; height: 15%; left: 20%; top: 70%; background-color: red; }

Right now, you have the color for Douglas’s mouth set to the color red. To use one of the RGB colors in Table 4-1, you first need to tell the program that you’re using an RGB color; then add the RGB code of the color you want to use. If you wanted to change the color of Douglas’s mouth to teal, you would write it like this:

#mouth { position: absolute; width: 65%; height: 15%; left: 20%; top: 70%; background-color: rgb(0,128,128); }

The result is shown in Figure 4-9.

Figure 4-9: Douglas with a teal-colored mouth.

Try changing the color of Douglas’s mouth in your own CSS pane.

Directly above the mouth declaration block, there is the declaration block for Douglas’s nose. You can change the color of Douglas’s nose in much the same way as you changed his mouth:

#nose { position: absolute; left: 45%; top: 50%; width: 10%; height: 10%; background-color: rgb(255,0,0); }

The result is shown in Figure 4-10.

Figure 4-10: Douglas the red-nosed robot.

Next let’s change Douglas’s shirt body color. Find the declaration block for his body, and change it to any color you’d like! For example, here's how to change it to yellow:

#body { position: absolute; left: 25%; top: 35%; width: 45%; height: 55%; background-color: rgb(255,255,0); text-align:center; padding-top: 30px; }

The result is shown in Figure 4-11.

Figure 4-11: Making Douglas’s shirt yellow.