/ Learning to code

30 CSS Snippets For the Most Frequently Used CSS Tasks

30 CSS Snippets For the Most Frequently Used CSS Tasks

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; }

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; }

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; }

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.


HTML & CSS Courses & Tutorials | Codecademy
HTML is the foundation of all web pages. It defines the structure of a page, while CSS defines its style. HTML and CSS are the beginning of everything you need to know to make your first web page! Learn both and start creating amazing websites.

Get more practice, more projects, and more guidance.

Stephan Miller

Stephan Miller

Stephan Miller has been a full-stack, mobile, and machine learning developer for two decades and has written code for companies both big and small, both startups and established businesses.

Read More
30 CSS Snippets For the Most Frequently Used CSS Tasks
Share this