CSS Tutorials

  • By
    CSS prefers-reduced-motion Media Query

    When I started in the web development industry, media queries were limited -- screen and print were the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color...

  • By
    CSS Gradient Text

    Web developers know the fight we’ve all had to improve fonts on the web. Whether it be load time, odd strategies for using custom fonts (Cufon, anyone?), or just finding the right font itself, beautifying text on the web has never come easy.That got...

  • By
    CSS :focus-within

    Using :hover to display additional information or elements is a very useful technique but a big drawback to using the hover pseudo-class is that they are usually not accessibility-friendly. Not everyone uses a mouse and some users have visual impairments, so they rely on screen...

  • By
    CSS :placeholder-shown

    One of the first plugins that would hit a new framework in the early days of JavaScript frameworks was a placeholder plugin, which is why we were so excited when HTML5 brought us the placeholder attribute. Then CSS lovers like me were thrilled when the

  • By
    prefers-color-scheme: CSS Media Query

    One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result.

  • By
    How to Change the WordPress Admin Login Logo

    There are numerous content management systems that thrive these days but none are as prolific as WordPress. Every client wants the ability to change their website at a moment's notice and they want to do it themselves, and again, WordPress is the best fit for that.

  • By
    How to Add a User Stylesheet in Firefox

    While many like to complain about CSS these days, it's important to remember how amazing CSS is; the CSS language is:easy to learneasy to readeasy to writesimple to understandWeb developers and designers alike love that CSS allows us to take text/media and present it in...

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • By
    How to Get and Set CSS Variable Values with JavaScript

    CSS variables are a very welcome addition to the language, despite them being incredibly basic.  Sure we could use SASS or stylus but languages should never count on developers relying on frameworks and toolkits to accomplish what we know we need.  And just like every other...

  • By
    Responsive IFRAMEs

    Responsive web design revolutionized the web and spurred a movement away from native apps to web apps easily customizable for a mobile environment.  We use media queries and non-pixel-based dimensions to make responsive design easier; in fact, img { max-width: 100% } is one of my favorite...