CSS Tutorials and Examples

Css position tutorial

CSS position property decides how an element will be places in document. It can have 4 values static (default), relative, absolute and fixed. Here is read more

css z-index tutorial

CSS z-index property decides the ordering of elements when they overlap. Higher z-index mean it is closer to you and hence with appear accordingly. The read more

CSS – border radius and round corners examples

CSS3 border-radius property can be used to make corners round of a block element. Border radius can have upto 4 values. Here is how a read more

CSS :before and :after examples

CSS pseudo element :before and :after can be used to place some content before or after an element. Here are some examples. Basic :before and read more

Css :last-of-type examples

Css :last-of-type pseudo class apply to an element if it is last sibling among its parent’s direct child elements of same type. Here is an read more

Css :last-child examples

Css :last-child pseudo class apply to an element if it is last sibling in all direct child elements of its parent. It can be used read more

Css :first-of-type examples

Css :first-of-type pseudo class apply to an element if it is first sibling among its parent’s direct child elements of same type. Here is an read more

Css :first-child examples

Css :first-child pseudo class apply to an element if it is first sibling in all direct child elements of its parent. Here are some examples. read more

Css :nth-child vs :nth-of-type

Css :nth-child and :nth-of-type pseudo classes look very similar initially. But these are slightly different. Few points to explain the difference: :nth-child considers all sibling 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

CSS – direct child vs any descendant selector examples

CSS direct child can be specified using A > B and any descendant can be specified using A B. This should be used with care 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

How to display auto fade out message using jQuery

Sometimes we need to display a message and then fade it out. jQuery fadeOut will make an element fadeOut (by animating css property opacity) will 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 of the child element read more

Chrome developer tools – how to debug :hover

At times we need to force hover state when we are debugging CSS in style inspector in Chrome developers tools. Chrome supports forcing a certain read more

HTML table with alternate color rows

We often need to display a table with alternate rows having different colors. We can do it either using CSS3 nth-child selector or using jQuery. read more

Jquery – change table cells color based on value

It is sometimes useful to change color of table cells based on values for better presentation and readability. Here is quick code snippet to do read more

jQuery – make a div stick at top on scroll

Find initial position of div box var boxInitialTop = $(‘#stickybox’).offset().top; Attach handler to scroll event $(window).scroll(function () { if ($(window).scrollTop() > boxInitialTop) { // Box’s read more

jQuery – check if an element exists

jQuery when used with selectors like element tag, class, id can potentially return a jQuery object with no element in it. Since jQuery contains number 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

PhantomJS – find all fonts-families on a web page

PhantomJS (Headless browser javascript library based on webkit) can be used to find the font-families used on a website page using jQuery. This can be 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 include bootstrap javascript and css in wordpress post

Bootstrap is pretty handy javascript and css library/layer over jquery which provides many useful pre-built functionalities like responsive design, transitions, modals, buttons, etc. In case 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

Internal vs external css

There are two ways to include a css on a site. In case you are using a wordpress site, many plugins involving frontend ui element 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

Mailchimp lightweight subscription form code

If you are using mailchimp for managing your newsletter campaigns, then you can either use a link to mailchimp site or use subscription form directly read more

How to display text on image

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

How to use chrome developer tool to edit and debug css

Google Chrome Browser has powerful developer tools to debug css on any web page. It can also be used to quickly make minor changes in read more

How to use fitvids.js for automatically resizing videos

Fitvids (github link) is an open source javascript library built by Chris Coyier and Paravel which makes the width of videos in a web page fluid. To be read more

How to write custom css in wordpress

Sometimes we need to override some existing css or write some new custom css for the wordpress blog site. This can be pretty handy for read more