css

CSS: Making the Switch from Static to Relative Units

CSS (short for Cascading Style Sheet) gives web developers plenty of options when it comes to defining lengths for HTML elements. In a broad sense, defining lengths in CSS can be broken down in to two categories: using absolute versus relative units. Absolute units are probably most commonly done with pixel lengths with the familiar px unit. Other absolute […]

css

CSS: Simple Sticky Footer

The sticky footer… The oh-so-sought-after expanse at the bottom of the page that contains contact information, site navigation, a call to action, or whatever else you might want to chuck in there. It’s the element that knows its place in the world (wide web) and embraces it by staying in it’s place. A well executed sticky footer encourages your site visitors to further engage; it […]

1024px-Flatirons_Winter_Sunrise_edit_2

CSS !important Rule: How to Use It Correctly

The CSS !important rule approaches us like a fake savior angel in our darkest times while we are trying to make something work in CSS. It is a great option to have for sure, but are we really using it in the correct way and only in cases where we have no other option? In […]

1024px-Flatirons_Winter_Sunrise_edit_2

CSS Class vs ID: Which One to Use

In this post, we will take a brief look at how classes and IDs are used in CSS, and we will try to help you better understand how to decide when to use CSS class vs id by providing some simple examples. In CSS, you can assign and control the style of HTML elements on […]

1024px-Flatirons_Winter_Sunrise_edit_2

5 Examples to Help You Understand How CSS Opacity Works

You can control the transparency of HTML elements on a web page such as text, images or backgrounds with the help of the opacity property in CSS. In this tutorial, we will talk about CSS opacity and we will provide some examples to demonstrate how it works. How CSS Opacity Works The word opaque is […]

css

Simple CSS z-index Tutorial for Beginners

In this tutorial, we will talk in detail about what CSS z-index property is, how it works, its default value and the values it can have by giving some examples. We will also mention some use cases to give you ideas about where you can apply z-index in your web layouts. What is CSS z-index? […]

css

How to change CSS using jQuery?

The jQuery .css method is used to GET or SET DOM element CSS properties. The following tutorial will demonstrate 4 core concepts of jQuery’s .css method 1. GET a CSS property from a DOM element 2. GET multiple CSS properties from a DOM element 3. SET a CSS property on DOM elements 4. SET multiple CSS […]

1024px-Flatirons_Winter_Sunrise_edit_2

Off Canvas Navigation with CSS & a Checkbox

Off canvas layouts are a popular way of displaying content, especially navigation, hidden from the main viewport. There are quite a few JavaScript and jQuery off canvas plugins, but in the latest revision of my personal blog I decided to attempt the off canvas layout without any JavaScript at all. The solution I came up […]