CODEWITHSUNDEEP
htmlcss
user7184660
user7184660

Reputation:

How do I solve this css issue?

I want to put a box around some html elements. However this code causes each individual element. I do not want to use html or body element because I have other elements that I want outside the box.

h1, p {
                width: 300px;
                padding: 50px;
                border: 20px solid #0088dd;
                text-align: center;}

        </style>
        </head>
        <body>
            <p>this should be in the box</p>
            <h1>this should be in the box</h1>
            <h2> this should not be in the box</h2>

Upvotes: 0

Views: 40

Answers (2)

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

Try to something like this...

 <div class="border-csl">
       <p>lol</p>
       <h1>Thanks for helping</h1>
  </div>

.border-csl {
        width: 300px;
        padding: 50px;
        border: 20px solid #0088dd;
        text-align: center;
 }

Upvotes: 1

Ralph Ritoch
Ralph Ritoch

Reputation: 3440

You need a surrounding element to attach the boder to. In this case you can use the body in your style as follows.

<style type="text/css">
body {
            width: 300px;
            padding: 50px;
            border: 20px solid #0088dd;
            text-align: center;}

</style>

Warning: Placing a border on the body tag isn't going to end up in any list of best practices. Ever!

The right way would be to just use a class

   <style type="text/css">
    .boxme {
                width: 300px;
                padding: 50px;
                border: 20px solid #0088dd;
                text-align: center;}

    </style>
</header>
<body>
    <div class="boxme">
        <p>lol</p>
        <h1>Thanks for helping</h1>
    </div>
    <p>Other text</p>

Upvotes: 2

Related Questions