Skip to main content

posts about css

    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    • An icon of angled brackets with a forward slash in the middle.
    Two columns, the left said light mode in black on a white background, the right says dark mode in white on a black background.

    Light and dark mode in just 14 lines of CSS

    11 May 2022 3 min read

    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    A screenshot of the same view as above, but with the CSS rule applied in the CSS dev tools. The iPhone preview window has been updated to show outlines around each HTML element on the page.

    Debug your CSS layouts with this one simple trick

    6 Feb 2022 2 min read

    • The accessibility icon featuring a person in the centre of a circle.
    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a laptop with angled brackets on the screen.
    A CSS example showing font-size 100% set on the HTML tag.

    How to make your font sizes accessible with CSS

    16 May 2021 3 min read

    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    A YouTube thumbnail, showing a screenshot of a live stream with me on the right, and the text WHAT IS BEM in a large font.

    What is BEM in CSS?

    10 May 2021 4 min read

    • The accessibility icon featuring a person in the centre of a circle.
    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    A screenshot of the Colour Contrast Checker Chrome extension showing a failing colour contrast check

    How to make your code blocks accessible on your website

    26 Feb 2021 5 min read