More efficient styling on Menus

I think this is what i was trying to do…

<!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_02.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? */
    
    /* New */
    /************************************************************************/
    .menuAqua{
      background-color: #48D1CC;                /* Medium Turquoise */
    }

    .menuAqua_Current{
      background-color: #008B8B;                /* Dark Cyan */
    }

    .menuGrey{
      background-color: #A9A9A9;                /* Dark Gray */
    }
    
    .menuGrey_Current{
      color: #FFF;
      background-color: #000;                   /* Black */
    }
    
    .topMenu li.menuLast{
      margin-left: auto;
      padding: 0.5em 1.7em 0.4em 1.7em;
      background-color: #FFD700;                /* Gold */
    }
    /************************************************************************/
    
    .topMenu{
      width: auto;
      display: flex;
      list-style: none;
    }

    .topMenu li{
      padding: 0.5em 1em 0.4em 1em;
    }
    
    #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 class="topMenu menuAqua">
          <li class="menuAqua_Current">Home</li>
          <li>News</li>
          <li>Articles</li>
          <li>How-To</li>
          <li>Gallery</li>
          <li class="menuLast">Store</li>
        </ul>
        
        <br>
        
        <ul class="topMenu menuGrey">
          <li class="menuGrey_Current">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>
      </div>
      
    </div>
    
  </div>
  
</body>
</html>

Thoughts?

I never use media queries and have a container with a .w88 {width: 88%; max-width: 888px;} and .mga {margin: 0 auto;}

If no class then p, div, h,1, etc default to 100% blocks.

Also a .dib {display: inline-block;} and .ooo {margin: 0; padding:0; outline: 0;} which caters for the majority of cases.

But what does that have to do with the code I just published??

Feedback on how I created 'component" color -scheme classes and AND’ed them to my main classes - which were formerly ID’s - would be the most helpful… :wink:

Sorry I have a customer who wants an online payment scheme.

Perhaps use the following stylesheet?

body {background-color: #042;} 

h1  {font-size: x-large; margin: 10px 0 0 4px;}
h1 a{color:#0ff;}
#info dl dt {font-size: x-large; color: aqua;}
#XXXinfo,
#info tr td,
#info tr th {
  padding: 0.12em 2em; 
  border: solid 1px #ccf;
  background-color: #eee; color: #333;
}
#info table tr th {background-color: #0c0;} 

.bd1 {border: solid 1px #999;}
.bd3 {border: solid 1px #ccc;}
.bdB {border-bottom: solid 1px #eee;}
.bdT {border-top: solid 1px #ccc;}
.bdr {border-radius: 0.64em;}

.bga {background-color: aqua;}
.bgc {background-color: #eeeefe;}
.bgd {background-color: #ddd;}
.bge {background-color: #eee;}
.bgr {background-color: #f88;}
.bgl {background-color: lime;}
.bgs {background-color: snow;}

.btn {padding: 0.21em 0.42em;}
.clb {clear: both;}

.dib {display: inline-block;}

.fg0 {color:#000;}  .fgc {color:cyan;}
.fga {color: aqua;} .fgy {color: #ff0;}
.fgs {color: snow;} .fgS {color: #bbb;}
.fll {float:left;}  .flr {float:right;}
.fss {font-size: small;} .fsl {font-size: large;}
.fsi {font-style: oblique;}
.ftr {position: fixed; left:0; bottom:0;}
.ftr a {color:#333; text-decoration:none;}
.fwn {font-weight:300;}
.fwb {font-weight:700;}

.hg4 {height: 5em;}
.hhh {display:none;}
.jbs {
  width:28px; height:45px; 
  background-image: url(https://gekkobooks.tk/assets/imgs/jb_in_shorts.svg);
  background-repeat: no-repeat;
  margin: 3px 0 0 2px;
}
.lh2 {line-height: 2}
.mga {margin:0 auto;}
.mg4 {margin:4.2em auto 4em;}

.p42 {padding: 0.42em;}
.pob {left:0; bottom: 1.0em;}
.pof {position:fixed;}
.pot {left:0; top:0;}
.rad {border-radius: 0.88em;}
.tac {text-align: center;} .tal {text-align: left;} 
.tar {text-align: right;}
.tdn {text-decoration:none;}
.w12 {padding: 0 1em; display: inline-block;}

.w88 {width:88.88%} 
.w99 {width:99.99%} 
.z02 {z-index: 4;}

How about comments on the updated code I published versus what was in my OP?

As mentioned in post #24:

Sorry I have a customer who wants an online payment scheme.

Edit:

Just found the Topic:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.