Replace Inline Styles in Gatsby with an External CSS File
Replace Gatsby's inlined production CSS with an external stylesheet by rewriting headComponents, with performance trade‑offs and historical context.
Articles
CSS, page 3 of 5
Almost as old as front‑end development itself, CSS is a stylesheet language that describes the presentation of an HTML or XML document. We write CSS to describe how elements should be rendered and animated on‑screen, when printed, in speech, or in other media. In web development, writing CSS is an underappreciated skill that not many fully master.
Replace Inline Styles in Gatsby with an External CSS File. 
Optimising gatsby‑image Even Further. Optimising
gatsby‑imageEven FurtherOptimise gatsby‑image with sensible maxWidth and quality settings, GraphQL image data, and selective use of the native loading attribute in Gatsby.
CSS Focus Styles for Keyboard Users Only. CSS Focus Styles for Keyboard Users Only
Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.
Parent Selectors in CSS and Sass. Parent Selectors in CSS and Sass
Understand parent selectors in CSS and Sass, including how ampersand nesting works, :has() context, BEM trade‑offs, specificity, and readability.
Using CSS to Deal with Widows. Using CSS to Deal with Widows
In typography, a 'widow' is the last line of a paragraph, which falls alone on the following page or column. On the web, this can be easily tackled with CSS.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
Interpolation: Sass Variables Inside calc(). Interpolation: Sass Variables Inside
calc()One of the most common pitfalls for developers new to Sass is string interpolation: why a Sass variable may not behave as expected inside calc().
Break Out of CSS Nesting with Sass. Break Out of CSS Nesting with Sass
On the occasion that you need to break a single (or several) CSS rules out of the nested structure of your CSS, the Sass @at‑root rule is exactly what you need.
Advanced Sass: Loops. Advanced Sass: Loops
Use Sass loops more deliberately, including while, for, and each patterns, generated selectors, readable output, and where loops beat repetition.
Hiding Empty Elements with CSS. Hiding Empty Elements with CSS
Hide empty elements with the CSS :empty pseudo‑class, including strict matching rules, whitespace caveats, supported selectors, and practical UI uses.
Disabling Text Selection Highlighting with CSS. Disabling Text Selection Highlighting with CSS
Disable text selection with CSS user‑select, including browser prefixes, input caveats and a visual ::selection fallback for older browsers.
Alternative Text in the CSS content Property. Alternative Text in the CSS
contentPropertyThe 'content' property in CSS is often used to insert graphical elements which ‑ on their own ‑ do not have an accessible alternative text available.
Managing Design Values in Front‑End Code. Managing Design Values in Front‑End Code
Manage colours, spacing, typography, breakpoints, and component values in front‑end code without scattering design decisions or weakening consistency.
How to Use and Clear the CSS float Property. How to Use and Clear the CSS
floatPropertyUse and clear the CSS float property in legacy layouts, including text wrapping, clearing behaviour, layout examples, and when modern tools are better.
Using display in CSS. Using
displayin CSSUnderstand the CSS display property, including block, inline, inline‑block, none, flex, and grid, plus how defaults affect front‑end layout decisions.
How to Use grid in CSS. How to Use
gridin CSSStart using CSS Grid with containers, columns, rows, item placement, gaps, track sizing, flexible layouts, and practical two‑dimensional examples.
Advanced Techniques for Responsive Web Design. Advanced Techniques for Responsive Web Design
Discover advanced responsive web design techniques with CSS Grid, `clamp()`, container queries, and JS enhancements for performance‑optimised, adaptive sites.
Creating Interactive User Interfaces with HTML, CSS, and JavaScript. Creating Interactive User Interfaces with HTML, CSS, and JavaScript
Create interactive interfaces with HTML, CSS and JavaScript, using semantic controls, accessible state, event handling, and progressive enhancement.
