Hello.
I could use some help learning how to make my CSS styles more efficient.
Below is a sample web page which has two top menus - the purpose being I want to compare color schemes.
It seems to me that there is a better way to style my original top menu so I can tweak the color scheme without having to duplicate a lot of my styles.
What is the most modern way to do this?
<!DOCTYPE HTML>
<html lang="en">
<!-- ************************* HTML HEAD ********************************* -->
<head>
<!-- METADATA -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<!-- TITLE -->
<title>sp_top-menus_01.html</title>
<!-- CSS STYLES -->
<style media="screen">
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
line-height: 1.4;
font-size: 0.9em;
}
p{
padding: 0 0 1rem 0;
}
#pageWrapper{
position: relative;
display: block;
min-height: 100%;
max-width: 1200px;
min-width: 840px;
margin: 0 auto;
}
#pageInner{
position: relative;
width: 100%;
overflow: hidden;
}
#mast{
padding: 5px 0 0 0;
}
#pageHeader{
display: flex;
align-items: baseline;
padding: 0 0 5px 0;
line-height: 1.4;
}
#logo{
font-family: Georgia, Times New Roman, Serif;
font-size: 2rem;
}
#menuLinks{
margin-left: auto;
}
/* HOW CAN I MAKE THESE STYLES MORE EFFICIENT? */
#topMenu,
#topMenu2{
width: auto;
display: flex;
list-style: none;
background-color: #48D1CC; /* Medium Turquoise */
}
#topMenu2{
background-color: #A9A9A9; /* Dark Gray */
}
#topMenu li,
#topMenu2 li{
padding: 0.5em 1em 0.4em 1em;
background-color: #48D1CC; /* Medium Turquoise */
}
#topMenu2 li{
background-color: #A9A9A9; /* Dark Gray */
}
#topMenu li.menuCurrent,
#topMenu2 li.menuCurrent{
border: none;
background-color: #008B8B; /* Dark Cyan */
}
#topMenu2 li.menuCurrent{
color: #FFF;
background-color: #000; /* Black */
}
#topMenu li.menuLast,
#topMenu2 li.menuLast{
margin-left: auto;
padding: 0.5em 1.7em 0.4em 1.7em;
border: none;
background-color: #FFD700; /* Gold */
}
#topMenu2 li.menuLast{
background-color: #FFD700; /* Gold */
}
#pageBody{
position: relative;
max-width: 100%;
margin: 30px 0 0 0;
background-color: #EEE;
}
</style>
</head>
<!-- ************************* HTML BODY ********************************* -->
<body>
<div id="pageWrapper">
<div id="pageInner">
<div id="mast">
<div id="pageHeader">
<h1 id="logo">My Company</h1>
</div>
<ul id="topMenu">
<li class="menuCurrent">Home</li>
<li>News</li>
<li>Articles</li>
<li>How-To</li>
<li>Gallery</li>
<li class="menuLast">Store</li>
</ul>
<br>
<ul id="topMenu2">
<li class="menuCurrent">Home</li>
<li>News</li>
<li>Articles</li>
<li>How-To</li>
<li>Gallery</li>
<li class="menuLast">Store</li>
</ul>
</div>
<div id="pageBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>
<p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>
<p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>
<p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>
<p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>
</div>
</div>
</div>
</body>
</html>
