The Essential Guide to HTML5

QUIZ

The placeholder text will be replaced and the whole thing will be repositioned. We set the text by

assigning a value to the attribute textContent. Next, we
ll look at how to use CSS with our code to

position the elements and change their color.

You
ll see the code in complete context in the Building the Application section.

Changing elements by modifying CSS using JavaScript code

Cascading Style Sheets (CSS) lets you specify the formatting of parts of an HTML document. Chapter 1

showed a very basic example of CSS, which is powerful and useful even for static HTML. Essentially, the

idea is to use CSS for the formatting, that is, the look of the application, and to reserve HTML for

structuring the content. See David Powers
 Getting StartED with CSS (friends of ED, 2009) for more

information on CSS.

Let
s take a brief look here at what we
ll use to generate the dynamically created blocks holding the

country and capital names.

A style element in an HTML document holds one or more styles. Each style refers to

• an element type using the element type name; or


• a specific element, using the id value; or


• a class of elements.

In Chapter 1, we used a style for the body element and for the section elements. For the video, we
ll use a

reference to a specific element. Here is a fragment of the coding, starting with what goes in the style

element:

#vid {position:absolute; visibility:hidden; z-index: 0; }

where vid is the id used in the video element in the body element.

<video id="vid" controls="controls" preload="auto">

We
ll get into the details of this soon when I discuss the video element and its visibility.

Now let's set the formatting for a class of elements. The class is an attribute that can be specified in any

element starting tag. For this application, I came up with a class thing. Yes, I know it
s lame. It refers to a

thing our code will place on the screen. The style is

.thing {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double;


background-color: white; margin: 5px; padding: 5px; }

The period before thing indicates that this is a class specification. The position is set to absolute and

top and left include values that can be changed by code.

The absolute setting refers to the way the position is specified in the document window—as specific

coordinates. The alternative is relative, which you
d use if the part of the document was within a

containing block that could be anywhere on the screen. The unit of measurement is the pixel and so the

positions from the left and from the top are given as 0px for 0 pixels, and the border, margin, and padding

measurements are 2 pixels, 5 pixels, and 5 pixels, respectively.

Now let
s see how to use the style attributes to position and format the blocks. For example, after creating

a dynamic element to hold a country, we can use the following lines of code to get a reference to the thing