In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "We will now build a custom effect called myEffect, which we will add to the overlay code."

A block of code is set as follows:

<!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="mies1">
<!-- large image -->
<img src="photos/barcelona-pavilion-large.jpg" />
<!-- image details -->
<div class="details">
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>The content ...</p>
</div>
</div>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="mies1">
<!-- large image -->
<img src="photos/barcelona-pavilion-large.jpg" />
<!-- image details -->
<div class="details">

<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>The content ...</p>

</div>
</div>

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Clicking the Next button moves you to the next screen."