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

Hour 6. Styling SVG > Storing and Accessing Style Sheets

Storing and Accessing Style Sheets

In many cases, you will be designing multiple SVG files that all use the same style sheet information. Rather than duplicating your style sheet information in each SVG file, you can use the third CSS style sheet option: referencing your external CSS style sheet. To try this out, create a file named style.css in the same directory as your index.html and SVG files. Then, copy the style sheet information (just the rules, not the CDATA and style elements) from the previous example and paste it into this new document. When you are finished, the “style.css” document will appear just as Listing 6.9.

Listing 6.9. Creating an External Style Sheet

01:         .StrokeGreen{stroke:green;}
02:         .StrokeYellow{stroke:yellow;}
03:         .StrokePurple{stroke:purple;}
04:         .StrokeOrange{stroke:orange;}
05:
06:         .FillGreen{fill:green;}
07:         .FillYellow{fill:yellow;}
08:         .FillPurple{fill:purple;}
09:         .FillOrange{fill:orange;}
10:         .FillBlue{fill:blue;}
11:         .FillPink{fill:pink;}
12:         .FillBrown{fill:brown;}
13:         .FillRed{fill:red;}
14:         .FillBlack{fill:black;}
15:         .FillWhite{fill:white;}
16:
17:         .DisplayInline{display:inline;}
18:         .DisplayNone{display:none;}


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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