Category Archives: CSS

How to create Triangles using CSS

Many times we come across cases where we want to have triangles, arrows or simple shapes on a site. Usually we use images to add arrows or triangles. However, this can be easily achieved by just using CSS and no need of images at all. In this post we will see how to easily we can create triangles and a few other designs using CSS.

The borders in a browser are drawn at angles, so we can use this technique to create triangle. To create a triangle we will set the border-width value for the side in which we need the arrow. Then, we will set that side’s border color and make all other sides transparent. Also, we set the width and height of the element to 0.
Read more »

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 »