My CSS Snippets

The following is a collection of my CSS snippets. For a variety of reasons I like to keep these snippets on hand while working with HTML/CSS. This article isn't meant to be a tutorial, but I placed helpful links if you need further assistance.

Contents

• Selectors
• Filters
• Text
• “If” Conditions
• Scrollbars (Overflow)
• Box Sizing
• Positioning
• Interactivity
• Absolute Centering
• Print CSS
• Responsive Design

Selectors

“>” selects all child elements. “+” selects the next element right after. “~” selects all elements right after.

.box > p {
    color: blue;
}

Select elements by any kind of attribute. The sample below shows “text”, but it could also have “button”, “option”, etc.

input[type="text"] {
    margin-left: -35px;
}

Select all links targeting a specific file format.

a[href$=".pdf"] {
    background: url(icon-pdf.png) no-repeat;
}

Select all links targeting a specific domain.

a[href="http://domain.com"] {
    font-weight: bold;
}

Select all elements containing this text.

input[name|="some-text"] {
    border: 1px solid red;
}

Select all elements containing this text inside: <a href="demo.html">some text</a>

a:contains["some text"]  {
    font-weight: bold;
}

Select all elements with a partial match of the attribute.

input[id*="date"] {
    background: url(icon-calendar.png) no-repeat;
}

Confused? Learn more at W3Schools: CSS Selectors.

Top

Filters

Rounded corners - Learn more

moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;

Drop Shadow - Learn more

-moz-box-shadow: 2px 2px 3px #999999;
-webkit-box-shadow: 2px 2px 3px #999999;
box-shadow: 2px 2px 3px #999999;

Outer glow

-moz-box-shadow: 0 0 3px #999999;
-webkit-box-shadow: 0 0 3px #999999;
box-shadow: 0 0 3px #999999;

Text shadow - Learn more

text-shadow: 0.1em 0.1em #333;

Transparent Background Color - Learn more (scroll to RGBA Colors)

background-color: rgba(255,255,255,0.5);
background: none; !important

Gradients - Learn more

background-image: -moz-linear-gradient(
    top, #fff, #efefef
);
background-image: -webkit-gradient(
    linear, left top, left bottom,
    color-stop(0, #fff),
    color-stop(1, #efefef)
);
background-image: linear-gradient(
    top, #fff, #efefef
);

Top

Text

Shorthand font styling: style, caps, weight, size/height, family

p {
    font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}

Disable text selection. This is great for when you make elements clickable with jQuery, because users might accidentally select the text of your button while clicking.

.demo {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Using the ellipsis (the “...”). Restrict the width of the element, then apply the following. Learn More

.demo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Top

“If” Conditions

If element is empty, do something:

.demo:empty {
	display: none;
}

Do something if an element is visible or hidden. I've never had a need for these properties in everyday CSS, but when it comes to targeting elements in jQuery these puppies are invaluable.

.demo:visible {
	/* styles */
}
.demo:hidden {
	/* styles */
}

Top

Scrollbars (Overflow)

Vertical scroll. Using “overflow: scroll” adds a horizontal and vertical scroll. Overflow-y adds just a vertical scroll (and overflow-x adds just a horizontal scroll). Learn More

.box {
    overflow-y: scroll;
}

Vertical scroll on demand. Having scrollbars always showing is ugly. Setting overflow-y to auto shows the scrollbar only when it's needed.

.box {
    overflow-y: auto;
}

Top

Box Sizing

When you set a width to an element it doesn't include padding and borders. However, setting box-sizing to an element does include the padding and borders into the width. Also, box-sizing fixes jumpy, inconsistent animation issues with jQuery when you're revealing/hiding content with the Animate function. Learn More

.demo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Or use the wildcard to apply it to everything.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Top

Positioning

100% height on an element (“.demo” in the sample) - Learn More

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.demo {
    margin: auto;
    min-height: 100%;
}

Inline-block for IE 7 - Learn More

.box {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Clearfix hack - Learn More. Although I should point out that if you don't expect your audience to be using IE 9 and below, the flexbox property should be used instead of CSS positioning hacks.

.default:before, .default:after {
    content: "";
    display: table;
}
.default:after {
    clear: both;
}
.default {
    zoom: 1;
}

Fixed footer

#footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #fff;
}

Top

Interactivity

Make overlapping elements unclickable. This is useful for, say, you have a thumbnail image with a magnifying glass over it and you don't want the magnifying glass to interfere with the thumbnail's click event. Learn More

.demo {
    pointer-events: none;
}

Top

Absolute Centering

Easily make pop-up/light boxes with the following. And if you wrap this absolute-center div with a relative parent then you'll get vertical alignment inside this div as well. Learn More

.absolute-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

You can also have it fixed so that it stays on scroll. But use absolute first for compatibility reasons if you only need it at the top of the page.

.absolute-center {
    margin: auto;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
}

Take note that the two above scripts don't work well in IE when you're using z-index with multiple elements. In that case, to absolutely center you need the following.

.absolute-center {
    position: absolute;
    left: 0;
    width: 960px;
    margin-left: -480px; /* half of width */
    z-index: 999;
}

Top

Print CSS

A print stylesheet just needs “media=print“ - Learn More

<link href="css/styles.css" rel="stylesheet" type="text/css" media="print" />

Or you can put it inside a stylesheet.

@media print {
	.sample {
    	display: none;
    }
}

Page Break Fix. This CSS property prevents page breaks from splitting apart boxed/bordered content - Learn More

#box {
	page-break-inside: avoid;
}

Cover page. Apply this to an image.

.coverPage { 
    width: 100%; 
    height: 100%;
    page-break-after: always;
}

Force background color. Background colors and background images are removed for print. Nothing can bring them back. However, this CSS hack can at least allow you to use background colors.

.title-wrapper {
	box-shadow: inset 0 0 0 1000px #c0c0c0;
}

Top

Responsive Design

Set viewport first! This is required to be placed in the HTML header for responsive design.

<meta name="viewport" content="width=device-width,initial-scale=1">

Using the above viewport code has a slight problem with forms. By default, smartphone web browsers zoom in on a page when a form field is in focus. This causes an awkward browsing experience for mobile sites. You can prevent zoom-ins with the viewport code below. Be warned, though, preventing the user from zooming in can pose a problem with usability and accessibility.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

Basic media query setup. This just scratches the surface - there are plenty more break points.

@media only screen and (max-width: 960px) {
    .sample {
        width: 600px;
    }
}
@media only screen and (max-width: 480px) {
    .sample {
        width: auto;
    }
}

Responsive image

.photo {
    display: block;
    max-width: 100%;
    height: auto;
}

Responsive image in DIV. This method is more efficient than the one above. Keep in mind that you can change the anchor of the image with background-position based on the image's focus point. For example if the picture's focus point is on the bottom right, you can put 'bottom right' as the background-position. I recommend the jQuery Match Height plugin if you want better control over a group of responsive-image-DIVs.

.photo {
	background: url(sample.jpg) no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 200px;
}

For more CSS responsive design snippets check out Responsive Patterns.

Top

Further Reading

Here are some good links for learning CSS:

• Code Academy - Has really cool interactive tutorials.
• W3Schools - A more straightforward approach to learning CSS.