How to override the universal selector *? - html

Question

so I am trying to set all the margins and the paddings for the upper part to 0 then add padding and margin to the elements individually whenever I need to that's why I would like to override the color and the margin set by the universal selector * but it doesn't work, everything is staying deeppink and also the margin doesn't change, please help.
/*------------------------All Margin & Padding-------------------------*/
.upperPart {
margin: 0px;
padding: 0px;
background-color: darksalmon;
}
.upperPart * {
margin: 0px;
padding: 0px;
background-color: deeppink;
}
body {
margin: 0px;
padding: 0px;
}
/*-----------------------------------Colors-------------------------*/
header {
background-color: darkolivegreen;
}
h1,
h2,
h3 {
background-color: mediumspringgreen;
}
nav {
background-color: teal;
}
ul {
background-color: magenta;
}
li {
background-color: yellow;
margin: 5px;
}
li {
background-color: blue;
margin: 2px;
}
div {
background-color: brown;
}
section {
background-color: lightsteelblue;
}
nav ul {
list-style-type: none;
display: flex;
flex-direction: row;
}
<!----------------------------THE UPPPER PART------------------------------------------->
<div class="upperPart">
<!---------------------------HEADER-------------------------------------->
<header>
<h1>Untitled</h1>
<img src="" alt="logo" name="logo" />
<h3>description in form of a slogan</h3>
</header>
<!---------------------------NAVIGATION----------------------------------->
<nav>
<ul>
<li>Home</li>
<li>Shops and Products</li>
<li>Find Work/Worker</li>
<li>New Shops</li>
<li>Contact</li>
</ul>
</nav>
<!---------------------------SEARCH--------------------------------------->
<div>
<form method="post" action="searchAppPhp.php">
<label>Search </label>
<input type="text" id="search" size="50" />
<input type="submit" name="search"/>
</form>
</div>
</div>
<!----------------------------THE MIDDLE PART------------------------------------------->
<div class="middlePart">
<section>
<article>
</article>
</section>
</div>
<div class="downPart">
<footer>
</footer>
</div>

Answer 1

CSS Specificity.
Since you used .upperPart * to null styles instead of arguably-preferably using * {}.
And since we are not supposed to ever use !important (unless we really, really know what we're doing)...
you'll need to use a more specific Rule as override. I.e:
.upperPart header {
background-color: darkolivegreen;
}
Etc. for all your nulled .upperPart descendant Elements (*).
Suggestion:
Don't style TAGS directly (or keep it minimal, margins, font-size, paddings etc).
Style only Classes or IDs.
/* QuickReset */
* {
margin:0;
box-sizing: border-box;
padding: 0;
}
/* DEFAULT STYLES FOR TAGS */
h1,
h2,
h3 {
/* Keep it minimal */
}
nav {
/* Keep it minimal */
}
ul {
/* Keep it minimal */
list-style-type: none;
display: flex;
flex-direction: row;
}
li {
/* Keep it minimal */
}
/* STYLES FOR SPECIFIC CLASSES */
.upperPart {
background-color: darksalmon;
}
/* ...Etc... */
<div class="upperPart">
<header>
<h1>Untitled</h1>
<img src="" alt="logo" name="logo" />
<h3>description in form of a slogan</h3>
</header>
<nav>
<ul>
<li>Home</li>
<li>Shops and Products</li>
<li>Find Work/Worker</li>
<li>New Shops</li>
<li>Contact</li>
</ul>
</nav>
<div>
<form method="post" action="searchAppPhp.php">
<label>Search </label>
<input type="text" id="search" size="50" />
<input type="submit" name="search">
</form>
</div>
</div>
<div class="middlePart">
<section>
<article>
<p>ARTICLE HERE</p>
</article>
</section>
</div>
<div class="downPart">
<footer>
<p>FOOTER HERE</p>
</footer>
</div>