Using Container Queries in CSS
Container queries are a powerful new feature in CSS that allow us to move away from view‑port based responsiveness to more explicit isolated areas of the page.
Articles
CSS, page 2 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.
Below you will find a subset of articles from my blog specifically about CSS. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are seventy‑seven collected together for you below.
Using Container Queries in CSS. 
Position: sticky in CSS. position: stickyin CSSAchieving sticky positioning on the web was once a weighty process using JavaScript to detect scroll positions and switch styles. Now, we have position: sticky!
Using the CSS :has Pseudo‑Class. Using the CSS
:hasPseudo‑ClassThe :has CSS selector allows you to select a parent element based on whether it has a certain child or children. It's powerful but it has some limitations.
Where to Find Jobs in Web Development. Where to Find Jobs in Web Development
Find web development jobs through job boards, aggregators, social networking, cold outreach, freelance routes, contract listings, and better search habits.
Positioning in CSS. Positioning in CSS
Understand CSS positioning with static, relative, absolute, fixed, and sticky values, including containing blocks, layout effects, and common front‑end bugs.
Margin Collapse in CSS. Margin Collapse in CSS
Understand CSS margin collapse, including vertical margins, parent‑child behaviour, margin transference, why it feels odd, and how to prevent it.
Use CSS to Change the Mouse Cursor. Use CSS to Change the Mouse Cursor
Change the mouse cursor with CSS using built‑in cursor values or custom assets, while keeping interaction cues useful and avoiding distracting effects.
Exploring CSS Viewport Units Beyond vw and vh. Exploring CSS Viewport Units Beyond
vwandvhExplore CSS viewport units beyond vw and vh, including vmin, vmax, vi, vb, svh, lvh, and dvh for mobile browser chrome, writing modes, and sizing bugs.
Understanding and Using Flexbox in CSS. Understanding and Using Flexbox in CSS
Flexbox in CSS allows for flexible, dynamic and responsive layouts. Learn how to use its properties to create efficient interfaces and avoid potential issues.
Specificity in CSS. Specificity in CSS
CSS specificity explains why some selectors win and others stubbornly do not. This guide breaks down the rules without making them feel mystical.
Flexbox vs. grid. Flexbox vs.
gridAt first glance, 'flexbox' and 'grid' in CSS appear to solve similar problems in different ways. They are both suited to very different layouts however.
The Quirks of z‑index. The Quirks of
z‑indexDebug z‑index quirks in CSS by understanding positioning, stacking contexts, opacity, transforms, huge values, and why layers still misbehave again.
How to Hire a Freelance Front‑End Developer. How to Hire a Freelance Front‑End Developer
Hire a freelance front‑end developer by clarifying scope, HTML, CSS, JavaScript, Git, testing, performance, debugging, frameworks, and collaboration needs.
Changing the Colour of Placeholder Text. Changing the Colour of Placeholder Text
Change placeholder text colour with CSS ::placeholder, including browser defaults, form styling, input states, and accessible use of placeholder copy.
What is Front‑End Development? What is Front‑End Development?
Front‑end web development explained through HTML, CSS, JavaScript, UI work, browser behaviour, back‑end integration, and what front‑end developers do.
Access CSS Variables from a Database via db-connect. Access CSS Variables from a Database via
db‑connectIn CSS, db‑connect is a misunderstood but immensely useful technique for connecting to databases directly from vanilla CSS in order to access stored properties.
Detecting and Dealing with Website Theft. Detecting and Dealing with Website Theft
Website theft is frustrating, but there are practical ways to spot it and respond. This guide covers copied text, copied code, and escalation options.
Rendering Contentful Rich Code Snippets in Gatsby. Rendering Contentful Rich Code Snippets in Gatsby
Contentful rich text and Gatsby work well together until code snippets enter the picture. This guide shows how to render inline and block code cleanly.
