HTML and CSS Reference
In-Depth Information
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, well look at how to use CSS with our code to
position the elements and change their color.
Youll 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.
Lets take a brief look here at what well 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, well 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">
Well 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 its 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 youd 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 lets 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
