I cannot get a CSS box to show up in my HTML webpage, what changes should I make?

Question

I want the words "Check Out" to show up in a CSS box, however I am not able to do this. Here is my code:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Box</title>
</head>

<style>
.boxed {
    width: 200px;
    padding: 5px;
    border: 5px blue;
    margin: 0;
}

.shadow {
position: relative;
max-width: 270px;
box-shadow: 1px 1px 1px rgba(0,0, 0, 0.2)
}
</style>
<body>
<div class="boxed">Check Out</div>
</body>

Note: you seem to be missing a closing ` – Brendan Oct 11 '14 at 02:57 — Brendan, Oct 11 '14 at 02:57

CRABOLO · Answer 1 · 2014-10-11T03:13:03.923

0

The style tags go inside the head tags.
like Brendan mentioned, you were missing the closing html tag.
Also, for the border you just had
```
.boxed { border: 5px blue; }
```

You need to specify which type of border, like is it solid, dotted, dashed?

So I added

.boxed { border: 5px solid blue; }

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Box</title>
    <style>
    .boxed {
        width: 200px;
        padding: 5px;
        border: 5px solid blue;
        margin: 0;
    }
    
    .shadow {
    position: relative;
    max-width: 270px;
    box-shadow: 1px 1px 1px rgba(0,0, 0, 0.2)
    }
    </style>
    </head>
    <body>
    <div class="boxed">Check Out</div>
    </body>
    </html>

edited Oct 11 '14 at 03:13

answered Oct 11 '14 at 02:57

CRABOLO

8,605
39
41
68

Style tag can go anywhere. Some people actually recommend putting at the bottom so the HTML can load first. – I wrestled a bear once. Oct 11 '14 at 02:59
1

@Adelphia http://stackoverflow.com/questions/1303416/does-style-have-to-be-in-the-head-of-an-html-document – Barmar Oct 11 '14 at 03:01
Well to be fair, putting it atthe bottom is only recommended when using external style. – I wrestled a bear once. Oct 11 '14 at 03:01
@Adelphia according to [here](http://www.w3schools.com/tags/tag_style.asp) *If the "scoped" attribute is not used, each – CRABOLO Oct 11 '14 at 03:02
What the standard says and what the browsers do aren't always the same. Has anyone ever had an issue with styles in the body not working.. let's be real guys – I wrestled a bear once. Oct 11 '14 at 03:04
1

@Adelphia Browsers are very forgiving. You can also leave out many end tags, the browser will automatically add them when it sees you end a containing tag, but no one would recommend writing HTML like that. – Barmar Oct 11 '14 at 03:09
I saw it in a BootStrap article actually. – I wrestled a bear once. Oct 11 '14 at 03:11

score 0 · Answer 2 · answered Oct 11 '14 at 02:57

0

You need to declare the third part of a border. A border is line thickness(px) color, and type: dashed, solid, transparent and a lot of others. Google it.

answered Oct 11 '14 at 02:57

Dominofoe

603
7
18

creptor4 · Answer 3 · 2014-10-12T02:00:36.197

0

The div is visible. the only thing you missed was a background (pretty, pretty) and maybe if you can't see it on screen is because of it's display, position, size, etc.

if you want to see it go to http://jsfiddle.net/rgqfjb1v/

also check if you have that last </html>

I also added solid for the border, like this: border: 5px solid blue;

'YOU MISSED THE SOLID OPTION'

edited Oct 12 '14 at 02:00

answered Oct 11 '14 at 04:05

creptor4

121
9

I have – JM0 Oct 11 '14 at 16:52

I cannot get a CSS box to show up in my HTML webpage, what changes should I make?

3 Answers3