How can I define different style for different page in CSS?

3 weeks ago 37
ARTICLE AD BOX

Add Page-Specific Classes to the Body Tag

For login.html:

<body class="login-page"> <!-- content --> </body>

For signup.html:

<body class="signup-page"> <!-- content --> </body>

For other-page.html:

<body class="dashboard-page"> <!-- content --> </body>

And in style.css:

body { font-family: Arial, sans-serif; } /* Login page specific styles */ .login-page { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Signup page specific styles */ .signup-page { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); min-height: 100vh; } /* Dashboard page specific styles */ .dashboard-page { background: #f5f5f5; }

This is industry standart way and it is easy to maintain. You don't need to create divs with 100vh/100vw— just style the body element differently based on its class.

Deividas Strole's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Read Entire Article