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.
Form
Disable Selection When Set Readonly
select[readonly]
{
pointer-events: none;
} Layout
Create a Website with Fullscreen Sections
<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>
Convert Your Website to Dark Mode
html {
filter: invert(1);
} List
Reverse Numerical Order in Lists
<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
<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
<p>HTML is a programming language used to create websites.</p>
<p>HTML consists of a series of tags that define the structure of a web page.</p>
<p>With HTML, you can create structural elements like headings, paragraphs, and list items, as well as insert images and other media.</p>
