Frontend Engineering, Volume II

CSS: Example 1c—Add an Embedded Style Sheet

© 2013, Martin Rinehart


Your template should already have an empty embedded style sheet. (Put it in your template if you don't have one. You'll almost always use it.)

Inside the <style> tags in your test page, add the highlighted lines here:

<style type='text/css'>
    p {
        border-color: blue;
        border-style: solid;
        border-width: 3px;
    }

</style>

That's all you need to add a solid blue, 3-pixel wide border to all your paragraphs, like these:

Web page with all paragraphs bordered in solid blue.

Two points, before we go on. First, assume that you had lots of paragraphs, not just two. You've just styled them all. Second, styles can be abused, as well as used. Our example will get worse as we go along. Learn what we are teaching about the mechanics of using styles, but do not take this as a good example when it's time to style your own pages.

Feedback: MartinRinehart at gmail dot com

# # #