边框CSS-意外行为

Question

I have created one div in HTML and I have a CSS class for it. I am gonna make an example of my code to explain it better:

HTML

<div style="text-align:center;" class="container">
  <span class="message col-xl-12 col-lg-12 col-md-12 col-sm-12 col- 
   xs-12">Test</span>
</div>

My problem is that I do not get the behavior of the CSS class "message"

At the beginning I was doing it as following:

    .message{
  margin-top: 30px;
  height: 3em;
  line-height: 3em;
  font-size: 25px;
  text-align: center;  
  border-style: solid;
  border-color: #0A76BC;  
  border-bottom: 2px;
  margin-bottom: 5%;
}

but what I found was totally unexpected. I appeared exactly the border that was not mentioned in the class (border-top) but the rest of them:

So I did exactly the opposite and I worked :/

.message{
  margin-top: 30px;
  height: 3em;
  line-height: 3em;
  font-size: 25px;
  text-align: center;  
  border-style: solid;
  border-color: #0A76BC;  
  border-top: 2px;
  border-left: 2px;
  border-right: 2px;
  margin-bottom: 5%;
}

The only thing that I can get is that the class container from bootstrap has some specials features. Could somebody give an explication?

Answer 1

border-bottom: 2px; is a shorthand for border-left-style , border-left-width and border-left-color . As you're not defining border-left-style the default value is used: none . It's overriding the value of border-style .

border-bottom: 2px solid;

will work as intended.

Answer 2

Adding to what Axnyff answered. To understand how CSS (Cascaded Style Sheet) works and why you get odd behaviors, we need to explain the difference and how they override each other. There are three ways we can apply CSS to html element which are inline, internal and external CSS.

1. INLINE CSS:
   Inline CSS or style which is defined as element's attribute style value override internal and external CSS.

2. INTERNAL CSS:
   Internal CSS which is declared in header section of page override external CSS only.

3. EXTERNAL CSS:
   Inline and internal CSS override external imported CSS file with .css extension.

When it comes to using internal and external CSS, CSS declared with id selector override another CSS declared with class selector which style the same element using the same properties, example:

CSS

#test_id { color: red; }
.test_cls { color: green; }

HTML

<div id="test_id" class="test_cls">which color?</div>

The text inside div element above will be red because #test_id override .test_cls class.

And applying multiple CSS to the same element using class can lead to weird result if your not careful, and this happens when two or more declared CSS class have the same properties. example:

CSS

.bdr1 { border: 2px solid red; } 
.bdr2 { border: 4px solid green; }

HTML

<div class="bdr1 bdr2">Which border style is going to be applied?</div>

It happens that .bdr2 is what is applied, but what if we want to apply .bdr1 class? well, we change the CSS .bdr1 above to this:

.bdr1 { border: 2px solid red!important; }

to override

.bdr2 { border: 2px solid green; } 

but be careful using "!important".