Tag Archives: CSS

CSS !important Declarations

Recently I came across lot of code using CSS !important declaration. I had known that this declaration existed but I didn’t knew what it was and had never used it. So than I did my research on it and decided to write a post about it. In this article I will discuss what it is, how it is used, when to use it, etc

What is !important?

The !important is a key word which is added to the end of the CSS value to give it more weight. In CSS the rules are applied to elements in a cascading manner.

  1. Find all the declarations that apply to the element in question.
  2. The order in which the styles are applied based on importance and origin. The weight of style sheets are, from least weight to highest weight, first user agent styles, than user, than author style sheets, !important author styles and the height weight is for the !important user styles.
  3. The more specific a selector is, the higher weight it will get. e.g., a style on “div.main p” will have a higher precedence than one just on the “p” tag.
  4. The rules work in top to bottom order. Rules that are defined later in the document tree have higher precedence than those defined earlier. Also, if rules are imported from style sheet then they are considered before the rules which are directly in the style sheet.

The !important is used to force the style to an element and not be overridden by the cascading CSS. When the !important is used that rule gets more weight than it naturally has.

Read more »

Sticky Header and Footer using CSS

In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how we can implement the sticky (or fixed) header and footer using only HTML and CSS.

To create a layout with sticky header and footer can be easily done using the CSS property position:fixed. In my example, I will be displaying a sticky header and a sticky footer.

Read more »

Make a div stick to top when scrolled to

There are times when you would want to display a bar at the top of the page when user scrolls on the page and it should go back to its original position when the user scrolls back up. This is particularly useful when you want to add say a share bar, a search bar, etc and make it always visible even when the user is at the bottom of the page.
Read more »