Resizing Elements with CSS and Douglas the JavaScript Robot

By Chris Minnick, Eva Holland

Every element in an HTML document is a rectangle. Even if an element looks like a circle (like Douglas’s eyes), it’s actually treated like a rectangle surrounding the circle. Because everything is a rectangle, you can change the size of elements with CSS by adjusting their width and height.

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.

When you measure the width and height of things in the real world, you use units of measurement such as inches, centimeters, or meters. When you measure things in the CSS world, you have several different units of measurement. These include px (pixels) and % (percent):

  • Pixels: The pixel is the smallest dot that can be displayed in your web browser. When you specify widths and heights using pixels, you tell the browser exactly how many pixels wide and tall an element should be. The problem with using pixels for measurements is that it always displays things the same size — even if the user’s browser window is very large or very small.

  • Percent: When you specify widths and heights with percent, you’re telling the browser to make the element a certain percentage of the size of the element’s parent.

You’ve specified all of Douglas’s measurements using percent. This is beneficial because it means that regardless of whether you’re looking at Douglas on a mobile phone or on the Jumbotron in Times Square, his size will adapt to fit the screen. To see the magic of relative sizing in action, drag the pane borders in JSFiddle to make the Result pane larger or smaller. Notice how Douglas changes size along with the size of the window.

You may have heard the term responsive design. Responsive design aims to create web content that is flexible and responds to the size of the user’s screen. The way you specified Douglas’s size is an example of responsive design.

Make a couple changes to some of Douglas’s parts:

  1. Find the CSS rule for the eye class.

  2. Change the width to 30% and the height to 30%.

    You’ll notice that Douglas’s eyes get larger. But they’re also no longer centered on his face, as shown in here!

    Douglas's big eyes are off center.

    Douglas’s big eyes are off center.
  3. Find the CSS rule for the arm class.

    .arm {
        background‐color: #cacaca;
        position: absolute;
        top: 35%;
        width: 5%;
        height: 40%;
    }

    The .arm CSS rule controls the color and size of both arms.

    The .arm rule also controls the distance of the arms from the top of the window.

  4. Change the width of the arms to 3% and then click Run to give Douglas skinny arms.

  5. Find the CSS rule for Douglas’s left arm.

  6. Add properties to change the width to be larger than the height.

    For example:

    #leftarm {
      position: absolute;
      left: 70%;
      width: 27%;
      height: 5%;
    }

    Click run to see the change. Douglas is now pointing off screen, as you can see here.

    Douglas is pointing!

    Douglas is pointing!

In the last step, you added a width and height to a rule with an ID selector, even though the selected element already had a width and height applied using a class selector.

Even though there was already a width and height for the left arm, the arm took on the new width and height from the rule with the ID selector.

Understanding cascading

A robot’s left arm can only be one width and height. So, what happens when two different CSS rules try to set the width and height of the arm separately? What happens is that the browser holds a competition between the two CSS rules.

The browser looks at factors such as which CSS rule was set last and which one is more specific to determine which width and height will actually be used.

In this cascading competition, ID attributes win over class attributes because they’re unique to a single element and, therefore, more specific than class attributes.

Positioning elements with CSS

In addition to giving you the ability to change colors and how elements appear in a browser, CSS also lets you change where on screen an element will appear. Changing the place where an element will appear is called positioning an element.

Change the position of some of Douglas’s parts:

  1. Find the CSS rule that controls Douglas’s right eye.

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

    The first property, position, tells the browser how to interpret the specific location properties (such as top and left). When you use absolute positioning, the selected element (the eye in this case) can be positioned anywhere in the head without your needing to worry about whether another element in the head will push it out of the way. If two absolutely positioned elements are positioned in the same place, they’ll simply overlap.

    The right eye is set to show up 20% below (of the height of the head) from the top edge of the head element and 20% (of the width of the head) to the right of the left edge of the head.

  2. Move the right eye to the left and up by changing the value of both left and top to smaller percentages.

    For example:

    #righteye {
      position: absolute;
      left: 10%;
      top: 10%;
    }

    Click Run to see the results, as shown here.

    Douglas raising his right eye.

    Douglas raising his right eye.