Join Chris Converse for an in-depth discussion in this video Adding CSS styles to the text, part of Create a Sliding Tabbed Panel with jQuery.
Now that we have our HTML containers and content in place, let's open up our CSS file. So from your text editor choose File > Open. From the desktop, let's go into mySlidingPanels, let's go into includes, and let's open sliding_panels.css. So inside of here after, the rules we have just for the default layout, let's come in here and let's target the h2 in paragraph tags for the content we just added. So we'll start with .sp, space, h2, beginning and ending bracket.
So for the h2 we're going to target the font size property. We're going to set that to 1.15ems, which is going to be 15% larger than the base font, which again up here we can see that base font is set to 14 pixels. Next, we're going to set margin. We're going to use shorthand style for this, so 0 on the top, 0 on the right, 0.5ems on the bottom, and 0 on the left. Next, let's create a rule to target the paragraph tags inside of our panels, .sp p, brackets.
We're going to set font size to 1em. Next, we're going to set margin: 0 on the top, 0 on the right, 1em on the bottom, and 0 on the left. So, now with these two rules in place for the content, next we'll work on rules for the outermost container and the tabs.
- Creating the main panel and tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements