CSS

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.


HTML5 Powered with CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, and Semantics

Tutorials

  • Starting simple CSS

    Starting simple CSS

    A step-by-step tutorial introducing a Cambridge IGCSE ICT student to CSS.

    Read more…

  • Zebra-striping table using CSS3

    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…

    Read more…

  • Creating a fixed footer with CSS

    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…

    Read more…

  • Expressing colors in CSS

    Expressing colors in CSS

    This article is part of a series of posts aiming at helping students transition from HTML to HTML and CSS.

    Read more…

  • Formatting lists with 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: 1. Bullets 1.1 Standard The default bullet point, or list marker,…

    Read more…

  • CSS selectors — the basics

    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…

    Read more…

  • Columns in HTML using CSS

    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…

    Read more…

  • HTML “drop cap” using CSS

    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…

    Read more…

  • CSS’s clear attribute

    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…

    Read more…

  • Background images with CSS

    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…

    Read more…