Understanding Styling

Let’s look at some applied CSS, to start understanding how it will effect our webpages.

You’ll see in the example below that the <h1>, <p>, <strong>, and <em> elements are selected. Except for the first instance with the line containing .main-content, the elements are selected using “element” or “type” selectors. “Main Content” uses a class selector (.className), which will be discussed in a few pages.

Within each declaration block, there are multiple style rules, each effecting a specific aspect. Each of the declarations, for each selector, either effects border or background color.

Notice that in the displayed HTML sample below how the code creates borders make it easier to visually identify the individual elements.

Visit the next page to try stying this content yourself!