CSS Basics and Douglas the JavaScript Robot

By Chris Minnick, Eva Holland

In this project, you modify and add styles to an HTML robot named Douglas. Douglas was delivered from the robot factory this morning. His JavaScript skills are outstanding; he doesn’t need much maintenance (just a new variable to play with every now and then); and he tells good jokes!

The only problem is, his looks are a bit boring! Sure, he’s got some nice blue eyes, and his “I <3 JS!” T‐shirt is pretty cool. But he just doesn’t look like the fun and goofy robot that you know Douglas to be. So, give him a unique style all his own!

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.

Now you’re ready to start giving Douglas some style!

Take a look at the first three lines in the JavaScript Robot 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 element or elements the CSS rule applies to. In this example, the selector is body.

  • Declaration block: The declaration block contains one or more CSS declarations, which indicate how to style the selected element or elements. In this example, you have just one declaration, fontfamily: Arial;.

CSS selectors

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

When you select an element to apply a style to, it also applies that same style to every element inside the selected element.

CSS selectors have a number of different ways to select elements. Look at three of these while working with Douglas the JavaScript Robot:

  • Element selectors: Take a look at the first two rules in the JavaScript robot 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, you’re selecting the body element (which uses <body> and </body> tags) and the p element (which uses <p> and </p> tags).

  • Class selectors: Take a look now at the third CSS rule in the JavaScript Robot CSS pane:

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

    The class selector starts with a period (.), followed by the value of an HTML attribute named class. In this case, you’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.

    Class selectors are ideal for times when you need to apply the same style to multiple elements. In this case, the robot has two eyes, and the two eyes have several things in common (they’re both blue and the same size, for example).

  • ID selectors: ID selectors start with a hash symbol (#) and select elements based on the value of the element’s ID attribute. For example, Douglas’s left eye and right eye have separate ID attributes:

    #righteye {
        position: absolute;
        left: 20%;
        top: 20%;
    }
    #lefteye {
        position: absolute;
        left: 60%;
        top: 20%;
    }

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

    Every ID attribute must be unique within a document.

    If you look in the HTML pane, you can see that Douglas’s left and right eyes, in addition to both having class attributes, also have unique ID attributes. These attributes were added so that you could position the eyes individually on Douglas’s face.

CSS declarations

CSS declarations go inside declaration blocks following CSS selectors. 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 position of an element. The property must be followed by a colon (:).

  • Value: The value tells how the property should be changed.

Each declaration must end with a semicolon (;). You can have as many declarations within a declaration block as you need to get the job done.

The declaration block for the elements with the eye class, for example, contains four declarations:

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