Ah, the unmitigated joy of studying semantically correct HTML5 with the grace and power of CSS. You cannot imagine the heights of this ecstasy unless you coded web pages some 20-something years ago when Internet Explorer was the devil, and the Browser Wars were still a thing. The abuse of tables for layout and images for headings are now dark memories from the past.
Tutorials
-
Starting simple CSS
A step-by-step tutorial introducing a Cambridge IGCSE ICT student to CSS.
-
Zebra-striping table using CSS3
I love that CSS3 allows the zebra-striping of tables using the nth-child() selector. Achieving this in plain HTML is a messy manual process that must be repeated should the contents/row order of the table change. The CSS solution is far easier to implement. The nth-child() selector can be a number, a keyword, or a formula. See…
-
Creating a fixed footer with CSS
A web page often contains too little content to fill the vertical height of the browser portal. This means that any attempt at a footer section looks silly as the footer and its content end up halfway up the screen. Any attempt at adding vertical spacing between your content and your footer section to remedy…
-
Expressing colors in CSS
This article is part of a series of posts aiming at helping students transition from HTML to HTML and CSS.
-
Formatting lists with CSS
HTML offers a small list of bullet options for unordered lists. Read up on lists in the post HTML lists. If you are looking to create a list with custom bullets using an image, you will need some CSS. In this post: Required knowledge: Bullets Standard The default bullet point, or list marker, is disc…
-
CSS selectors — the basics
In the post Starting simple CSS I left off with a basic CSS rule. Your formatting requirements will quickly require you to add to your CSS skills to achieve your design. To do this we need to understand the role of selectors a little better: think of CSS selectors as the “hooks” or “markers” that…
-
Columns in HTML using CSS
A quick and easy method of adding columns to your HTML page using CSS to create a newspaper column layout. In this tutorial: Required knowledge: 1. HTML Some simple HTML and some Lorem Ipsum placeholder text… CSS In the code below, I have applied the CSS to the <article> element (an HTML5 tag) with the…
-
HTML “drop cap” using CSS
The drop cap effect can be used to great effect to create a more traditional, book-like effect on a web page. Open the Codepen below and fiddle with the font and pixel sizes of the first letter of the paragraph! In this tutorial: Required knowledge: 1. CSS 2. Codepen See the Pen HTML drop cap…
-
CSS’s clear attribute
As you progress from the most basic web development skills, the solution to one problem often creates a new problem. Such is the case when we start using HTML‘s align attribute on an image to wrap text. If you open the first Codepen below and view it full screen you will see that the result…
-
Background images with CSS
Background images in web pages are best avoided in most circumstances. Very often the technique fails in execution due to issues with different browser portal size and legibility issues. In this tutorial: Required knowledge: 1. Background-image basics It is possible to code a background image in an HTML element. This should be done using CSS…
-
Using CSS for animation
HTML was created as a way of transferring and displaying static information. As the Internet has evolved and the WWW has morphed into what it is today, dynamic information and visual media have become commonplace. The WWW has seen animated GIFs, Flash, JavaScript, audio and video and more added to the mix. In this post:…
-
CSS border-collapse
Standard HTML tables tend to look a bit dated. Adding a border to a table results in something that looks more like a waffle than anything else! I always use CSS to create a variety of formatting styles for tables. I almost always start with border-collapse. In this tutorial: Required knowledge: HTML The following HTML-only…
-
Declaring Fonts in CSS
Before CSS, we used HTML’s tag to specify font faces in our web pages. CSS now offers us the font-family attribute to style text.
-
Formatting tables with CSS
This post is for Cambridge IGCSE ICT students who must format their HTML using CSS. In this post: Required knowledge: 1. Borders Borders can be formatted for the entire table and the “cells” in the table. By default, the borders are invisible. I am starting with borders as coding tables is tricky if you cannot…
-
Styling text with CSS
This CSS tutorial covers the basics of font, line & paragraph formatting in web pages.