Join Chris Converse for an in-depth discussion in this video Creating the pie-chart container, part of Design the Web: Pie Charts with CSS.
- View Offline
Now to begin our project, let's come over and open pie_chart.html. And snippets.html up in your favorite text editor. Now, in my text editor, both of my files are opened up in tabs, so this is the snippets.html file, and here is the pie_chart.html file. The pie_chart.html file is also the file you're going to want to look at, either in the preview of your text editor, or inside of a web browser. The text editor I'm using has a preview feature. So I'm going to come over here and turn this on. So on the right-hand side of this screen now, I can see a live preview of all of the HTML code. And here we can simply we have the body tag, the background color of this light orange or peach color here.
And this is exactly what you'll see if you load pie_chart.html up inside of your web browser. So now, with both of our files in place, let's come down here inside of the HTML area. Let's come down in the body area. Let's remove this HTML content. And let's first add a div container that's going to be the outermost container for the pie chart. So, we'll start by typing in beginning tag, D-I-V for div. We'll add a class, called piechart. Let's end the tag. And next let's end the div. So now with the div element with a class of piechart, let's switch back to our snippets.html file.
Let's scroll down. Let's find snippet one. Now, inside here I have the CSS rule named .piechart to target that class. With a margin set to 50, position relative. Height and width set to 300 each. And a background color of three nines, which is a light gray. So let's come in here and copy all of these CSS properties. Let's switch back to our pie_chart.html. Let's come up inside of this style area, after body. Let's hit a Return. And let's paste in these rules. I'll format that a little bit. Once we paste these in place, and now if you preview this in a browser, you'll see that we now have a 300 by 300 pixel gray box on the page.
Now, to complete our HTML containers, let's come back inside of the body area. Inside a pie chart, let's hit a Return. We're going to add two more divs inside of here. The first div is going to have a class of border. Let's end the tag, and that div. Let's add another div on the next line. We're going to add a class of base to this. Save your HTML file. Let's switch back to our snippets. Let's scroll down to snippet two. Here I have two additional CSS classes. For the border class, we're going to set a border of three pixels. We're also going to use some absolute positioning properties.
We're going to set this to minus six on the top and left. This will move this div vertically and to the left six pixels past the top and left of the outermost container of pie chart. We're also going to set a width of 306. This way, when we add our three pixels of border, this is going to border all around the outside of our outermost container. Under base, we're simply going to set a background of black. Let's copy these, let's switch back to pie_chart.html. After the pie chart class, let's hit a Return, and let's paste these as well. Now, if you look inside of your browser, you'll have a three pixel green border around the outside here and we can see how this is being positioned offset from the gray box.
Now we are going to be setting some additional CSS positioning properties later on, but for now let's come in here and get rid of that gray background. We simply had that there so we could see that the div was actually being written to the page. And now, with all of these in place, we're going to create another class next. And we can share that class amongst all of the individual containers, both for these outermost containers and for the wedge containers we'll create later on.