Recent Blog Posts

Blog Posts » CSS »

CSS !important

I recently discovered that CSS allows the use of !important on inline styles.

My issue at the time was I was having to use !important on a particular tag to get new properties to hold from parent definitions. !important by nature overwrites any inine definitions.

But if you need to override the already over-ridden, you can use !important on your inline style to do this. Not something you need every day but I always find if I write something down I tend to remember it.

That last bit was not !important!

Custom CSS Cursors

if you are using a CSS3 compatible browser you may have noticed custom cursors in this website. These have been added thanks to the great improvements in the evolution of CSS as well as most Browser's finally supporting current versions.

Now we can create CSS classes like:

.ccursor_pointer {
cursor: url('pointer.cur'), pointer;
}
.ccursor_wait {
cursor: url('wait.cur'), wait;
}

Applying either class to any element will apply the custom cursor. Just be sure your path to cursor is correct. The additional options (pointer & wait) refer to the CSS browser version of the cursors - these are used if the Custom file cannot be loaded or if the browser or OS does not support the url attribute with CSS cursors. By specifying the default for situations like this, you regain some control over the cursor even though full support is not available (older browsers, Mac OS, etc).

Making Elements Unselectable using CSS

You can make any or all elements unselectable using CSS and in a lot less steps than a Javascript alternative.

Just apply this rule in any element using CSS. The example below will make all elements in the page unselectable.

body{
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}