Currently Browsing: CSS Tutorials

Pure CSS Light Box

VIEW WORKING EXAMPLE OF OUR PURE CSS LIGHT BOX NOW A light box is web slang for a way to divide and present such things to your viewers as pictures in a gallery or special site notices. Today I wanted to quickly show you how to create a pure CSS light box. Lets start with our light box structure. Create a new document and add the following:<div class="onLight"> On <div...

read more

Three Column Layout in less than 15 lines of CSS

This is a follow-up to my Three Column Layout in less than 10 lines of CSS tutorial but in this one we are going to be using, no background images no JavaScript and 100% pure CSS. This method only uses 14 CSS rules making it very light weight, easy to maintain, SEO and cross browser friendly. If for what ever reason you feel you might want to use this method but don’t want to follow the tutorial I...

read more

Learning Intermediate CSS Faster Than Ever.

Today we will be expanding on our previous tutorial “Learning the basics of CSS faster than ever” into what areas we are permitted to write our CSS. There are three areas we are permitted to write CSS and these are. Combining Rules – Selectors – Pseudo Class – Inline We talked about how to write inline styles in our last tutorial. We even discussed how even though it’s...

read more

Learning Advanced CSS Faster Than Ever

PLEASE NOTE: This lesson will not be discussing CSS3. Why we wont cover CSS3 here is due to a lack of complete and sound support of most CSS3 styles across all browsers. With this in mind its only wise for us to focus on CSS1 and CSS2 as these are the more well supported versions and will be for some time. Don’t get me wrong I’m all for CSS3 but until us as an entire web community ditch these...

read more

Learning The Basics of CSS Faster Than Ever

So you want to learn CSS huh? Well I can teach it but can you make it stick? My goal here today is to give a CSS beginner a basic understanding of not only how to use CSS but what it really is for. I will do my best to approach the idea of CSS from an entry-level user but I will do so in a matter of minutes. – What is CSS? – When do I use it? – How do I use it? These three questions are...

read more

How to Write Shorthand CSS

Today I wanted to talk about what shorthand CSS is and how it can help lower the amount of CSS you the developer has to write. In the whole scheme of things, CSS is here to help us sum up large amounts of styles and attributes into compact rules and classes that we cascade down our site. With shorthand CSS methods, we are compacting down our CSS even further by stating our styles much differently. To...

read more

Pure CSS Horizontal Menu

Today I wanted to share the easy method of creating a pure CSS horizontal navigation menu with you.You see a lot of sites using them and while some are very creative others are way off base as far as functionality and SEO is concerned.So without further ado let’s begin to create this horizontal navigation menu.

read more

CSS and Properly Centering

Many times I get asked “How do I center something in CSS?” My first instinct would be to tell anyone that to properly align an element center in CSS, you must look at the elements margins. In most browsers using margin:auto; will align elements to the center of its parent element. However one must be careful when using margins of auto because in some versions of IE this simply will not work...

read more

Fix CSS Pseudo Hover Class

Depending on how long you have been playing around with CSS you may or may not be familiar with the CSS pseudo:hover class. The pseudo: hover class is most commonly used to display content to a user based on user interaction with elements on a web site. A user would hover over a link and a drop down with more links would appear. This was done by declaring your css element rule and adding the pseudo:hover...

read more

Pure CSS Hide and Display Content

EXAMPLE OF FINISHED PRODUCTHomeHome Content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,...

read more