Join Laurie Burruss for an in-depth discussion in this video Using the CSS Styles panel to add a new style, part of Creating a CSS Style Guide: Hands-On Training.
- View Offline
With the external CSS style sheet linked to the HTML document, we can continue…to create styles for our tags as well as create classes. Let's take a look at…how we can do that with our external style sheet and using our CSS Styles panel.…At the bottom of the CSS panel are several icons and buttons that we need to…know about. This will link additional style sheets to your document.…This allows you to create new styles. The dimmed-out Pencil allows you to edit style…sheets and edit styles and this as we found can delete styles, so be careful…about using this one.…
We want to create a new style right now and we want to create it for our…Unordered List. I'm going to scroll down so you can see this a little better on…your screen. I'm going to click my I- beam inside the Unordered List. Let's look…at the Tag Inspector and select the Unordered List at the bottom of Tag Inspector.…As soon as we select the UL tag in the Tag Inspector, it actually selects the…entire Unordered List for us. This is a good practice to find the tag that you…
Download the exercise files from the Exercise Files tab.
- Planning a site from a blank file
- Creating and editing a style guide with just HTML
- Using the Property Inspector for text markup
- Inserting images, tables, and footers for a custom look
- Creating and editing an external CSS style sheet
- Building a custom color palette for a site
- Testing web pages in various browsers
- Styling tips for professional sites