It seems that when styling the <a> tag for the list in the footer, no changes occur even if correctly applying the style. However, adding padding to the form in the main part of the code causes the links in the footer to show the change.
To see this behavior, refer to line 56 in the CSS section of the JSfiddle (https://jsfiddle.net/wk47q0en/) and comment out/delete the random padding added to the form. You will notice that the footer styling disappears. The reason behind this inconsistency is puzzling.
For those wondering, yes, I am new to HTML and CSS; this is all part of some homework. Thank you in advance for any advice or insight provided to help clarify this issue.
https://jsfiddle.net/wk47q0en/
HTML
<meta charset="utf-8">
<title>Red Pepper Pizza</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topmenu">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Weekly deals</a></li>
<li><a href="#">Resturants</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
<form action="example.htm" method="get">
<fieldset>
<legend>Order your pizza below</legend>
<select name="Pizza" id="Pizza">
<option value="selected" selected>Choose a pizza</option>
<option value="Pepperoni">Pepperoni</option>
<option value="Ham">Ham</option>
<option value="Vegan">Vegan</option>
<option value="Margarita">Margarita</option>
</select>
<p>Choose your Pizza crust</p>
<input type="radio" name="Crust" value="Thick"> Thick
<input type="radio" name="Crust" value="Thin"> Thin
<p>Extra toppings</p>
<input type="checkbox" name="Toppings" value="Onions"> Onions
<input type="checkbox" name="Toppings" value="Salmon"> Salmon
<input type="checkbox" name="Toppings" value="Garlic"> Garlic
<input type="checkbox" name="Toppings" value="Olives"> Olives
<input type="checkbox" name="Toppings" value="Chilli"> Chilli
<input type="checkbox" name="Toppings" value="Peppers"> Peppers
<textarea name="comment" rows="8" cols="62"> Additional specifications...</textarea> <br>
<input type="submit" name="order" value="order">
</fieldset>
</form>
<footer>
<div class="footermenu">
<ul class="footlist">
<li><a href="#">Contact us</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Job oppertunities</a></li>
<li><a href="#">Allergens</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</footer>
</body>
</html>
CSS
/* body etc */
@font-face {
font-family: 'Roboto', sans-serif;
src: url(assets\RobotoFont\Roboto-Regular.ttf);
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0px 10px;
}
/* Navigation/topbar/sidebar */
ul {
margin: 0px 0px 0px 0px;
list-style-type: none;
}
li {
display: inline;
}
.topmenu {
width: 100%;
background-color: #d12d17;
height: 40px;
text-align: center;
margin-top: 0px;
padding-top: 0px;
}
.topmenu a {
display: inline-block;
height: 40px;
color: black;
text-decoration: none;
font-size: 19px;
font-weight: bold;
padding: 10px 25px;
}
.topmenu a:hover {
transform: scale(1.3); }
}
/*Header and intro*/
/* Form elements*/
form {
padding: 0 50%;
}
/*footer */
.footlist a {
display: inline-block;
height: 40px;
color: black;
text-decoration: none;
font-size: 15px;
}