CSS Tutorials

CSS – !important examples

CSS annotation !important will override all other styles (irrespective if specificity). Note that using annotation !important is discouraged and should be avoided. Here are some read more

Test site css, javascript, html in old IEs

We frequently need to test css, javascript and HTML in old IE (internet explorer) browsers on Windows. This can be done using IE11 developer tools read more

CSS – align div horizontally

To align div horizontally, one solution is to use css float property. But a better solution is to to use CSS display:inline-block on all divs read more

CSS – align div in center horizontally

Div (when a block level element) or any other block level element can be aligned in center of its container using property margin-left:auto and margin-right:auto. read more

CSS – align div in center vertically

To place a div (or any block level element) of unknown size containing text, in center of its parent vertically, the following approach can be read more

CSS – align text in center horizontally

Text can be aligned in center of a div or any other block level element using CSS property text-align:center. Note that this property applies of read more

CSS – drop cap effect

CSS drop cap effect can be achieved by making first letter of bigger size (keeping line height not so large) and the applying float:left on read more

CSS automatic table row numbering

CSS3 counters can be used to number table rows automatically. We need to maintain a counter per row and display it using ::before on first read more

Create circle and oval in CSS

CSS circle and oval can be created using border-radius on a div. For circle the horizontal and vertical radius of each corner is same, whereas read more

CSS clearfix – clear float automatically using ::after

A clearfix class is a way for an element to automatically clear left and right float on its child elements. This eliminates the need to read more

CSS counters – automatic numbering before h2

CSS counters are variables maintained by CSS whose values may be incremented by CSS rules to track how many times they are used. Here is read more

CSS automatic nested numbering for headings

CSS counters are variables maintained by CSS whose values may be incremented by CSS rules to track how many times they are used. Here is read more

How to create CSS triangles or arrow heads

CSS triangles (arrow heads) in various directions (up, down, left, right) can be created using a combination of thick CSS borders (visible and transparent) on read more

CSS – how to do first letter capital and bigger

CSS first letter can be made capital and bigger using pseudo element ::first-letter. Here is sample html/css code:

How to display text on image using css

Css position can be used to place a text over an image. This can used to place some text like alpha or beta over a read more

Csslint – quick command-line tutorial and how to use it for pre-deployment sanity check

Csslint can be used to check the syntax of a css file. This can be used in release/deployment scripts to check the syntax of css read more

CSS inherit value examples

CSS inherit value is used to set a css property value to its parent element value. It can be used during debugging (e.g. In Chrome read more

CSS initial value examples

CSS initial value is used to reset a css property to its user-agent value. It can be used during debugging (e.g. In Chrome developer tools) read more

CSS – inline-block and baseline alignment

When we use display:inline-block to place elements next to each other, by default their baseline is aligned to to parent baseline unless vertical-align property of read more

CSS – margin collapsing

In CSS adjoining vertical margins of two or more boxes (these may or may not be siblings), can combine to form a single margin. These read more

CSS unset value examples

If CSS property value is unset, then if it is an inherited property, this is treated as inherit, and if it is not, this is read more

Web fonts – beginner’s survival guide to web typography

There are lots of fonts available which can be used when you are designing a web site. There is no strict rule on choice of read more