HTML & CSS Code Snippets

CSS code snippets are an essential part of any front-end developer’s toolkit. They allow you to quickly and easily style your web pages, without having to write long, complicated CSS code. By using code snippets, you can save time and effort, and ensure that your pages look great.

The best thing about CSS code snippets is that they are easy to use. Simply copy and paste the code into your HTML file, and you’re done. No need to worry about CSS syntax or other complicated code.

Are you looking for a specific CSS code snippet but can’t seem to find what you need? This curated list of resources is just what you need! You’ll find everything from how to use borders and box shadows to create responsive layouts.

Collapse All Snippets

Button

.btn{
  border: 1px solid red;
  padding: 1em;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}
.btn-1{
  border-radius: 8px;
}
.btn-2{
  border-radius: 16px;
}
.btn-3{
  border-radius: 50%;
}

Checkbox

<html>
  <head>
    <title>HTML Chexkbox</title>

    <style text="text/css">
      body{
        font-family: sans-serif;
        padding: 10em;
      }
      .big-checkbox {
        transform: scale(3);
      }
      label{
        padding-left: 3em;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <form>
        <input type="checkbox" name="checkbox-agree" checked> <label>Do you agree?</label>
        <div style="margin-top: 3em;">
          <input type="checkbox" class="big-checkbox" name="checkbox-subscription" checked> <label>Subscription</label>
      </div>
      </form>
    </div>
  </body>
</html>

Dialog & Popup

<div class="wrapper">
    <a href="#modal" class="btn">Open Modal</a>
</div>

<div id="modal" class="modal">
    <div class="content">
        <a href="#" class="btn_close">&times;</a>
        <h1>Modal Title</h1>
        <p>
          A modal is an element on a web page that can be used to provide additional information or functionality to the user. It usually pops up in a new window or tab and can be customized using CSS.
        </p>

        <div class="footer">
            <a href="#" class="btn">Confirm</a> <a href="#" class="btn btn-cancel">Cancel</a>
        </div>

    </div>
</div>
<style type="text/css">

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.btn, a.btn:visited{
  background-color: #EEE;
  border: 1px solid #AAA;
  border-radius: 8px;
  padding: 5px;
  text-decoration: none;
  color: #333;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 200, 200, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal .content {
  position: relative;
  width: 400px;
  max-width: 90%;
  background: #fff;
  padding: 1em;
  border-radius: 8px;
}

.modal .footer {
  text-align: right;
}
.modal .btn_close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

</style>

Form

select[readonly]
{
    pointer-events: none;
}

Image

<html>
  <head>
    <style text="text/css">
      .wrapper{margin: 2em; font-family: sans-serif;}
      .img-wrapper{
        margin-bottom: 1em;
      }
      .img-wrapper img{
        border: 1px solid red;
      }
      #img1{width: 300px;}
      #img1 img{width: 100%;}
      #img2{width: 500px;}
      #img2 img{width: 200px;}
      #img3{width: 500px;}
      #img3 img{height: 400px; max-width: 500px;}
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="img-wrapper" id="img1">
        <img src="https://cdn.pixabay.com/photo/2015/02/24/02/05/website-647013_960_720.jpg" />
      </div>
      <div class="img-wrapper" id="img2">
        <img src="https://cdn.pixabay.com/photo/2015/09/09/21/12/monitor-933392_960_720.jpg" />
      </div>
      <div class="img-wrapper" id="img3">
        <img src="https://cdn.pixabay.com/photo/2017/09/05/10/19/business-2717063_960_720.jpg" />
      </div>
    </div>
  </body>
</html>

Layout

<div class="parent">
    <div class="child">Absolute element</div>
</div>

<style type="text/css">
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    right: 50%;
}
</style>
<main>
    <section id="about">
        <h2>We are an app development team.</h2>
    </section>
    <section id="services">
        <h2>Our Services</h2>
    </section>
    <section id="contact">
        <h2>Contact Us</h2>
    </section>
</main>

<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    section{
        min-height: 100vh;
    }
   
</style>

html {
  filter: invert(1);
}

List

ul{
  list-style: none;
}
ul li:before {
  content: "";
  height: 0;
  width: 0;
  border-color: transparent red;
  border-style: solid;
  border-width: 10px 0px 10px 10px;
  position: relative;
  display: block;
  left: -16px;
  top: 17px;
}
<ol reversed>
<li>Tajikistan</li>
<li>Poland</li>
<li>Belgium</li>
<li>Tunisia</li>
<li>Yemen</li>
<li>Palestinian Territories</li>
<li>Tuvalu</li>
<li>Moldova</li>
<li>Belize</li>
<li>Slovenia</li>
<li>Estonia</li>
<li>South Africa</li>
<li>Costa Rica</li>
<li>India</li>
<li>Norway</li>
<li>Palestinian Territories</li>
</ol>
ul {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

Loading

.loading {
    font-size: 48px;
    font-weight: bold;
    display: inline-block;
    color: #6667ab;
    letter-spacing: 2px;
    position: relative;
    box-sizing: border-box;
}
.loading::after {
    content: 'Loading';
    position: absolute;
    left: 0;
    top: 0;
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    overflow: hidden;    
    animation: loading 3s linear infinite;
}

@keyframes loading {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}
<div class="spinner"></div>

<style type="text/css">
.spinner {
    border: 16px solid #48CD8A;
    border-top: 16px solid #B73275;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: loading 2s linear infinite;
}

@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Text

<div class="typing-wrapper">
  Typerwriter is typing.
</div>
<style type="text/css">

.typing-wrapper {
  width: 220px;    
  overflow: hidden;
  border-right: 2px solid red;  
  font-size: 24px;
  white-space: nowrap;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
</style>
<p>HTML&nbsp;is&nbsp;a&nbsp;programming language used to create websites.</p>
<p>HTML consists of a&ensp;series of tags that define the structure of a web page.</p>
<p>With HTML, you can create&emsp;structural elements like headings, paragraphs, and list items, as well as insert images and other media.</p>

UI

h1{font-size: 1.8em;}
h2{font-size: 1.5em;}
h3{font-size: 1.17em;}
h4{font-size: 1em;}
h5{font-size: 0.9em;}
h6{font-size: 0.8em;}
<div id="wrapper">
  <div class="box">
    While glassmorphism can be used in a variety of ways, it is often used to create sleek interfaces with a focus on user experience.
  </div>
</div>

<style type="text/css">
  body{
    padding: 5em;
    font-family: sans-serif;
    background:url("https://cdn.pixabay.com/photo/2016/10/11/21/43/geometric-1732847_960_720.jpg") 0 / cover;
  }

.box {
  width: 30rem;
  height: 15rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  border-radius: 8px;
  position: relative;
  background: inherit;
  overflow: hidden;
  padding: 1em;
  color: white;
}
.box::before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -20px;
}
</style>
<div class="wrapper">
  <div class="section section-welcome">
    Welcome
  </div>

  <div class="section section-services">
    Our Services
  </div>

  <div class="section section-testimonials">
    Testimonials
  </div>

  <div class="section section-contact">
    Contact
  </div>
</div>

<style type="text/css">



.wrapper {
  font-family: sans-serif;
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #b71c1c;
  color: #fff;
  font-size: 64px;
}

.section-welcome{
  background-color: #b71c1c;
}
.section-services{
  background-color: #880e4f;
}
.section-testimonials{
  background-color: #e65100;
}
.section-contact{
  background-color: #4a148c;
}

</style>
p.single {
  quotes: "‘" "’";
}
p.double {
  quotes: "“" "”";
}
p::before {
    content: open-quote;
    font-size: 36px;
    color: orange;
}
p::after {
    content: close-quote;
    font-size: 36px;
    color: orange;
}
<div class="outer">
    <div class="ribbon">FREE</div>
</div>

<style type="text/css">
.outer{
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}

.outer .ribbon{
    position: absolute;
    right: -33px;
    background: green;
    width: 134px;
    height: 25px;
    transform: rotate(45deg);
    -webkit-box-shadow: 0 0 10px #888;
    -moz-box-shadow: 0 0 10px #888;
    box-shadow: 0 0 10px #888;
    color: white;
    text-align: center;
    padding: 5px 0 0 0;
    top: 20px;
}
</style>

Leave a Comment

Your email address will not be published.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close