Practice CSS
using the same file(login.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button> Login</button>
</body>
</html>
To change a style, we have to 'call' it.
Add
class='name'after<h1>to name 'login page'.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> </head> <body> <h1 class="mytitle">Login Page</h1> <p>ID: <input type="text" /></p> <p>PW: <input type="text" /></p> <button> Login</button> </body> </html><h1 class="mytitle">Login Page</h1>means I'm going to call 'Login Page' as 'mytitle'.Once it's named, add
<style><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> <style> .mytitle { } </style> </head> <body> <h1 class="mytitle">Login Page</h1> <p>ID: <input type="text" /></p> <p>PW: <input type="text" /></p> <button> Login</button> </body> </html>
The below means, make 'mytitle' 'ABC'
<style>
.mytitle {
}
</style>
e.g.
color: red;: make it red<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> <style> .mytitle { color: red; } </style> </head> <body> <h1 class="mytitle">Login Page</h1> <p>ID: <input type="text" /></p> <p>PW: <input type="text" /></p> <button> Login</button> </body> </html>
** For HTML tag, it's important to understand which one is under which one.