CSS Properties and Douglas the JavaScript Robot

CSS properties are what change the characteristics of elements. Douglas the JavaScript 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 properties.

To get started, open your web browser and log into the public dashboard. Then follow these steps:

1. Find the fiddle called Chapter 6: Robot Style – Start and click the title to open it.

   You can also go directly to the Robot app.

   You see a screen with HTML in the HTML panel and some CSS in the CSS panel.

2. Click Fork in the top menu to make a copy of the fiddle in your own JSFiddle account.

Make some changes to Douglas's looks by modifying the values of some different CSS properties:

1. Find the CSS rule for the p element.

   It's currently the second rule in the CSS pane.

2. 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 specify text sizes. The most commonly used ways are by using pixels (px), percent (%), or ems (em). When you use percent or ems, the font size of the selected element is set based on the font size of the parent element. For example 2.5em is two and a half times the font size of the selected element's parent.

3. Click the Run button to see the change in the Results pane.

   

   Douglas with a bold message.

4. Find the CSS rule for the body element.

5. 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;
   }

6. Click the Run button to see the results.

   Douglas now has interesting letters on his shirt.

   

   Douglas, now with fun letters!

   Next, change Douglas's eye color to match your eye color!

7. 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%;
   }

8. 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;

9. Click the Run button to see the results.

The color that Douglas's eyes change to when you use the word brown doesn't look very brown, 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, you can use another one of the CSS color names or create your own custom color by using hexadecimal notation.