Adding classes to SVG elements - CSS Tutorial

Now that we have our SBG in line in the HTML file and we have some CSS started up here that will allow us to control the CSS elements. Let's now, take some of the inline styles and move them into the CSS area. So, in order to see what some of these SBG paths are doing, if we come down here for example, on line 19 here. I'm going to add an extra a in the word path. I'm going to malform this, so that the browser doesn't understand what this is and what that's going to do is hide that particular SPG or path element. So now, I can see that that element here, this entire path, is now that red segment of this circle. So lets come back here and put this back to say path. Next we have the style element. Just like we would have an inline style in any HTML item. Lets come in here and grab the fill and this color, I'm going to cut this to the clip board and instead lets come in here and add a class. So we'll say class equals, two quotes. And we'll call this segment_red. Now once I've taken that style out, notice that the default is black. So now the segment of that circle is showing up as black. Let's scroll up to our CSS area. Let's come in here and let's create a class called segment_red that matches the name of the class we just put on that element. Let's put in our beginning and ending bracket. And then, let's simply paste in that fill style. Once we do that, we'll see that the red has now been restored to that path segment. So now, what we're doing basically is we're reassigning classes to these individual elements. And then removing the CSS properties that were defined as an in-line style into these external CSS rules. So now with this segment, red, complete, let's scroll down. Let's malform this path name. We can see that this is the bottom green area. So let's come back here, let's restore that name. Let's come in here and select a value of style, which is this fill color for green. Let's cut that. Let's change the style attribute to class. We'll name this segment_green. Let's scroll up. Inside of the CSS let's add a class for segment_green. Put in our brackets, and then paste the property. Let's scroll down. Let's find the third path here. This is the gold segment. Let's fix that name. Let's cut the properties. Rename style to class. Name this segment_gold. Let's scroll up to the CSS. Let's add a .segment_gold class. Paste those properties. And we have one more. Let's scroll down and find the path segment for the aqua color. Which is this one right here. Let's cut the property to the clipboard. Let's replace style with class. Let's name this segment_aqua. Scroll up in the CSS. Let's add a class called segment_aqua. And then paste in those fill properties. So now at this point, all 4 of those SVG segments are now having their color controlled by these CSS rules which are outside of the SVG object. And now with these in place, next we'll use some simple pseudo classes to control the colors of these elements, if somebody rolls their mouse over them.