Website Ad Banner Sizes in HTML, SCSS, and CSS

_ads.scss

/**
 * This is a way to quickly add placeholders for
 * popular ad sizes on the web using an html div
 */

// Define Ad Variables
$ad-background-color: #ccc;
$ad-text-color: #666;
$ad-base-font-size: 18px;
$ad-small-font-size: 12px;

// Presenting the Ads
.ad {
    background-color: $ad-background-color;
    color: $ad-text-color;
    font-size: $ad-base-font-size;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;

    &::before {
        box-sizing: inherit;
    }

    /*
     desktop ad sizes
     */

    // <div class="ad wide-skyscraper"></div>
    &.wide-skyscraper {
        height: 600px;
        width: 160px;
        &:before {
            content: "160 x 600 Wide Skyscraper Ad";
        }
    }

    // <div class="ad medium-rectangle"></div>
    &.medium-rectangle {
        height: 250px;
        width: 300px;
        &:before {
            content: "300 x 250 Medium Rectangle Ad";
        }
    }

    // <div class="ad half-page"></div>
    // <div class="ad monster"></div>
    &.half-page,
    &.monster {
        height: 600px;
        width: 300px;
        &:before {
            content: "300 x 600 Half-Page (Monster) Ad";
        }
    }

    // <div class="ad leaderboard"></div>
    &.leaderboard {
        height: 90px;
        width: 728px;
        &:before {
            content: "728 x 90 Leaderboard Ad";
        }
    }

    // <div class="ad billboard"></div>
    &.billboard {
        height: 250px;
        width: 970px;
        &:before {
            content: "970 x 250 Billboard Ad";
        }
    }

    /*
     mobile ad banners
     */

    // <div class="ad mobile-banner"></div>
    &.mobile-banner {
        font-size: $ad-small-font-size;
        height: 50px;
        padding: 15px 20px;
        width: 300px;
        &:before {
            content: "300 x 50 Mobile Banner Ad";
        }
    }

    // <div class="ad mobile-leaderboard"></div>
    &.mobile-leaderboard {
        font-size: $ad-small-font-size;
        height: 50px;
        padding: 15px 20px;
        width: 320px;
        &:before {
            content: "320 x 50 Mobile Leaderboard Ad";
        }
    }

    // <div class="ad mobile-large-banner"></div>
    &.mobile-large-banner {
        font-size: $ad-small-font-size;
        height: 100px;
        width: 320px;
        &:before {
            content: "320 x 100 Mobile Large Banner Ad";
        }
    }

    /*
     less common desktop ad sizes
     */

    // <div class="ad button"></div>
    &.button {
        font-size: $ad-small-font-size;
        height: 60px;
        padding: 10px 20px;
        width: 120px;
        &:before {
            content: "60 x 120 Button Ad";
        }
    }

    // <div class="ad large-button"></div>
    // defunct, only use if specifically asked to do so
    &.large-button {
        font-size: $ad-small-font-size;
        height: 125px;
        width: 125px;
        &:before {
            content: "125 x 125 Large Button Ad";
        }
    }

    // <div class="ad super-leaderboard"></div>
    &.super-leaderboard {
        height: 90px;
        width: 970px;
        &:before {
            content: "970 x 90 Super Leaderboard Ad";
        }
    }

    /*
     old ad sizes

     these sizes are defunct, so only use these
     if you absolutely must
     */

    // <div class="ad skyscraper"></div>
    // defunct, only use if specifically asked to do so
    &.skyscraper {
        font-size: $ad-small-font-size;
        height: 600px;
        width: 120px;
        &:before {
            content: "120 x 600 Skyscraper Ad";
        }
    }

    // <div class="ad large-rectangle"></div>
    // defunct, only use if specifically asked to do so
    &.large-rectangle {
        height: 280px;
        width: 336px;
        &:before {
            content: "336 x 280 Large Rectangle Ad";
        }
    }

    // <div class="ad banner"></div>
    // defunct, only use if specifically asked to do so
    &.banner {
        height: 60px;
        padding: 15px 20px;
        width: 468px;
        &:before {
            content: "468 x 60 Banner Ad";
        }
    }

}

ads.css

.ad {
  background-color: #ccc;
  color: #666;
  font-size: 18px;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  text-transform: uppercase;
}

/* desktop ad sizes 
----------------------------------------------- */

.ad.wide-skyscraper {
  height: 600px;
  width: 160px;
}

.ad.wide-skyscraper:before {
  content: "160 x 600 Wide Skyscraper Ad";
}

.ad.medium-rectangle {
  height: 250px;
  width: 300px;
}

.ad.medium-rectangle:before {
  content: "300 x 250 Medium Rectangle Ad";
}

.ad.half-page, .ad.monster {
  height: 600px;
  width: 300px;
}

.ad.half-page:before, .ad.monster:before {
  content: "300 x 600 Half-Page (Monster) Ad";
}

.ad.leaderboard {
  height: 90px;
  width: 728px;
}

.ad.leaderboard:before {
  content: "728 x 90 Leaderboard Ad";
}

.ad.billboard {
  height: 250px;
  width: 970px;
}

.ad.billboard:before {
  content: "970 x 250 Billboard Ad";
}

/* mobile ad banners
----------------------------------------------- */

.ad.mobile-banner {
  font-size: 12px;
  height: 50px;
  padding: 15px 20px;
  width: 300px;
}

.ad.mobile-banner:before {
  content: "300 x 50 Mobile Banner Ad";
}

.ad.mobile-leaderboard {
  font-size: 12px;
  height: 50px;
  padding: 15px 20px;
  width: 320px;
}

.ad.mobile-leaderboard:before {
  content: "320 x 50 Mobile Leaderboard Ad";
}

.ad.mobile-large-banner {
  font-size: 12px;
  height: 100px;
  width: 320px;
}

.ad.mobile-large-banner:before {
  content: "320 x 100 Mobile Large Banner Ad";
}

/* less common desktop ad sizes 
----------------------------------------------- */

.ad.button {
  font-size: 12px;
  height: 60px;
  padding: 10px 20px;
  width: 120px;
}

.ad.button:before {
  content: "60 x 120 Button Ad";
}

/* large-button is defunct */
.ad.large-button {
  font-size: 12px;
  height: 125px;
  width: 125px;
}

.ad.large-button:before {
  content: "125 x 125 Large Button Ad";
}

.ad.super-leaderboard {
  height: 90px;
  width: 970px;
}

.ad.super-leaderboard:before {
  content: "970 x 90 Super Leaderboard Ad";
}

/* old ad sizes

these sizes are defunct, so only use these
if you absolutely must
----------------------------------------------- */

.ad.skyscraper {
  font-size: 12px;
  height: 600px;
  width: 120px;
}

.ad.skyscraper:before {
  content: "120 x 600 Skyscraper Ad";
}

.ad.large-rectangle {
  height: 280px;
  width: 336px;
}

.ad.large-rectangle:before {
  content: "336 x 280 Large Rectangle Ad";
}

.ad.banner {
  height: 60px;
  padding: 15px 20px;
  width: 468px;
}

.ad.banner:before {
  content: "468 x 60 Banner Ad";
}

ads.html

<!-- 
Reference Site: https://theonlineadvertisingguide.com/ad-size-guide/
Reference Date: 03/2019
-->

<!-- desktop ad sizes -->
<div class="ad wide-skyscraper"></div>
<div class="ad medium-rectangle"></div>
<div class="ad half-page"></div>
<div class="ad monster"></div>
<div class="ad leaderboard"></div>
<div class="ad billboard"></div>

<!-- mobile ad banners -->
<div class="ad mobile-banner"></div>
<div class="ad mobile-leaderboard"></div>
<div class="ad mobile-large-banner"></div>

<!-- less common desktop sizes -->
<div class="ad button"></div>
<div class="ad large-button"></div><!-- defunct -->
<div class="ad super-leaderboard"></div>

<!-- old sizes -->
<!-- these are occasionally used, but should be avoided -->
<div class="ad skyscraper"></div><!-- defunct -->
<div class="ad large-rectangle"></div><!-- defunct -->
<div class="ad banner"></div><!-- defunct -->

Tired of finding place holder image sizes and creating code for website ads? Me too. Feel free to use/change/whatever this as you see fit. These are set ad sizes as reported by...

Reference Site: https://theonlineadvertisingguide.com/ad-size-guide/
Reference Date: 03/2019