CSS Tutorials for Beginners

Here are several CSS lessons for new website designers available through the links below on the left that will teach you how to master CSS Positioning and to use other CSS properties in ways that will help you design your website with style, confidence and creativity. These tutorials focus on layout control to help beginners overcome common problems without getting bogged down in jargon. You'll also be introduced to some of the new CSS 3 properties and working with responsive design principles.



CSS Positioning is a powerful website design tool and it's simple once you understand the basics. There are two choices for the "position" property that are most important to understand: absolute and relative. A position setting of 'absolute' removes the element from the normal document flow and sets the element's position with respect to its parent positioned element. Relative positioning sets the element's position with respect to its position in the normal document flow, offset by the 'top', 'bottom', 'left', and/or 'right' settings.

When using CSS positioning, to get reliable results you need to be sure to use the HTML 5 "<!DOCTYPE html>" DOCTYPE statement) at the start of your HTML document. This sets the major browsers, including (thankfully, now-defunct) Microsoft Internet Explorer and Edge, Firefox, Chrome, Opera and Safari, to use Standards Compliance Mode for page rendering. Doing so minimizes the layout differences between the major browsers and helps insure that all users see your pages the way you designed them to be seen.



This page was last modified on September 16, 2021



Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!