CSS Specificity Body - Form

Question

I have several pages and a single external style sheet. The CSS file has the following:

body {
    /*Set background image*/
    background: url("../img/background/main.jpg");
    padding: 20px 20px;
}

body form{
    border: double;
}

According to what I have been learning is that body form would be more specific and should show the double line border around all the elements of type form inside of body.

However, in testing it is not unless I move it above the CSS body {} selector meaning that the body selector in the CSS file is overriding the body form.

What am I doing wrong?

Answer 1

You are correct that body form would take precedence over form, but the problem is in the border declaration. When specifying the values for the border property you should also include the borders width and color as well as the style.

border: double 3px #000;

this would set the elements border to the style of double, a width of 3px, and a color of black.

Make a note that when using border-style double the minimum border-width to make both borders visible is 3px.

Here is a example.

Answer 2

For double border you can use border and outline.

Example

body form {
    border: solid 1px #fff;
    outline: solid 2px #888;
    outline-offset: -5px;
}

DEMO