Creating a Border in CSS with Header Role

[Ame25]

Hello Everyone,

I apologize in advance for asking such a rookie question, but I am new to CSS and can’t find much help online regarding my issue.

Here is a portion of the HTML code I am working with at the moment. Unfortunately, I am not allowed to touch the HTML code. Can someone please help me figure out how to create a box with a dotted border around the following code?

    <section class="intro" id="zen-intro">
        <header role="banner">
            <h1>CSS Zen Garden</h1>
            <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
        </header>

I have managed to create one with a div class for another paragraph (as seen in the CSS example below), but the <header role> above is throwing me off with that set of code.

.preamble {
width: 950px auto;
margin: 0 auto;
padding: 0 auto;
border: thin dotted purple;
}

Thank you in advance for your assistance.

[bearhead]

You can select the header with header[role="banner"] in your css, so it will look like:
http://codepen.io/kvana/pen/pgLEap

There was also some goofiness in the css you posted, so I fixed that too.

[Paulie_D]

Your description doesn’t seem to match the code you have provided.

If you make a Codepen.io demo we might be able to help.

Also, “a border around code”…not sure what that means.

Do you have an image of the intended result.

[Author]

Posts