How to target items

Question

I have currently a main style sheet, but multiple pages using that sheet, i do not want to make multiple style sheets, as I am using PHP to out put it. How do I target specific elements such as a text area, Like:

<div id="regform" class="
<label>Password:</label>
<input name="Password" placeholder="Password"></input>

But the css is:

input
{
height:100px;
width: 500px;
padding: 10px;
}

That all works FINE! It creates the look I want, but that changes all text areas to look like that, and that is not what I want, I want only text areas in that div to look like that, as I use text areas alot.

Summary:

How do I change the look of textareas and elements in only ONE div? So it does not affect any other text area.

This is an edit! This did not work PLEASE LOOK AT THIS! http://jsfiddle.net/wbyQL/1/

Answer 1

HTML:

<div id="regform" class="">
<label>Password:</label>
<input name="Password" placeholder="Password"></input>
</div>

CSS:

#regform input
{
height:100px;
width: 500px;
padding: 10px;
}

http://jsfiddle.net/wbyQL/3/

Answer 2

html

<div id="regform" class="x-div">
    <label>Password:</label>
    <input name="Password" placeholder="Password"></input>
</div>

css

.x-div input {
    height:100px;
    width: 500px;
    padding: 10px;
}

Answer 3

Use selectors. Depending on whether you'd like THAT div or ANY div with a text input to have that css applied to them:

HTML:

<div id="regform" class="
<label>Password:</label>
<input name="Password" placeholder="Password"></input>

CSS:

#regform input
{
height:100px;
width: 500px;
padding: 10px;
}

If you want the css to apply to input which is in ANY div and not just that one:

div input
{
height:100px;
width: 500px;
padding: 10px;
}

I would recommend reading up CSS selectors.

#bar div .foo {
 //css stuff
} 

Basically this means: find an element with the class "foo", which is somewhere inside of a div, where that div is somewhere inside of an element with id = "bar";