Join Laurie Burruss for an in-depth discussion in this video Marking up text using the Property Inspector, part of Creating a CSS Style Guide: Hands-On Training.
- View Offline
Right now, all our text looks the same on this web page, but we want to give…certain text more weight and other text less weight, we want it to have…meaning. We want our main headers to be larger, our subheaders to be smaller.…We want our body text to look one way.…So let's start adding some semantic markup, this is called formatting your…HTML. Let's select the first line of text, which is our Simple Text navigation…bar. We can see by using the Tag Inspector at the bottom of the document window…that this has a p tag that is nested in. If I went to Code View right now and…looked at this, you can see that a p tag is wrapped around this line.…
So if you are not sure what kind of tags or formatting you have, you can always…select it and look at the Tag Inspector.…Let's click on Design View. I'm going to leave the navigation bar alone right…now. We will come back to it later. I would like to start formatting the three…headers that I have here.…The first thing I notice is I would like to keep it semantic, make it…
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