- Styling SVG
- The style Attribute
- Inline CSS Property Declarations
- Creating a Style Sheet
- Grouping Styles
- Organizing Your Style Sheet
- Storing and Accessing Style Sheets
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Inline CSS Property Declarations
The first of the three CSS methods, inline CSS property declarations, can be considered the "quick and dirty" process of applying style to an element. To apply this method, you add a style attribute to an element, along with its desired attribute values. For instance, in the lightning bolt example you created previously (Listing 5.8), you applied a stroke and a fill to the object to demonstrate the difference between the polyline and polygon elements. This was done by inserting the following snippet in the polygon element:
style="stroke:black; fill:yellow;".
As you can see from the example, nomenclature for style attributes is quite simple. Each attribute value consists of a style "declaration": a style "property" (stroke in the previous example) and a style "value" (black in the same example) separated by a colon. If more than one attribute value is desired, they are separated with a semicolon.
Keep in mind, a style property must be one of the allowed property names (Hour 7, "Painting," covers the most commonly used properties, fill and stroke, whereas the W3C recommendation's appendix contains the complete list of possible properties), and the style value must be an accepted value for its associated property.
NOTE
As style cannot be applied without style declarations, this hour will use a select few fill and stroke properties to illustrate the style concept. Detailed instruction in these properties (and others) will be covered in Hour 7, "Painting."
In the last hour's lightning bolt example (Listing 5.8), you created a polyline element with a yellow fill and a black stroke. In that case, the bolt had all its style information spelled out with its style attribute. However, if you duplicated the bolt with the same style information dozens of times for your image, you would see style="stroke:black; fill:yellow;" as many times as you saw the polyline element. Obviously, this would create unnecessarily large and bloated files.
To resolve this matter, you can do two things: 1) create a CSS style sheet to decrease the amount of information needed to apply style to objects and 2) utilize groups to more effectively apply style. Such a solution will bring you into the realm of the second CSS style application—internal CSS style sheet references.
Before detailing the process to create and use a style sheet, however, an explanation of the technology is in order. A style sheet is a collection of style rules. Style sheets are created to store a series of rules and to allow a developer to reference these rules within her code.
To allow referencing, a style rule is composed of two items: a selector and a style declaration block. A selector is the label used to reference a particular style declaration, whereas a declaration block consists of a style declaration (which was described earlier this hour) between curly brackets: {}. You can also store multiple declarations within a declaration block by separating them with semicolons.
Selectors can be either an element name or a unique name of your choice. In the instance of a unique name, you must insert a period before the selector in your rule. This period designates the selector as a "class" selector (which can be thought of a a style rule's id value) rather than an element name. As a rule, a selector's name (whether an element name or a class name) consists only of alphanumerical characters and can contain no spaces, periods, or other special characters. If you were to create a rule for your style sheet using an element name, the syntax would be as follows:
element{styleproperty:stylevalue;}
If, on the other hand, you were to create a rule for your style sheet using a unique selector name, the syntax would be as follows:
.selector{styleproperty:stylevalue;}
A style sheet (whether internal or external) can then contain a series of rules, allowing you to store a myriad of style information.
Using a style sheet then can be quite simple; it is merely a matter of linking your style sheet to your document (whether through internal placement or an external link) and applying one of its rules to an element using the class property.
Style sheets can reside in two locations—either within the SVG document or in an external file. When you are creating a style sheet in an SVG document, it must be located within a surrounding style element. To clarify the syntax of your styles, you will need to add a type attribute to the style element; give type an attribute value of text/css to designate the syntax as CSS. As a result, your internal style element will appear as follows:
<style type="text/css"> ... </style>
NOTE
As CSS syntax is quite different from XML and SVG syntax, an SVG viewer might immediately kick back a "well-formed" error if it tried to parse your CSS content within an internal style sheet. To prevent this from happening, you will need to use XML's CDATA sections. A parser ignores any content that resides within a CDATA section. Thus, by enclosing your internal style sheet within <![CDATA[ and ]]> (CDATA's syntax), you will keep its content as readable CSS information.