CSS Applied:

Lets 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.

Altogether Now

{ TODO: }

Please click here to edit the above Pen:

1. Change the color of some text.
2. Changed the background of the main <div> to “silver”.
3. Change all the boarders to “#5e001d”.
4. Add another <p> with both an <em> and <strong> element. How does it look?
5. Feeling adventurous? Add some paragraphs to the secondary <div> and add your own style elements to .secondary-container in the CSS - whatever you can come up with!

---