HTML and CSS Reference
In-Depth Information
Next, create a style for the CSS element. Within this style, you set the
width
and
the
height
to
100px
, and set the
position
to
absolute
, as you will be moving
the element to different positions on the page. You can also make the square
into a circle by setting the
border-radius
to
50px
. You also explicitly set the
top
and
left
positions to
0px
, and the
background-color
to
blue
.
.test {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50px;
background-color: blue;
}
This will render something similar to the image shown in Figure 5-1.
Figure 5-1.
Rendering of a CSS circle
Now you need to set the next state for the ball. This is as simple as creating a
new style with different properties.
.second-position {
left: 50%;
background-color: yellow;
}
As you can see, the new properties set the circle to be positioned in the middle
of the screen with a
background-color
of
yellow
. Add this CSS class to the test
div
.
