CODEWITHSUNDEEP
htmlcss
amol
amol

Reputation: 77

Can't apply css to the form

i am currently working on css. i have a sample form and a css but it is not working its only working with the labels but there is no change in the design part i am beginner in CSS so i am not sure what is the issue here

the html code :

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>

    <form action="" method="post" class="STYLE-NAME">
<h1>Contact Form 
    <span>Please fill all the texts in the fields.</span>
</h1>
<label>
    <span>Your Name :</span>
    <input id="name" type="text" name="name" placeholder="Your Full Name" />
</label>
<p>
<label>
    <span>Your Email :</span>
    <input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<p>
<label>
    <span>Message :</span>
    <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
</label>
  <p>  
 <label>
    <span>Subject :</span><select name="selection">
    <option value="Job Inquiry">Job Inquiry</option>
    <option value="General Question">General Question</option>
    </select>
</label>
   <p>   
 <label>
    <span>&nbsp;</span> 
    <input type="button" class="button" value="Send" /> 
</label>    
</form>

</body>
</html>

i have linked this code with an external style sheet which i downloaded from net just for practice but its not working

CSS file :

.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #F7F7F7;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #E4E4E4;
}
.basic-grey h1 {
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #E4E4E4;
margin: -10px -15px 30px -10px;;
color: #888;
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
display: block;
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"],.basic-grey textarea,       

.basic-grey select {
border: 1px solid #DADADA;
color: #888;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
}
.basic-grey select {
background: #FFF url(arrowhead.png) no-repeat right;
background: #FFF url(arrowhead.png) no-repeat right;
appearance:none;
-webkit-appearance:none; 
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey .button {
background: #E27575;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #9E3F3F;
cursor: pointer;
}
.basic-grey .button:hover {
background: #CF7A7A
}

Upvotes: 0

Views: 2049

Answers (3)

stephenmurdoch
stephenmurdoch

Reputation: 34653

For a start you have unbalanced <p> tags, i.e.

<p>  
  <label>
    <span>Subject :</span>
      <select name="selection">
        <option value="Job Inquiry">Job Inquiry</option>
        <option value="General Question">General Question</option>
      </select>
  </label>
<!-- this last one should be a closing tag </p> -->
<p>

Secondly, you have 

<form action="" method="post" class="STYLE-NAME">

Are you sure STYLE-NAME resolves to what you want it to be? Perhaps your template engine is spitting something else out?

Upvotes: 0

bfontaine
bfontaine

Reputation: 19870

You have to replace STYLE-NAME with basic-grey in the HTML. See this jsfiddle.

The CSS uses the selector .basic-grey, which means “elements whose class attribute contains at least basic-grey”. You don’t have any attribute with this class in your HTML. You thus need to either change the CSS’ selectors to something like form, or add the class on the HTML elements. In this case, adding the basic-grey class to the form fixes the whole thing.

Upvotes: 3

Ed Heal
Ed Heal

Reputation: 60047

None of your items in the HTML have a class .basic-X.

For the CSS to work you need to do this or change the HTML/CSS.

Please re-read the chapter on selectors

Upvotes: 0

Related Questions