• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

B. Introduction to Stylesheets > Style Selector Classes

Style Selector Classes

The preceding stylesheet affects all <rect> and <circle> elements. Let’s say, though, that you want only some circles in your documents to be styled. Write your stylesheet with a class specifier as follows, where the dot after circle indicates that the following identifier is a class name:

      circle.special {
        stroke: red; stroke-width: 3px;
        fill: #ccccff;
      }

If, in your SVG document, you had the following elements, the first circle would show up as the default (black fill, no stroke), and the second would take on the style attributes as its class name matches the class identifier in the stylesheet.

<circle cx="40" cy="40" r="20"/>
<circle cx="60" cy="20" r="10" class="special"/>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint