Styles: Inline and Embedded

First, let's review what we know so far about styles. The style attribute contains various properties. For instance, in the code in Example 8-1, fill, stroke, and stroke-width are properties of the style attribute. These properties control the color of the circle and the color and width of its outline. The properties are further defined by values. The values of the properties in Example 8-1 follow each of the properties and are separated from each property by a colon (e.g., fill:red, stroke:orange, and stroke-width:2). If there is more than one property in the style attribute, the properties are separated by semicolons.

This way of coding the style attribute is known as an inline style. Styles are created for each element as you go along, and these styles consist of what is contained in the style attribute. Inline means within the actual element code of the SVG document.