Question

We have seen that different HTML elements display different behavior. Some are displayed as blocks, others inline. Some add styling, such as <strong> making its content bold and <a> making it blue and underlining it.

The way an <img> tag shows an image or an <a> tag causes a link to be followed when it is clicked is strongly tied to the element type. But the default styling associated with an element, such as the text color or underline, can be changed by us. Here is an example using the style property:

<p><a href=".">Normal link</a></p>
<p><a href="." style="color: green">Green link</a></p>

The second link will be green instead of the default link color.

A style attribute may contain one or more declarations, which are a property (such as color ) followed by a colon and a value (such as green ). When there is more than one declaration, they must be separated by semicolons, as in "color: red; border: none" .

There are a lot of aspects that can be influenced by styling. For example, the display property controls whether an element is displayed as a block or an inline element.

This text is displayed <strong>inline</strong>,
<strong style="display: block">as a block</strong>, and
<strong style="display: none">not at all</strong>.

The block tag will end up on its own line since block elements are not displayed inline with the text around them. The last tag is not displayed at all— display: none prevents an element from showing up on the screen. This is a way to hide elements. It is often preferable to removing them from the document entirely because it makes it easy to reveal them again at a later time.

JavaScript code can directly manipulate the style of an element through the node’s style property. This property holds an object that has properties for all possible style properties. The values of these properties are strings, which we can write to in order to change a particular aspect of the element’s style.

<p id="para" style="color: purple">
  Pretty text
</p>

<script>
  var para = document.getElementById("para");
  console.log(para.style.color);
  para.style.color = "magenta";
</script>

Some style property names contain dashes, such as font-family . Because such property names are awkward to work with in JavaScript (you’d have to say style["font-family"] ), the property names in the style object for such properties have their dashes removed and the letters that follow them capitalized ( style.fontFamily ).

This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but they contain a lot more hidden complexity and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.