header.php:
<div class="purple-box">
<!-- Header content -->
</div>
<style>
.purple-box {
/* Styles for purple box in the header */
}
</style>
footer.php:
<div class="purple-box">
<!-- Footer content -->
</div>
<style>
.purple-box {
/* Styles for purple box in the footer */
}
</style>
index.php:
<?php include 'header.php'; ?>
<?php include 'footer.php'; ?>
When I put PHP snippets in index.php because they have the same class name, the styles affect each other. I want to keep the same name but without the styles affect each other. There is any way to achieve this or the only way it to change the names?
*please I want exactly the SAME class names not .header-div1 and .footer-div1. OR .header .div1 and .footer .div1