Constructs

The CSS !important declaration is used to give priority to certain styling rules or overwrite unwanted styling in a website. It is also commonly used during debugging such as in Inspect Element. But is it really OK to use !important? This question was philosophized in a blog post by web developer cum philosopher Jens Oliver Meiert. My take on this is to use !important when you know what you are doing as it can cause problems for future styling. So, don’t ever use it until you really need it and consider this as a last resort.

View More

I bet this is a common problem to novice CSS coders, when you accidentally override CSS properties by using shorthand properties. When I just started doing CSS, I stumbled upon this problem that I thought was a “bug” with many different CSS properties like padding, font and especially background. Here is a simple code example to show how this can happen:

	.container {
		padding-top:25px;
		padding-bottom:40px;
		padding:25px;  /* this shorthand CSS property will override all padding properties above and set all padding directions to 25px */
	}

To prevent this from happening, you can use shorthand the CSS property first, followed by any specific CSS properties you want. For example:

	.container {
		padding:25px; 
		padding-bottom:40px;
	}

Hit the button below to see more examples at CSS Tricks.

View More

Recently, Wired has updated their website with a new link styling and hover effect. Inspired by this styling, I’ve created something similar but with a little bit additional styles like using different color combinations for the text and background.

HTML

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ante aliquet, porta elit quis, accumsan ipsum. Ut bibendum rhoncus tellus, vel commodo dui fermentum et. Nunc dapibus dui id euismod pharetra. Maecenas <a href="#" class="highlight red">commodo</a> mi quis nibh pretium, eget blandit erat laoreet. Nam ac viverra enim, eu aliquet diam. Proin bibendum pulvinar <a href="#" class="highlight blue">tincidunt</a>. Nunc mollis quam et <a href="#" class="highlight green">euismod</a> augue congue euismod. Integer hendrerit vitae metus eget tincidunt. Duis ex turpis, sodales nec vulputate a, gravida eget tellus.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ante aliquet, porta elit quis, accumsan ipsum. Ut bibendum rhoncus tellus, vel commodo dui fermentum et. Nunc dapibus dui id euismod pharetra. Maecenas <a href="#" class="highlight yellow">commodo</a> mi quis nibh pretium, eget blandit erat laoreet. Nam ac viverra enim, eu aliquet diam. Proin bibendum pulvinar <a href="#" class="highlight pink">tincidunt</a>. Nunc mollis quam et <a href="#" class="highlight orange">euismod</a> augue congue euismod. Integer hendrerit vitae metus eget tincidunt. Duis ex turpis, sodales nec vulputate a, gravida eget tellus.</p>

As you can see here, every links have two different classes which are highlight and a “color” name class. The highlight class is for base styling effects like font color, text-decoration, border and transition. The other class is simply for assigning different color values.

CSS

.highlight {
	text-decoration:none;
	border-bottom:2px solid transparent;
	color:#000;
    -webkit-transition: background .15s cubic-bezier(.33,.66,.66,1);
	transition: background .15s cubic-bezier(.33,.66,.66,1);
}
.red {
	border-color:#ff0000;
	box-shadow:inset 0 -3px 0 #ff0000;
}
.red:hover {
	background-color:#ff0000;
	color:#fff;
}
.blue {
	border-color:#0000ff;
	box-shadow:inset 0 -3px 0 #0000ff;
}
.blue:hover {
	background-color:#0000ff;
	color:#fff;
}
.yellow {
	border-color:#ffff00;
	box-shadow:inset 0 -3px 0 #ffff00;
}
.yellow:hover {
	background-color:#ffff00;
}
.green {
	border-color:#008000;
	box-shadow:inset 0 -3px 0 #008000;
}
.green:hover {
	background-color:#008000;
	color:#fff;
}
.pink {
	border-color:#ffc0cb;
	box-shadow:inset 0 -3px 0 #ffc0cb;
}
.pink:hover {
	background-color:#ffc0cb;
}
.orange {
	border-color:#ffa500;
	box-shadow:inset 0 -3px 0 #ffa500;
}
.orange:hover {
	background-color:#ffa500;
}

Every different “color” classes have its own color code, border-color values to overwrite the transparent color from .highlight and box-shadow values with inset to make the shadow goes inwards. Finally, for hover effect, background-color is applied accordingly to the appropriate classes. Hit the button below to view the demo of highlighter-style link on hover effect.

View Demo

Here is a good reading material for beginners to learn about CSS background property. CSS background have eight properties which are:

• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin
• background-clip
• background-color

The property background itself is a shorthand notation which will allow you to write combination from the other CSS background properties into one declaration only. For example:

	.example {
		background: url(beach.jpg) no-repeat blue;
	}

This example combines three different background properties into one declaration for setting the image url, making the image not repeated and setting blue as the fallback color. Hit the button below to learn more about CSS background properties by Chris Coyier and don’t forget to check out the Codepen demo by Timothy Miller.

View More   View Demo