Tutorials

CSS Tutorials

CSS 101 - A Beginner's Guide to CSS

If you know nothing/very little about CSS, you want to brush up on your CSS, or your background knowledge is a bit shaky, these tutorials are for you. They explain everything you will need to know in order to proficiently use CSS, as well as what goes on behind the scenes. There is also comprehensive information on the (X)HTML tags you will need and their functionality and attributes.

This series is ongoing and is added to on a regular basis.

  • CSS 101 | Part Seventeen - Tables
    Posted on: Monday, August 15, 2011 - 20:38
    Modified on: Saturday, October 29, 2011 - 21:06
    You've probably heard that tables are evil and you'll be cast down into hell for using them. That's so not true! Read CSS 101 | Part Seventeen - Tables to find out why.
  • CSS 101 | Part Sixteen - The Box Model
    Posted on: Monday, May 30, 2011 - 19:25
    Modified on: Monday, August 15, 2011 - 21:39
    Step inside to view the inner-workings of CSS. In the CSS 101 | Part Sixteen - The Box Model, we will be looking at the very useful box model.
  • CSS 101 | Part Fifteen - Margins and padding
    Posted on: Thursday, May 26, 2011 - 20:05
    Modified on: Monday, June 27, 2011 - 21:37
    Margins and padding are essential. CSS 101 | Part Fifteen - Margins and padding will show you what they are and how to manipulate them with ease.
  • CSS 101 | Part Fourteen - Layout in CSS
    Posted on: Saturday, April 9, 2011 - 21:18
    Modified on: Wednesday, May 25, 2011 - 12:32
    CSS 101 | Part Fourteen - Layout in CSS will show you how to use the div tag to create layouts for your website.
  • CSS 101 | Part Thirteen - CSS and Lists
    Posted on: Tuesday, September 14, 2010 - 21:17
    Modified on: Saturday, May 28, 2011 - 19:19
    CSS 101 | Part Thirteen - CSS and Lists will show you everything you need to know to style the three types of list.
  • CSS 101 | Part Twelve - Borders in CSS
    Posted on: Wednesday, August 25, 2010 - 21:15
    Modified on: Wednesday, May 25, 2011 - 20:04
    CSS 101 | Part Twelve - Borders in CSS will show you how to apply borders to your elements, both longhand and shorthand.
  • CSS 101 | Part Eleven - CSS and Headings
    Posted on: Wednesday, July 28, 2010 - 21:14
    Modified on: Wednesday, May 25, 2011 - 20:02
    Some people use strong tags and paragraphs to accomplish what the heading tag does. Learn how to avoid this mistake and all about styling the various heading tags.
  • CSS 101 | Part Eight - CSS Font and Text Properties
    Posted on: Wednesday, July 21, 2010 - 21:09
    Modified on: Tuesday, May 24, 2011 - 19:05
    All about manipulating font and text in CSS, from setting font colour and size, making text uppercase to aligning text and combining multiple font properties.
  • CSS 101 | Part Ten - Backgrounds in CSS
    Posted on: Monday, June 14, 2010 - 21:12
    Modified on: Wednesday, May 25, 2011 - 13:33
    The clever things you can do with background manipulation.
  • CSS 101 | Part Nine - CSS and Links
    Posted on: Wednesday, June 9, 2010 - 21:10
    Modified on: Wednesday, May 25, 2011 - 13:26
    All about styling links. 'Nuff said, really.
  • CSS 101 | Part Seven - CSS and Paragraphs
    Posted on: Wednesday, April 21, 2010 - 21:07
    Modified on: Wednesday, May 25, 2011 - 13:27
    CSS 101 | Part Seven - CSS and Paragraphs will show you how to style your paragraphs, including removing the margins and padding that create gaps you may not want between your content.
  • CSS 101 | Part Six - CSS and the Units of Measurement
    Posted on: Saturday, April 17, 2010 - 21:06
    Modified on: Wednesday, May 25, 2011 - 12:23
    What are the units of measurement and which should you use.
  • CSS 101 | Part Five - The Document Tree
    Posted on: Saturday, April 17, 2010 - 21:04
    Modified on: Thursday, May 5, 2011 - 23:56
    How elements relate to each other and the hierarchy of an (X)HTML document.
  • CSS 101 | Part Four - The CSS Order of Precedence
    Posted on: Thursday, April 8, 2010 - 21:03
    Modified on: Thursday, December 29, 2011 - 12:08
    Learn about the order in which styles are applied to elements.
  • CSS 101 | Part Three - How to apply CSS
    Posted on: Thursday, April 1, 2010 - 21:00
    Modified on: Thursday, May 5, 2011 - 23:54
    So you've written some styles, but how do you apply them to your elements? Read CSS 101 | Part Three - How to apply CSS to find out.
  • CSS 101 | Part Two - The Selectors
    Posted on: Saturday, March 6, 2010 - 19:57
    Modified on: Thursday, May 5, 2011 - 23:54
    The selectors are vital if you want to use CSS correctly. Learn what they are and how to use them.
  • CSS 101 | Part One - Laying the foundations
    Posted on: Saturday, March 6, 2010 - 19:27
    Modified on: Thursday, August 11, 2011 - 13:52
    Part one of the CSS 101 series introduces you to CSS, from a complete beginner's standpoint.

Short and Sweet CSS

Short and simple tutorials on accomplishing basic stuff in CSS.

  • Posted on: Saturday, August 7, 2010 - 21:38
    Modified on: Wednesday, May 25, 2011 - 13:22
    How to make an element invisible in CSS, using the visibility and display properties.
  • Posted on: Friday, July 9, 2010 - 21:39
    Modified on: Wednesday, May 25, 2011 - 20:05
    How to remove the dotted line from around a link.

CSS SOS

Tutorials targeting common issues that crop up in CSS.

  • Posted on: Sunday, July 25, 2010 - 21:47
    Modified on: Wednesday, May 25, 2011 - 13:30
    Have you ever created an empty element only to find it missing when the page is rendered? Here's why.
  • Posted on: Sunday, July 25, 2010 - 21:45
    Modified on: Sunday, February 5, 2012 - 13:12
    Absolutely positioned elements can sometimes go awry; here's how to deal with position absolute problems.
  • Posted on: Sunday, July 11, 2010 - 21:48
    Modified on: Thursday, May 26, 2011 - 22:56
    How to banish that annoying content overlap that we've all experienced.

Intermediate and Advanced CSS Tutorials

Tutorials on accomplishing intermediate to advanced tasks in CSS.

  • Posted on Friday, October 28, 2011 - 22:03
    Modified on: Friday, November 4, 2011 - 13:59
    Ever wondered how to create rows of form data using only CSS?
  • Posted on Tuesday, October 25, 2011 - 12:56
    Modified on: Friday, November 4, 2011 - 13:43
    Aligning several floated items to the right of a container seems daunting but is surprisingly simple...
  • Posted on Wednesday, July 28, 2010 - 21:52
    Modified on: Sunday, February 5, 2012 - 12:01
    Here's how to use the CSS holy grail property overflow to make your elements stretch to fit whatever is inside them.
  • Posted on Sunday, July 11, 2010 - 21:53
    Modified on: Wednesday, May 25, 2011 - 20:14
    Float leakage is an annoying problem, but the fix is simple; learn how to stop floats from ruining your layout.
  • Posted on Wednesday, July 7, 2010 - 21:55
    Modified on: Friday, May 27, 2011 - 22:17
    At some point you will want to have multiple columns with varying levels of content and have an image in one column line up with the bottom of another column. Here's how to accomplish that.
  • Posted on Friday, March 5, 2010 - 20:56
    Modified on: Thursday, May 5, 2011 - 23:40
    How to override styles and use of the CSS !important keyword.
  • Posted on Friday, October 16, 2009 - 21:59
    Modified on: Thursday, May 26, 2011 - 23:01
    How to create horizontal menus whose list items have a set width, i.e, 10px, 10em.
  • Posted on Friday, October 16, 2009 - 21:58
    Modified on: Saturday, May 28, 2011 - 11:49
    How to create horizontal menus whose list items have automatic widths (basically, when you don't give your list items a set width, or you give them a width of auto).
  • Posted on Wednesday, April 1, 2009 - 22:03
    Modified on: Wednesday, May 25, 2011 - 19:29
    The CSS clear property is often overlooked, but it's very useful and can save you time and unnecessary coding.
  • Posted on Monday, March 23, 2009 - 21:05
    Modified on: Sunday, February 5, 2012 - 11:50
    Fluid layouts are very flexible, but it's not always easy creating pretty and versatile headers for them. Here's how you do it, while maintaining accessibility and aesthetic appeal.
  • Posted on Sunday, September 28, 2008 - 22:06
    Modified on: Wednesday, May 25, 2011 - 13:35
    Some of us still have to support IE6, but that doesn't mean we can't use transparent PNG images. This tutorials shows you how to get PNG transparency to work in IE6.
  • Posted on Saturday, July 19, 2008 - 22:07
    Modified on: Friday, May 27, 2011 - 22:15
    Learn about all the interesting things you can do to list items with CSS.
  • Posted on Wednesday, July 16, 2008 - 22:11
    Modified on: Saturday, October 29, 2011 - 22:29
    The title says it all, really. How to make your backgrounds transparent, using CSS.
  • Posted on Monday, December 10, 2007 - 21:12
    Modified on: Thursday, May 5, 2011 - 23:48
    Sometimes you'll want your footer to stay at the bottom of the page, regardless of how much content you have. The fix is surprisingly simple...
  • Posted on Wednesday, October 24, 2007 - 22:16
    Modified on: Wednesday, May 25, 2011 - 13:46
    Forms can be tricky to style, but Alternate Gateways is here to help you! This is part one of the Alternate Gateways complete guide to styling forms and their components.
  • Posted on Wednesday, October 24, 2007 - 22:14
    Modified on: Wednesday, May 25, 2011 - 13:47
    Part two of the Alternate Gateways complete guide to styling forms and their components.
  • Posted on Thursday, October 18, 2007 - 22:17
    Modified on: Wednesday, May 25, 2011 - 20:18
    Learn how to use CSS to align (X)HTML elements, from text aligning to floating, it's all in The CSS way to align things.
  • Posted on Monday, October 15, 2007 - 22:19
    Modified on: Wednesday, May 25, 2011 - 20:23
    How to create two column layouts using a little CSS and div tag magic.
  • Posted on Saturday, October 13, 2007 - 22:22
    Modified on: Wednesday, May 25, 2011 - 12:34
    The CSS way to style fonts shows you the proper way to style fonts, without using the ghastly font tag.
  • Posted on Saturday, October 13, 2007 - 22:20
    Modified on: Friday, May 27, 2011 - 19:01
    The CSS margins and padding properties are very useful but can be confusing. Let The CSS way to style margins and padding clear things up for you.
  • Posted on Thursday, October 4, 2007 - 01:02
    Modified on: Wednesday, May 25, 2011 - 20:27
    Ten of the most common CSS tasks you'll need in your repertoire.

XHTML Tutorials

XHTML 101 - A Beginner's Guide to XHTML

A basic series covering XHTML from the ground up so you can use it with confidence.

  • XHTML 101 | Part One - Laying the foundations
    Posted on: Friday, May 13, 2011 - 23:28
    Modified on: Thursday, August 11, 2011 - 20:05
    XHTML 101 | Part One provides an introduction to XHTML, including breaking down an XHTML page, the DTDs, the various versions of XHTML, the XHTML coding standards, well-formedness and how to validate XHTML.

Misc Tutorials

This is a collection of misc tutorials that don't really fit anywhere within the site.

Latest Tutorials

View all tutorials

Share/Save
Visit Alternate Gateways on Facebook