Main > Web Developer/ CSS tutorials

dot.gif (120 bytes) Web Developer and CSS tutorials

Introduction to CSS Variables
A comprehensive introduction to CSS Variables, which is a new browser feature that lets you store and reuse CSS values in your CSS. Unlike variables in CSS Preprocessors, CSS variables are live, and accessible using JavaScript.

Creating a slick, animated Full Screen Search Form with CSS3 and JavaScript
The trend for search boxes these days has been bigger and bolder. This tutorial shows how to create a slick, well engineered full screen search form that works beautifully across all modern browsers and devices.

Displaying the Local Time of Any City using JavaScript and Google Time Zone API
This tutorial looks at how to use Google Time Zone API to reliably display the local time of any city or location in JavaScript.

Creating a simple page transition using CSS and JavaScript
See how to build a simple but sleek page transition using CSS3 transitions and animation that appears while a page is loading.

4 novel ways to deal with sticky :hover effect on mobile devices
CSS's venerable :hover pseudo class presents a bit of a conundrum on touch screen devices, where the :hover style stays with the element the user just tapped on until he/she taps again elsewhere in the document. This tutorial looks at 4 creative ways to deal with "sticky hover" effects on mobile devices.

CSS Flexbox 101- Introduction and sample patterns
In this tutorial, I'll go over the key elements that make up CSS Flexbox, plus show you some common Flexbox patterns to validate its usefulness. After this leisurely read you'll wonder how you ever went by so long without flexing.

Youtube Player API and creating a simple Youtube lightbox
See how to create a simple Youtube video lightbox, by first creating a responsive and vertically centered Youtube iframe, then using Youtube URL parameters and the Youtube Player API to control it.

Using CSS3 keyframe animation to create a swinging image
In this short tutorial, we'll see how easy it is to create an image that swings like a pendulum continuously using CSS3 keyframes animation.

Displaying RSS feeds using YQL, a Google Feed API alternative
This tutorial looks at how to use Yahoo's YQL service as an alternative to Google Feed API to quickly display RSS feeds from external sources using JavaScript only.

Creating a sticky header bar using jQuery and CSS
A hot trend in web design these days is the use of sticky headers, where the header becomes temporarily fixed on the page whenever the user starts to scroll past it, keeping the element in view. In this tutorial we'll dissect the making of a well engineered sticky header using jQuery and CSS.

Creating an off-canvas side menu using CSS3 (and a touch of JavaScript)
In this tutorial, we'll see how to create the iconic off-canvas side menu from scratch using CSS3 only, and with the help of a little JavaScript, polish it off so it's fully ready for real world use.

Overview of CSS3 multiple column layout
CSS3's multi-column module magically divvies up any piece of content across the desired number of columns, creating that elegant newspaper layout. In this tutorial we'll take a look at how it all works, and also, creating responsive CSS3 columns.

A pure CSS Before and After image effect
In this tutorial we'll see how some careful stacking of two images in CSS can make way for a quick "before" and "after" image effect, whereby moving the mouse over the image container peels back one image to reveal another.

Creating a basic parallax scrolling effect using CSS and JavaScript
Parallax scrolling is a visual technique where elements on the page move or animate at different speeds as the user scrolls the page, creating depth and visual intrigue. This tutorial walks you through how to create a simple parallax scrolling effect using CSS and JavaScript.

Creating a live CSS clock using CSS3 and requestAnimationFrame()
Pure CSS only interfaces are all the rage these days, so lets explore that concept with our very own CSS3 clock, then see it come to life using some JavaScript.

Manipulating CSS3 transitions using jQuery
In this tutorial we look at how to use jQuery to dynamically modify CSS3 properties and react to when a transition has completed. It's the key to injecting logic to your transitions!

Introduction to CSS media queries
With today's challenge of building webpages that look right in the myriad of different devices comes CSS media queries, a nifty CSS feature that builds upon CSS Media types of CSS 2.1 to help you easily cater your page based on the aforementioned factor and more.

Custom Attributes in HTML 5
HTML 5 supports a new "data" attribute you can add inside elements to store arbitrary bits of information, to be later parsed using JavaScript for example. This tutorial shows you how to utilize this new attribute.

Getting global and external style sheet values in DHTML
This useful tutorial looks at how to use DHTML to retrieve inherited CSS property values from global and external Style Sheets

Creating a flashy image slideshow with IE Transitions (IE)
IE transitions is a collection of prebuilt visual effects in IE that can be applied during content state changes. A step by step tutorial on creating a cross browser image slideshow that's enhanced visually in IE by taking advantage of IE Transitions.

Overview of CSS3 Structural pseudo-classes
Structural pseudo-classes let you select and style child elements of a container based on a variety of generic criteria, such as the 3rd child, even/odd child elements, or even the nth child element of a certain type. Learn all about them here.

W3C CSS Selectors API- The querySelector() and querySelectorAll() methods
The querySelector() and querySelectorAll() methods let you enter a CSS selector as a parameter and return the selected elements as DOM elements. Think of them as document.getElementById() on steriods.

Performing GET and POST requests using Ajax
Ajax, once stripped of all its fanciness, basically describes just two things- performing "GET" and "POST" requests asynchronously. This tutorial explains Ajax frankly and gently, while also covering the important topics of fetching XML and JSON files using Ajax.

Displaying RSS feeds easily using Google Ajax Feed API
Displaying RSS feeds from other sites on your own is a nice way to show constantly updated content automatically. In this tutorial, we show you how to use Google Ajax Feed API to display RSS feeds from other sites on your own easily and without hosting the files on your own server.

Relying on DOM readiness to invoke a function (instead of window.onload)
In this tutorial I'll show you how to call a function as soon as the document's DOM is ready for manipulation, versus via the often slower window.onload event handler.

Fixed Content using CSS/ Dynamic Expressions
See how to use CSS's "fixed" positioning to render content that doesn't move on the screen, plus how to simulate the effect in legacy IE browsers (5 and 6) using dynamic expressions.

CSS Hacks- the good, the bad, and the ugly
David provides a detailed look at your various options when it comes to CSS hacks to fix those browser inconsistency woes, even in IE7. The good and the bad aren't the only players in town!

Introduction to the TreeWalker object of DOM
The TreeWalker object is a powerful DOM2 object that lets you easily filter through and create custom collections out of nodes in the document. This is a comprehensive tutorial on how to utilize this object.

RSS Ajax JavaScript ticker
In this tutorial, I'll show you how to combine RSS, Ajax, and JavaScript to create a live RSS ticker.

Including the contents of an external page using Ajax
This tutorial looks at how to use Ajax to dynamically include the contents of an external page onto the current one automatically each time the page is requested. Think of it as SSI client side!

Changing external style sheets using the DOM
Using the DOM, you can access and manipulate external style sheets on the page, from adding/deleting rules to modifying existing ones. This comprehensive tutorial shows you how.

Applying border & opacity to images onMouseover in CSS
Learn how to spruce up images on your webpage with a border or opacity effect onMouseover, using CSS only.

Useful CSS shorthand properties
This tutorial looks at some commonly used CSS shorthand properties that can save you both time and coding.

Custom CSS cursors
A comprehensive tutorial on all the available cursors at your disposal in CSS (as of CSS2.1), plus using JavaScript to manipulate the cursor.

Rotating regular HTML content using DHTML
One of the great nuisances of using JavaScript to display content on demand is the requirement that everything be contained in variables. See how DHTML can help shatter that limitation, so regular HTML content can be dynamically rotated and shown just the same.

Adding Generated Content in CSS2
Generated Content is an exciting new feature in CSS2 that lets you insert string and image content, among other types of content, onto the page dynamically using CSS. Learn all about it in this tutorial.

Introduction to Dynamic Properties (IE)
Dynamic Properties is a relatively unknown feature of IE5+ that allows you to substitute static values in your HTML with dynamic expressions instead. Now that's what we call DHTML!

Rotating regular HTML content using DHTML
One of the great nuisances of using JavaScript to display content on demand is the requirement that everything be contained in variables. See how DHTML can help shatter that limitation, so regular HTML content can be dynamically rotated and shown just the same.

Manipulating a XML file using DHTML
In this tutorial, we look at using DHTML to retrieve and display a XML file. This is useful when you need a client side method of including XML files on your webpages.

Fading in text using the DOM
Here we'll learn to do with scripting what Java and Flash have "been there done that" with- fade text gradually into view  Brought to you by the new DOM of IE5 and NS6.

Accessing HTML attributes using the DOM
Among the many talents of the DOM is its ability to retrieve and modify attributes inside HTML elements. Using just a small set of methods, you can intuitively get the width of a DIV, change the src of an image, or even remove the background image of the document!

Adding motion blur to objects in IE5.5
A lot of DHTML effects these days involve objects animating around the page in some fashion. In, IE5.5+, you can increase the realism of such events, by adding a motion blur to the object as it moves.

Manipulating image opacity in browsers
See how to change the opacity of elements on the page such as an image, and create a script that fades an image in and out!

CSS Media types and printer friendly pages
Learn about media types in CSS-2, and how it can be used to easily produce printer friendly pages.

Comprehensive CSS Guide
This tutorial by will guide you, from the ground up, how to code CSS (Cascading Style Sheets). Learn everything from the various ways of defining style, to how to use them to manipulate font, background, margins, and more. [Corresponding CSS reference sheet]

Specifying page breaks for printing
With CSS (level 2), the grip webmasters have over their webpages extends to the printer. This tutorial reveals how to insert artificial page breaks for printing of your page in IE5 and NS6.

Scrollbar coloring in IE 5.5+
Developers have long whined for the ability to alter the browser's scrollbar colors, and in IE 5.5 (the latest version of IE as of Nov 2000), that wish is granted. See how in this tutorial.

Adding drop caps effects to your paragraphs using CSS
Learn to deploy the age-old drop caps effect of traditional print to your paragraphs, in our latest web building tutorial!

dot.gif (120 bytes) More tutorials

Book Reviews

CSS Cookbook review

JavaScript Tools:
Site Info

CopyRight (c) 2016 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info