How to create a class in HTML and CSS


In CSS you need to be able to select something on the HTML page to be able to style it.  Let's take this HTML page for example: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>Style Me</div> </body> </html> On that page, we have a <div> that we want to style.  We want to turn the text red.  To do that we need to place a class on the div tag like so: <div class="colorMe">Style Me</div> We added the class of "colorMe" to this div so now we can select it and style it.  There are many ways to [...]

How to create a class in HTML and CSS2019-10-21T21:24:17-04:00

How to create an animated hover link using CSS


CSS has come a long way since it's early days.  Adobe Flash used to be the only platform that would allow you to get motion or anything animated on a web page.  Those days are long gone. In this tutorial, we will go over how to take a <a> tag, or link, created in HTML and animate it when we hover over it.  To start off let's create our HTML page like so: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Animated Link</title> </head> <body> <a href="">Hover Me</a> </body> </html> All this does is creates a new HTML document with a [...]

How to create an animated hover link using CSS2019-10-14T00:43:53-04:00

How to use relative position in CSS


Sometimes on a webpage, you need to tweak the position of something by a little bit.  Say you have an image that needs to move over a couple of pixels or a video that needs to be shifted over.  For that, we use a CSS position property called relative. Relative positioning moves something from where it used to be originally.  If I have something in my footer down at the bottom of the page, and I relative position it, it will move from where it used to be down at the bottom in the footer.  To show this, let's create two [...]

How to use relative position in CSS2019-09-23T16:05:54-04:00

How to use position fixed in CSS


Sometimes on a webpage, you'll want a part of it to never leave the screen.  No matter how much you scroll up or down, you'll want that piece of the page to always be in the same spot.  For that, we use a CSS position property called fixed.  To have this work we will need to create the HTML first like so: <div class="fixedPosition">I am not going to move</div> <div style="height:1200px;">I make the page scroll</div> Here we have a div tag with some text inside of it.  It also has the class called "fixedPosition" which we will use later in the [...]

How to use position fixed in CSS2019-09-23T15:50:29-04:00

How to create a full screen background


In this post, we'll talk about how to create a full-screen background using CSS and HTML.  We are going to bypass all the CSS properties that exist for backgrounds to do this, so consider this a type of CSS hack (:  What we are going to do is insert an image to the page and then style it to act as a background.  So that is the first part, find the image you want to use and put it on the page like so: <img src="yourimage.jpg" class="bg" alt="Background Image"> You can use a .jpg, .png, .gif, or whatever image you want.  [...]

How to create a full screen background2019-09-05T14:41:47-04:00

JQuery Toggle Drop Down Effect


jQuery is a pretty amazing JavaScript library.  It allows you to do things with JavaScript that were, back in the day, pretty tough to pull off.  Today I want to show you how to do a simple toggle drop down effect using jQuery.  The first thing you'll want to do is create a basic HTML page like so: <!DOCTYPE html> <html> <head> <title>jQuery Toggle Drop Down</title> <meta charset="utf-8"> </head> <body> <p> <span id="s1"> Click to slide panel up and down </span> </p> <div id="d1"> This part slides up and down </div> </body> </html> This sets up a span and div tag that [...]

JQuery Toggle Drop Down Effect2019-09-05T15:11:56-04:00

How To Center Content in a Div Horizontally and Vertically


This little snippet of code will show you how to center content in a div horizontally and vertically using HTML and CSS.  This, in the past, used to be semi-difficult.  Now, using CSS flexbox display property, it's actually quite easy.  First, we'll create a simple HTML skeleton with a div that has a class called "centerMe" inside the body tag: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Center Content Horizontally and Vertically</title> </head> <body> <div class="centerMe"> I will be centered in the div horizontally and vertically </div> </body> </html> Now that we have the starting HTML, we can add the CSS inside [...]

How To Center Content in a Div Horizontally and Vertically2019-09-05T15:43:53-04:00

HTML: A Brief History


Long ago in the far off land of Switzerland something very interesting began, and Al Gore wasn’t there. 1989 Tim Berners-Lee proposes an Internet based hypertext system for sharing documents between disparate operating systems while working as a contractor at CERN (European Organization for Nuclear Research). If you’re interested CERN is derived from Conseil Européen pour la Recherche Nucléaire. 1991 The first publicly available description of HTML. It consisted of 18 elements greatly influenced by SGML (Standard Generalized Markup Language). 1993 First proposal of HTML as a specification to the IETF (Internet Engineering Task Force). At the same time Dave Raggett [...]

HTML: A Brief History2016-12-30T12:14:23-05:00

Styling the Humble Checkbox Using CSS


The checkbox has been a staple in the world of HTML forms since day one and for the most part has remained unchanged. HTML 4 introduced the label tag which can be associated with a checkbox using an id attribute in the checkbox and the for attribute within the label. That way you don’t have to click directly on the checkbox, simply clicking the label will select or deselect it. If the checkbox looks any different today compared to 20+ years ago it’s only because the browser renders it that way. A typical form with several checkboxes would look like this: [...]

Styling the Humble Checkbox Using CSS2016-10-29T22:46:49-04:00

CSS Clearfix: Three Lines and a Breakdown


Occasionally the learning curve in web design can be gentle. Other times it’s a sharp right angle and once in a while it’s just a nasty hair-pin curve. How you perceive these curves is just that, your perception. You know, this morning you feel as sharp as a tack and late in the afternoon you feel as dull as a butter knife. Clearing floated elements has been one of those butter knife curves for me. True confession time…it hasn’t been a gentle or sharp curve, it’s a I know it works so I haven’t devoted brain time to understand it curve. [...]

CSS Clearfix: Three Lines and a Breakdown2016-09-30T00:37:06-04:00

A Printer Friendly Version


“You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup. That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you.”1 The endnote, if you take the time to read it, will tell you the article this references was written in 2002. Fourteen years later and we [...]

A Printer Friendly Version2016-07-28T12:23:10-04:00

Using a CSS Reset


One of the frustrations designers have been feeling for some time now stems from web design by committee, or design via theme. Many web sites today are WordPress sites with a theme and some content. Just add words and you have an instant site. Then comes the task of modifying the site and trying to make heads or tails of the built-in CSS. Have fun! And we won’t talk about accidently removing content that hoses the database that breaks the site…Arg! But I digress. Sometimes that frustration can come from the browser itself. Did you know that your browser, user-agent, has [...]

Using a CSS Reset2016-05-31T18:48:44-04:00

Is It Time for a New Browser?


       When it comes to the topic of web browsers one phrase comes to mind, oh how the mighty have fallen. In the 23 years since the release of Mosaic, “the world’s first popular browser”, we have seen several major contenders rise to the top. In 1994 the same people that developed Mosaic started a company named Netscape and released Netscape Navigator. Its growth was phenomenal as the popularity of the web was just taking off. Microsoft jumped on the band wagon in 1995 with Internet Explorer. During these early years Netscape dominated with as much as 90% of [...]

Is It Time for a New Browser?2016-04-30T14:15:23-04:00

How to Create Multiple Columns Using CSS3

2016-04-30T12:55:37-04:00 In this CSS3 tutorial, you'll learn how to create multiple columns using CSS3. You'll see how to use the column-width, column-gap and column-count properties to make long blocks of text readable and responsive to your user's preferred resolution. Visit our CSS3 Training page for more information on our CSS Training Classes.

How to Create Multiple Columns Using CSS32016-04-30T12:55:37-04:00

CSS3 Multiple Columns


Doing a basic web page text layout using more than one column has been much more of a chore than it ever should have been. In the early days of web design almost everything was built using tables. Actually tables inside tables inside tables. Along comes HTML 4.0 with its companion CSS but we still continued using tables. Why, because our browsers weren’t compliant. It should have been easy because CSS introduced the float property. Take two div tags and float them side by side and we have the basic design concept of two columns. Eventually browsers did embrace CSS and [...]

CSS3 Multiple Columns2016-04-28T20:09:11-04:00

Cropping Images with CSS


There are times when you want to focus on a specific area of a photograph but don’t need a separate, cropped version of the picture. CSS offers an approach that will maintain the complete, original image but allow you to crop, mask, or clip your picture. Let’s begin with a simple example. This page includes a full-size image of a young lady sipping a cold beverage on a beautiful spring day. […]

Cropping Images with CSS2016-03-29T12:09:30-04:00

Using CSS3 Instead of JavaScript


CSS3 has been in development since 1998, that’s right, 1998. Both CSS1 and CSS2 became standards in quick succession, December of 1996 for CSS1, and May of 1998 for CSS2. One of the main differences between CSS3 and its predecessors is the use of documents or “modules” to contain different components of the specification. Some examples would include media queries, level 3 selectors, level 3 color, and multi-column layout. These modules progress at different rates and are largely dependent on browser support. There are two specific modules we are going to take a look at today: transforms and transitions. Transforms can [...]

Using CSS3 Instead of JavaScript2016-02-22T13:59:03-05:00

Preserving White Space Using CSS


We find it easy working with white space in today’s generation of applications. In word processing pressing the spacebar, tab key, enter, return, or even shift+ enter and what they deliver are all things we have grown to expect. That isn’t the case when designing for the web. Some visual design programs handle basic white space issues like line breaks and paragraphs but the remainder of presentational formatting is left up to us. There is no HTML tab tag so we insert additional space characters. Without the space character (technically the non-breaking space character; &nbsp;) the browser will strip out the [...]

Preserving White Space Using CSS2016-02-01T23:34:21-05:00

10+ Web Resources for Front End Developers


Things on the web move so fast they make the idea of “time flies” seem slow. The World Wide Web has been available to the public since 1991, 25 years this fall. Most people today couldn’t imagine life without the web. Developers are faced with a tremendous challenge today. The web is a moving target. So much so that WHATWG (Web Hypertext Application Technology Working Group) has chosen to refer to HTML as a “living document”, meaning it is constantly being edited and updated. This means the tools we use and the items we refer to change constantly as well. This [...]

10+ Web Resources for Front End Developers2019-08-07T15:20:17-04:00