i'm styling login , registration forms css. used internal style sheet , wrote of css in there (the css , style tags in between <head> tags). now, created ".css" file , copied of css html external file sheet.
now, problem of css shows, except body's background color:
body { font: 1em/1.62em verdana, sans-serif; background-color: #249ec7; } for reason, whenever code in internal style sheet, background color shows, when transfer same code external style sheet, doesn't show. (this registration form)
the same thing happens login form, not background color no show, padding doesn't show either:
<style media='screen'> body { font: 1em/1.62em verdana, sans-serif; background-color: #249ec7; } form { max-width: 58em; padding: .2em; margin: auto; background-color: #648cd1; color: #31d8eb; text-align: center; } form div { margin: 0em 1em 1em 1em; } form b { font-size: 1.3em; } form b,form input{ display: inline-block; width: 12em; } form input { padding: 0.25em; } h4 a:visited { color: #f56433; } #logindiv { height: 18.5em; margin-top: -9.25em; have no idea what's causing problem, because i'm literally using same css in both internal , external style sheets.
registration form html:
<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'> <link rel='stylesheet' type='text/css' href='/login & register system/css files/registerformcss.css'> </head> <body style='background-color: #249ec7;'> <form action='' method='post'> <fieldset> <h1 style='padding-bottom: .2em;'>register now!</h1> <div> <label for='username'>username:</label> <input type='text' id='username' name='username'> </div> <div> <label for='password'>password:</label> <input type='password' id='password' name='password'> </div> <div> <label for='passwordconfirm'>re-enter password:</label> <input type='password' id='passwordconfirm' name='passwordconfirm'> </div> <div> <label for='fullname'>first , last name:</label> <input type='text' id='fullname' name='fullname'> </div> <div> <input type='submit' name='register' value='complete registration' style='width: 12em; height: 2.5em; cursor: pointer; background-color: #3e1ce8; color: #fafafa; font-size: 1.2em;'> </div> <div> <h4 style='color: #f5e749;'>already own connection account? login <a href='index.php'>here!</a></h4> </div> </fieldset> </form> </body> login form html:
<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device, height=device=height, initial-scale=1'> </head> <body style='background-color: #249ec7;'> <div id='logindiv' style='width: 50%; padding: 10px; border: 5px solid #316ed6; background-color: #648cd1; color: #31d8eb; margin: auto; border-radius: 1.3em; text-align: center;'> <h1>login</h1> <br /> <form action='' method='post'> <div> <b>username:</b> <input type='text' name='username' style='padding: 4px;'/> </div> <div> <b>password:</b> <input type='password' name='password' style='padding: 4px; '/> </div> <div> <input type='submit' value='login' name='login'/> </div> </form> <div> <h4>no account? register <a href='register.php'>here!</a></h4> </div> </div> </body>
css have priority, maybe other rule background overriding external css. try add !important @ end of property.
Comments
Post a Comment