Skip to main content

Welcome to Alternate Gateways

Alternate Gateways is a website dedicated to bringing you CSS tutorials that are easy to understand and informative.

A Beginner's Guide to CSS

  • A Beginner's Guide to CSS | Part One - Laying the foundations

    Modified on: Monday, August 22, 2016 - 11:40
    Welcome to part one of A Beginner's Guide to CSS (previously titled CSS 101 - A Beginner's Guide to CSS). This series will take you through CSS from the ground up, developing your knowledge progressively until you're able to understand and use CSS in a (hopefully) competent fashion.
  • A Beginner's Guide to CSS | Part Two - The Selectors

    Modified on: Thursday, August 18, 2016 - 11:11
    In Part One - Laying the foundations, we learnt that CSS stands for Cascading Stylesheets and is used to control the appearance of a web page. We also learnt where to put our CSS. So, how do we tell CSS what we want to style? Simple.
  • A Beginner's Guide to CSS | Part Three - How to apply CSS

    Modified on: Thursday, August 18, 2016 - 11:13
    Welcome to Part Three of A Beginner's Guide to CSS - How to apply CSS. In this instalment of the series, we'll look at how to apply CSS to your elements, as well as the recommended naming conventions for CSS rules.
  • A Beginner's Guide to CSS | Part Four - The CSS Order of Precedence

    Modified on: Thursday, August 18, 2016 - 11:09
    Welcome to Part Four of A Beginner's Guide to CSS - The CSS Order of Precedence. Before we delve too far into the fabulous world of CSS, I feel I should explain the order in which CSS styles are applied. This is important and will cause you frustration if you don't know it. But thankfully, it's easy to learn!
  • A Beginner's Guide to CSS | Part Five - The Document Tree

    Modified on: Thursday, August 18, 2016 - 11:13
    Before we progress with CSS, you need to learn about a little thing called the document tree. The document tree describes the hierarchy of an (X)HTML page and is important to learn because you'll need some grasp on how the elements you're working with relate to each other.
  • A Beginner's Guide to CSS | Part Six - CSS and the Units of Measurement

    Modified on: Thursday, August 18, 2016 - 11:09
    In CSS, when you assign a numerical value to an element (be it width, height, padding, border) you must specify a unit of measurement, otherwise the browser won't know what to do with that specific property.
  • A Beginner's Guide to CSS | Part Seven - CSS and Paragraphs

    Modified on: Thursday, August 18, 2016 - 11:12
    You've made it through the chapters detailing some heavy background information on CSS. Now we're on to some practical examples. In this instalment, CSS and Paragraphs, I will show you how to style paragraphs with CSS.
  • A Beginner's Guide to CSS | Part Eight - CSS Font and Text Properties

    Modified on: Thursday, August 25, 2016 - 15:34
    In this instalment of the A Beginner's Guide to CSS series, titled CSS Font and Text Properties, we will be discussing how to format text using CSS. This tutorial is split into nine parts:
  • A Beginner's Guide to CSS | Part Nine - CSS and Links

    Modified on: Thursday, August 18, 2016 - 11:12
    Welcome to the A Beginner's Guide to CSS series, Part Nine CSS and Links. In this instalment, we will be discussing how to style links with CSS.
  • A Beginner's Guide to CSS | Part Ten - Backgrounds in CSS

    Modified on: Wednesday, August 24, 2016 - 10:52
    Welcome to the A Beginner's Guide to CSS series, Part Ten Backgrounds in CSS, where I'll show you how to place a background on an element. Before we continue onto more convoluted topics, I felt I should demonstrate how to apply backgrounds to elements, as this task is integral when it comes to the structure of a page.
  • A Beginner's Guide to CSS | Part Eleven - CSS and Headings

    Modified on: Thursday, August 18, 2016 - 11:08
    Headings add structure to your content, as well as denoting relevant sub-sections. Not only does this process make your content easier to read, but it also helps in situations where devices scan your HTML and break it up into regions of importance.
  • A Beginner's Guide to CSS | Part Twelve - Borders in CSS

    Modified on: Thursday, August 18, 2016 - 11:12
    Welcome to part twelve of A Beginner's Guide to CSS, entitled "Borders in CSS". As the title dictates, this chapter will cover how to use CSS to apply borders to elements. How to draw a simple border To begin with, we will look at applying a seamless border around an element, then we will move onto styling different edges of that border.
  • A Beginner's Guide to CSS | Part Thirteen - CSS and Lists

    Modified on: Wednesday, August 24, 2016 - 11:07
    Welcome to part thirteen of the Beginner's Guide to CSS series — CSS and Lists, which is all about creating and styling lists. This installment doesn't deal with adding images as bullet points or specifying background images for a list, as I felt these topics were beyond the scope of this tutorial.
  • A Beginner's Guide to CSS | Part Fourteen - Layout in CSS

    Modified on: Wednesday, August 31, 2016 - 08:44
    Welcome to part fourteen of A Beginner's Guide to CSS — CSS Layout. All the other past tutorials have led up to this magnanimous point, where we will be covering a substantial CSS topic — how to create layout with CSS. You're probably thinking, we've covered layout...haven't we? but we haven't really.
  • A Beginner's Guide to CSS | Part Fifteen - Margins and Padding

    Modified on: Thursday, August 18, 2016 - 11:11
    I've covered margins and padding in a tutorial for my Intermediate and Advanced section, but we've got to the point within this series where you'll need to learn these two properties.
  • A Beginner's Guide to CSS | Part Sixteen - The Box Model

    Modified on: Thursday, August 18, 2016 - 11:15
    We perhaps should have covered this at the beginning of the series, but I wanted to give you a feel for CSS before delving into the more technical side of things.
  • A Beginner's Guide to CSS | Part Seventeen - Tables

    Modified on: Wednesday, August 24, 2016 - 11:33
    Welcome to another instalment of the A Beginner's Guide series. In this chapter we will be looking at an element that has gained a lot of unpopularity over the years: the table element.

Intermediate and Advanced Tutorials

  • How to float items next to each other but aligned to the right

    Modified on: Thursday, August 25, 2016 - 15:25
    So you have a several elements as part of your well-formed and well-written website but your problem is that you want them to sit next to each other, but floated to the right? The solution for this depends on whether you're using inline or block elements. Let's have a look at some practical examples.
  • How to make an element stretch to fit its contents

    Modified on: Wednesday, August 24, 2016 - 14:52
    I've covered this topic in The Top 10 things you've always wanted to do in CSS, but felt I should write a dedicated tutorial on the subject because it's one of the main things people ask me.
  • How to combat float leakage

    Modified on: Thursday, August 25, 2016 - 15:33
    You've probably encountered the scenario at some point: you have a container block with automatic or percentage dimensions and an overflow:visible (the default value for overflow), and you have two elements inside the container, one of which is floated.
  • Horizontal menus and definite/fixed widths

    Modified on: Wednesday, August 24, 2016 - 13:18
    This tutorial explains how to create a horizontal menu with list items of a definite width.
  • Horizontal menus and automatic widths

    Modified on: Thursday, August 18, 2016 - 11:10
    This tutorial explains how to create a horizontal menu with list items that are the same width as the text they contain. In other words: a horizontal menu that contains list items that do not have a definite width, and contract or expand to fit their contents.
  • How to clear floats with the CSS clear property

    Modified on: Thursday, August 25, 2016 - 15:39
    The CSS clear property is used to clear floated block elements.
  • Styling list items with CSS

    Modified on: Thursday, August 18, 2016 - 11:07
    This tutorial will show you how to style your lists with CSS. We will cover simple positioning, changing the bullet point style and using an image as a bullet point.
  • The CSS way to style margins and padding

    Modified on: Thursday, August 18, 2016 - 11:07
    When you want to add space between elements in your document, don't use empty p tags or br tags. There's no point, when creating space is something CSS can do easily using the CSS properties margin and padding.