How can I style html/form elements using CSS?


Tags: html,css

Problem :

I'm trying to create a log in form and my html so far is:

<body id="login">
<div id="wrapper">

<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">    
       <h1>Login Form</h1> 
        <label>
        <span>Email Address:</span>
        <input id="email" type="text" name="email" placeholder="Enter a valid email address" />
        </label>

        <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" />
        </label>

        <label>
        <span>&nbsp;</span>
        <input type="submit" value="Send" />
        </label> 
</form>
</div>
</div>

I want to style it using CSS. How can I access:

a) the overall form to change the overall style

b) the email address title and box

c) the button

I have tried using . # > but confused myself now. It's probably a really silly mistake I'm making but I can't figure it out...



Solution :

I solved like this CSS

<style type="text/css">
form{
    text-align: center;  /* To align the form center */
    background-color: orange; /* sets the background-color to orange */
}

#password{ /* If you use class attribute, use .password{} */
        /* to modify this section*/
}

#email{
    width: 200px; /* to size the email bar*/
}

#submit_button{
    color: #fff; /* Text Color*/
    background-color: #5cb85c; /* Background color green*/ 
    border-color: #4cae4c; /* border color light green*/ 
}

</style>

HTML

<div id="wrapper">

<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">    
       <h1>Login Form</h1> 
        <label>
        <span>Email Address:</span>
        <input id="email" type="text" name="email" placeholder="Enter a valid email address" />
        </label>
            <br /><br /><br />
        <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" />
        </label>
            <br /><br /><br />

        <label>
        <span>&nbsp;</span>
        <input id="submit_button" type="submit" value="Send" />
        </label> <br /><br /><br />
</form>
</div>
</div> 

    CSS Howto..

    How to prepend a number before an HTML H2 with CSS?

    how to programmatically call the “click” of css

    How to hide crossed-out CSS lines on firebug?

    How to place rectangle inside image and make hover animation for it in CSS?

    How do I turn a string into a “selector”?

    How to fit images into keeping the exact size of

    How to use CSS to style 4 blocks of Info in the homepage?

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?

    How to configure simple_form to show validation status

    How to achieve following graphics via css

    Does anyone know how to store a css change made by javascript function locally?

    How to set the minimum height of a
    box in Internet Explorer 8?

    How to Mask Images with Dynamic Sizes to Shapes?

    How to implement fade in effect for CSS checkbox

    How to let Fancybox Next and Previous button stay visible

    How to manually apply styles from particular style sheet to an element?

    How do you style/select inline-block elements in the first row when in a flexible container?

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    How to split page and reveal stuff underneath?

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    How to shrink the width size hyperlink?

    How to make a website run faster?

    how do I select in css so the items appears in hover state In entire page(mega menu)

    multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How can I set inline css styles for an element with javascript?

    CSS: how to “plot” invisible text over an image?

    How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

    How to rearrange several divs on window resize - jQuery or CSS