CSS cookbook

CSS – place a div in bottom right corner of browser

To place a div in bottom right corner of browser or iframe, we can use position:fixed along with right and bottom property value assigned to read more

CSS – round toggle switch using checkbox and label

Css round toggle switch can be implemented using html checkbox and a label tag which appears after it. The high level approach steps are: We read more

Install sass on Mac or Linux using ruby gem

Sass can be installed on Mac or Linux using ruby gem. To install sass follow these steps. Install sass gem $ sudo gem install sass read more

CSS – enlarge image on hover

CSS transform:scale(2, 2) can be used on hover to resize (double) an image (horozontally and vertically). We can use any scale factor. Here is an read more

CSS3 Gradient examples

A gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and 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 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 – 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 – 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:

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

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 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

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

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 – 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 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

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

node-sass quick start tutorial on Linux and Mac

Sass (Syntactically Awesome Stylesheets) is a style sheet language which brings programming features like variables, etc. to css. It makes maintaining and modifications in css read more

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

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 – 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 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 – 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 – align multiple divs 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 source map example using gulp-sourcemaps

If you are concatenating multiple css files into once css file, it is useful to have sourcemap in your combined css file in development environment. 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 – :nth child, :nth-last-child, :first-child, :last-child pseudo classes examples

CSS nth-child, nth-last-child, first-child, last-child pseudo class selectors (:nth-child(), :nth-last-child(), :first-child, :last-child) are pretty powerful css selectors to create very useful styles in html. Here read more

How to display a div in browser window center

To display a div in browser window center we can use css position value fixed. The left and top value of fixed position are relative read more

CSS – how to align image and text in center vertically

We frequently need to center text and images when we are writing HTML/CSS. This can be done by using vertical-align:middle property on the child element read more

CSS menu using css pseudo element :hover

CSS hover pseudo element can be used to create simple menu without using any Javascript. This is achieved by making menu children visible when parent read more

CSS – use :before to add heading to a div

Css pseudo element/selector :before can be used to prepend some content before an element using a class or any other selector. This can be pretty handy read more

viewport and media queries for mobile browsers – quick introduction

Html meta tag viewport should be set to appropriate value for responsive web sites. Viewport content values like width define how the site will render read more

How to use html pre tag to display code

Html pre tag can be used to display code on WordPress blog or any site. HTML pre tag represent preformatted text. Text within this element 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

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