guwop69 guwop69 - 7 months ago 14
HTML Question

CSS file is not implementing

I am designing this webpage. I am using bootstrap, html, css, jsp.
I want my styles to be inside in a

mystyles.css
file.

In my jsp I have this line:

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/mystyles.css" />


Basically, It is just a link to my mystyles.css file.
This file just has basic css stuff, editing the margin, center etc.

.center_div {
text-align: center;
max-width: 25%;
}

.top-buffer {
margin-top: 20px;
}

.img-space {
margin: 20px;
}

.bdr {
border: 1px solid black;
}

.longform {
width: 350px;
}


When I try adding the class bdr to the div col, it is not working. But when I just add the style directly to my jsp, It is working.

Working:

<div class="col-sm-6">CITY ADDRESS: <input style="width:350px" type="text" /></div>

<div class="col-sm-4" style="border: 1px solid black" >LAST NAME: <input type="text" /></div>


Not working:

<div class="col-sm-6">CITY ADDRESS: <input class="longform" type="text" /></div>

<div class="col-sm-4" class="bdr" >LAST NAME: <input type="text" /></div>


But the other CSS styles I inputted are working, the center_div, top_buffer and etc. The
mystyles.css
is also used by other pages.

Why is it working when I just put
"style:..."
rather than putting it to a
class="..."
and link it to the page?

Answer

You can't use the class attribute twice

<div class="col-sm-4" class="bdr" >LAST NAME: <input type="text" /></div>
       ↑                ↑

it has to be like this, with a space between col-sm-4 and bdr

<div class="col-sm-4 bdr" >LAST NAME: <input type="text" /></div>

Sample snippet

.bdr {
  color: red;
}
<div class="col-sm-4" class="bdr" >LAST NAME: <input type="text" /></div>

<div class="col-sm-4 bdr" >LAST NAME: <input type="text" /></div>


Your code sample with my update, now both works, and if it doesn't in your own full code, you likely have another rule interfere with the .bdr rule.

.center_div {
    text-align: center;
    max-width: 25%;
}

.top-buffer {
    margin-top: 20px;
}

.img-space {
    margin: 20px;
}

.bdr {
    border: 1px solid black;
}

.longform {
    width: 350px;
}  
Working:<br><br>

<div class="col-sm-6">CITY ADDRESS: <input style="width:350px" type="text" /></div>
<div class="col-sm-4" style="border: 1px solid black" >LAST NAME: <input type="text" /></div>

<br><strike>Not</strike> working:<br><br>

<div class="col-sm-6">CITY ADDRESS: <input class="longform" type="text" /></div>
<div class="col-sm-4 bdr" >LAST NAME: <input type="text" /></div>