Code snippets are blocks of code that are usually:
- Shared between developers.
- Added to articles and blog posts, like this one.
- Posted on cheat sheets.
Code snippets save a lot of development time. With them, you don’t need to reinvent the wheel or delve into a language’s documentation. In other words, they’re great if you just need a solution to finish up a project.
If you’re a Front-End Developer who’s been working in JavaScript all day, writing good CSS can be frustrating. Or, if you’re a Full-Stack Developer, you must do this as well as work on the back-end code of an application.
To make this process a little smoother, we’ve collected 30 useful CSS snippets that’ll help you style your app.
3 CSS snippets for shadows and gradients
The snippets below will help you get shadows just right.
1. Add a shadow to borders or images
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);}2. Add a shadow to text
You can even add a shadow to your text if you want the text to be more visible.
.text-with-shadow { text-shadow: 4px 4px 8px #000; }3. Add a linear gradient
You don’t need an image to create a gradient — you can do it with pure CSS. Play around with the to and from values below and see what you get.
.gradient { background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); background: -moz-linear-gradient(top, #000000, #ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); }6 CSS snippets for images
Make your images do what you want them to using the CSS snippets below.
4. Use an image as a border
You don’t have to settle for the default borders. You can set your own using an image.
/* You have 3 options for the type of border (repeat / round / stretch) */bordered-image { border-width: 20px; -moz-border-image: url(border.png) 30 30 stretch ; -webkit-border-image: url(border.png) 30 30 stretch; }5. Add a loading image for images
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%; }6. Create a button rollover sprite
The CSS code below will create a hover effect for a button. When it’s hovered, the image will move down.
a.button { display: block; background: url(button.png) no-repeat; height: 50px; width: 150px; } a.button:hover { background-position: 0 -50px; }7. Flip an image
If you need to add a caret image to an accordion, you don’t need a separate image for both the up and down carets. Just flip one of the images using CSS like this:
img.flipped { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }8. Rotate an image
The CSS code below will rotate an image. Adjust the degrees to fine-tune it to what you need.
/ for Firefox, Safari, and Chrome /img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);/ for IE /filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/ for Opera /-o-transform: rotate(90deg); }9. Create a full-screen background
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; }6 CSS snippets for text and fonts
Below are some style snippets that’ll help you with the fonts and text on your page.
10. Create a drop cap title
This CSS will make the first letter in each paragraph a larger font than the rest.
p:first-letter { display:block; margin:5px 0 0 5px; float:left; color:#000; font-size:60px; }11. Replace header text with a logo
If you want to show your company’s logo instead of header text but keep the text for SEO purposes, here’s how you would do that.
h1 { text-indent:-9999px; margin:0 auto; width:300px; height:200px; background:transparent url("logo.jpg") no-repeat scroll; }12. Resize a background image
You don’t have to make the background image the same size as an element to fit it. You can adjust the size with CSS.
resize-image { background:url(image_1.png) top left no-repeat; -moz-background-size: 200px 300px; -o-background-size: 200px 300px; -webkit-background-size: 200px 300px; }13. How to use @font-face
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'), url('font-webfont.ttf') format('truetype'), url('font-webfont.svg#svgFontName') format('svg'); }14. How to use Google fonts
Using Google fonts means you don’t have to mess with font files. Here’s how to add a Google font to your CSS.
Add this to the head of your html file:
<head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif"></head>Add this to your CSS file:
body { font-family: 'Droid Serif', serif; }15. Add a custom background color to selected text
Using the CSS below, you can make the background of text selected by a user blue (#0000ff).
p { ::selection { background: #0000ff; } ::-moz-selection { background: #0000ff; } ::-webkit-selection { background: #0000ff; } }2 CSS snippets for reset
CSS resets will return your styles to a consistent baseline. Here are some snippets for resetting your styles.
16. Reset backgrounds
This CSS will reset the background of your web page to the default styles.
{ color: black !important; background-color: white !important; background-image: none !important; }17. Reset links
This CSS will reset the links on your web page to the default styles.
a:link { font-weight: bold; text-decoration: underline; color: #06c; }2 CSS snippets for corners
These CSS snippets will add something extra to corners in your page.
18. Make every corner rounded
The border-radius CSS property is used to make rounded corners. Here’s an example that’ll round all the corners of an element. You can adjust the radius by adjusting the pixel size.
.round{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -khtml-border-radius: 5px; }19. Make some corners rounded
You don’t have to apply rounded corners to the whole element. You can also do this selectively.
.top-right { height: 50px; width: 100px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; } .top-left { height: 50px; width: 100px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; } .bottom-right { height: 50px; width: 100px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; } .bottom-left { height: 50px; width: 100px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; }11 CSS snippets for other page features
20. Create a pull quote
Many articles and blog posts use pull quotes to emphasize some text in the content. Here’s a simple way to do that. Adjust if necessary.
.quote { width: 300px; float: right; margin: 10px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #777777 ; }21. Center a page horizontally
In today’s world, you can never count on what resolution people will view your site at. An easy way to not worry about this is centering the page with the CSS below.
.wrapper { width: 1024px; margin: auto; }22. Add page breaks for printing
When you print a web page, sometimes it doesn’t turn out the way you expect. The code below will break the page at a specific CSS selector when printed.
.new-page { page-break-before:always; }23. Center content vertically
This is probably one of the most common search queries for Google when it comes to CSS. Here’s one way you can do it.
.content { min-height: 10px; display: table-cell; vertical-align: middle; }24. Make something transparent
Opacity is the CSS property you want to use to make something partially transparent. The CSS below will make an element 50% transparent.
.transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; }25. Create a sticky footer
This CSS will make your footer stay at the bottom of the screen.
.footer { position:fixed; left:0px; bottom:0px; height:32px; width:100%; }26. Create columns for your content automatically
Creating columns out of your content with CSS is easy. The code below with turn your content into three columns with a gap of 15px and a black rule between them.
.columns-three { text-align: justify; -moz-column-count: 3; -moz-column-gap: 15px; -moz-column-rule: 1px solid #ffffff; -webkit-column-count: 3; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ffffff; }27. Force vertical scrollbars
If your content is shorter than the browser height, you can use this CSS to force them to appear.
html { height: 101% }28. Add zebra stripes to a table
Zebra stripes make HTML tables easier to read. You can create them easily with the CSS code below.
body tr:nth-child(odd) { background-color: #d3d3d3; }29. Add triangular list bullets
The CSS code below will replace the standard dots for unordered lists with triangles.
ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; }30. Force a pointer over clickable items
The pointer cursor tells users that they can click an item. This CSS will force that to happen.
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; }Brush up on your CSS skills
Hopefully, the snippets above will help you style the website or app you’re building. Just remember to learn from the snippet. Figure out how it does what it does. Then, you’ll be able to use that knowledge for other CSS styling tasks.
If you’re depending on snippets too often, maybe you need to brush up on your CSS skills. We have a wide range of coding courses on HTML and CSS that’ll teach you what you need to know to become a skilled Web Designer or Developer.
To learn the basics of CSS, check out our Learn CSS course. If you already know CSS but want to build even more skills, then Learn Intermediate CSS is the course for you.
