Overriding CSS

[justpsai]

Hi All,

So …. at the begining of my css I set

ul li {
list-style-type: none;
padding: 0px;
margin: 0px;
}

and later on used a div sectionOne with the below styling:

.sectionOne {
background-color: #f8f8f8;
padding-left: 15px;
padding-top: 7px;
float: left;
width: 928px;
}
.sectionOne ul il {
list-style-type: none;
padding: 0px;
margin: 0px;
float:left;
}

.sectionOne span {
color:#00a4e4;
font-size:1.875em;
}
.sectionOne h2{
font-size:1.875em;
color:#00a4e4;
}

.sectionOne h1{
font-size:1.875em;
color: #ed174f;}

}

My problem is that I have declared a form in this div and no matter how much I style it, it still uses the sectionOne styling.

I have tried using !important next to the style but to no avail.

Can some one help me out please ? Thanks

[Paulie_D]

We’d need to see the page in question or a Codepen.

[justpsai]

Sure – This is the link:

http://cdpn.io/qfvdu

[justpsai]

As in:

form {
padding: 0px;
margin: 0px;
line-height: 37px;
float: left;
width: 600px;
margin-right: 30px;
font-size: 1.200em;
color: #000;
}

Cause i tried this and it still wont work

[Paulie_D]

I wouldn’t be using lists in a form at all TBH. Use divs etc to contain and separate inputs & labels.

Here’s how a default form in Codepen is structured. I added minimal styling to make it more legible.

http://codepen.io/Paulie-D/pen/woeLx

There are also some errors in your CSS…

Such as

.sectionOne ul il 

form .sectionOne ul il

[justpsai]

Yep I gathered that something was wrong with them. Then again When i style the form it still does not work. Buy anyway thanks for your help.

[Designer42]

@jsutpsai,

What exactly are you trying to do? @janet4now is absolutely right, if you want to edit the form elements themselves you need to target the elements.

[Author]

Posts