HTML/CSS Snippet's
Firefox shows a dotted frame when clicking on a link.This can be Removed with CSS
a:active, a:focus {Outline:0;};
CSS
Use Flexbox to easily center an element both vertically and horizontally within its container
.container {display: flex; justify-content: center; align-items: center; height: 100vh;}
CSS
Implement a smooth scroll effect to navigate to the top of your webpage
html {scroll-behavior: smooth;}
.scroll-to-top {position: fixed; bottom: 20px; right: 20px; text-decoration: none; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 8px;}
CSS
Keep your footer at the bottom of the page even when there’s not enough content to fill the viewport
.page-container {display: flex; flex-direction: column; min-height: 100vh;} .content-wrap {flex: 1;} footer {background-color: #f1f1f1; padding: 1rem;}
CSS
The history.back() method loads the previous URL (page) in the history list.
<button onclick="history.back()"> Go Back</button>
HTML
If you have large images on your page that take time to load, you can use the following CSS snippet to load a smaller loading graphic until the full-size pictures appear.
img {background: url(loader.gif); no−repeat 50% 50%;}
CSS
This will make your borders and images stand out on your page.
.shadow {box-shadow: 0px 5px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);}
CSS
The CSS below will cover your HTML page with the background image.
html {background: url('background-image.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
CSS
If you use the CSS @font-face rule, you don’t have to use web-safe fonts. You can define a name for the font you can use throughout your CSS file.
@font-face{font-family: 'NameYourRont'; src: url('font-webfont.eot?') format('eot'), url('font-webfont.woff') format('woff'), ('font-webfont.ttf') format('truetype'), url ('font-webfont.svg#svgFontName')
CSS
Navigate on your Website with id
<button> <a href="#section"></a> </button> <p id="section">test</p>
HTML