30 CSS Snippets For the Most Frequently Used CSS Tasks (2024)

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.

30 CSS Snippets For the Most Frequently Used CSS Tasks (2024)

FAQs

What is a snippet in CSS? ›

A snippet is a piece of reusable code, and a CSS Snippet "CSS (Cascading Style Sheets) + Snippet" is a set of utilities and interactive examples for CSS3. It helps create the frequently used layout templates.

What are CSS snippets in Obsidian? ›

CSS is a language to describe how to present a HTML document. By adding CSS snippets, you can redefine parts of the Obsidian user interface, such as the size and color of headings. Obsidian includes CSS variables that you can use to easily customize parts of the interface.

What are snippets in VS Code? ›

Code snippets are small blocks of reusable code that you can add to a code file. Snippets usually contain often-used code blocks such as Try... Finally or If... Else blocks. You can also use code snippets to add entire classes or methods.

How do I add a snippet in HTML? ›

Adding an HTML snippet to your page

Navigate to the Design tab and open the page builder. In the page builder, click Snippets on the left, then drag and drop the HTML Snippet on to the required position on your page. The HTML Snippet editor will appear. Add the required HTML code.

What is a snippet example? ›

Snippet Sentence Examples

A movie trailer is a short preview or a snippet of a film that is meant to get viewers excited to the see the film when it is released. You can't give us that tantalizing snippet of info only to leave us hanging.

What does "snippets" mean? ›

a small piece snipped off; a small bit, scrap, or fragment: an anthology of snippets. Informal. a small or insignificant person.

How to write code snippets? ›

Create your own snippets

To create or edit your own snippets, select Configure User Snippets under File > Preferences, and then select the language (by language identifier) for which the snippets should appear, or the New Global Snippets file option if they should appear for all languages.

Why code snippets? ›

A snippet is like a mini-plugin for your WordPress site, providing added functionality without the clutter. Unlike other solutions that involve dumping code into your functions.php file, Code Snippets offers an intuitive graphical interface for seamless integration and real-time execution.

When would you use the code snippet? ›

Code snippets are an easy way to speed up development and solve software challenges. They're also a common way for developers to introduce open source code into their projects which comes with certain security, compliance, and quality risks.

How to format code snippets in HTML? ›

Because your code is the content of an html document, you need to escape any special html characters (mainly the '<' symbol). This is quick and easy to do using a tool like: http://htmlencode.net/ Use <pre><code> tags to surround your code. For the <pre> tag you can optionally add class=”line-numbers”.

How to show code snippets on a website? ›

Go to the page where you want to add the Code snippet web part. If your page is not already in edit mode, click Edit at the top right of the page. Click +, and then select Code snippet from the list of web parts. On the toolbar, select the language, whether you want numbered lines, and a light or dark theme.

What is the purpose of a code snippet? ›

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. In Visual Studio Code, snippets appear in IntelliSense (Ctrl+Space) mixed with other suggestions, as well as in a dedicated snippet picker (Insert Snippet in the Command Palette).

What is snippet in design? ›

InDesign offers several different ways to repurpose graphics and text. Snippets. A snippet is a file that contains objects and describes their location relative to one another on a page or spread.

What is snippet format? ›

Snippet content has several format options: Plain Text. When expanded, the Snippet content conforms to the current text style. This is the standard Snippet format, it works best for autocorrection and any other Snippets where you want them to fit in with the format of the surrounding text. Formatted Text, Pictures.

What is snippet function? ›

A code snippet is a block of code that performs a specific function or set of functions on your data. The All of Us Researcher Workbench team has created several code snippets to execute functions that we think will be commonly used.

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Twana Towne Ret

Last Updated:

Views: 5713

Rating: 4.3 / 5 (44 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Twana Towne Ret

Birthday: 1994-03-19

Address: Apt. 990 97439 Corwin Motorway, Port Eliseoburgh, NM 99144-2618

Phone: +5958753152963

Job: National Specialist

Hobby: Kayaking, Photography, Skydiving, Embroidery, Leather crafting, Orienteering, Cooking

Introduction: My name is Twana Towne Ret, I am a famous, talented, joyous, perfect, powerful, inquisitive, lovely person who loves writing and wants to share my knowledge and understanding with you.