Skip to main content
whitep4nth3r logo whitep4nth3r

Topic: 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.
    Front and back sleeve covers of the Sony T-120 Dynamicron VHS tape.

    A responsive striped CSS gradient inspired by 80s VHS tapes

    22 Nov 2022 3 min read

    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    Screenshot of dark mode google search results showing the link to the top site I have visited is purple, and the second site in the list which I have not visited, which is blue. Dev tools is open and shows the anchor visited styles coming from the stylesheet.

    What's the difference between : and :: in CSS?

    31 Aug 2022 3 min read

    • 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

    • An icon of a blank piece of paper with the bottom right corner turned up.
    • 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 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

    • An icon of a blank piece of paper with the bottom right corner turned up.
    • 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