::before and ::after Pseudo‑Elements in CSS
Using the :before and :after pseudo‑elements in CSS for styling and content insertion. Here, I cover syntax, practical examples, and best practices.
Articles
CSS, page 5 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.
::Before and ::after Pseudo‑Elements in CSS. 
Understanding the Critical Rendering Path. Understanding the Critical Rendering Path
Follow HTML, CSS, and JavaScript through the browser's critical rendering path, then find the resources delaying the first useful render.
The CSS overflow Property. The CSS
overflowPropertyUnderstand the CSS overflow property, including visible, hidden, scroll, auto, x, and y control, scrollbars, accessibility, and mobile‑browser quirks.
Understanding CSS Transitions. Understanding CSS Transitions
CSS transitions allow us to create smooth animations between states, enhancing user experience. Here, I discuss how to use transitions with practical examples.
BEM and Sass for Component CSS. BEM and Sass for Component CSS
Use BEM and Sass together for component CSS with clear naming, shallow nesting, modifiers, reusable mixins, and less fragile front‑end styling over time.
Mastering CSS for Freelance Web Development Projects. Mastering CSS for Freelance Web Development Projects
CSS is key to delivering responsive, accessible, and visually appealing freelance projects. Here, I explore essential techniques and practices to master CSS.
Organising Sass with Partials and Mixins. Organising Sass with Partials and Mixins
Organise Sass with partials and mixins so stylesheets stay readable, reusable, easier to change, and less likely to hide component‑level side effects.
What are CSS Preprocessors, and Why Should You Use Them? What are CSS Preprocessors, and Why Should You Use Them?
Learn how Sass, Less and Stylus extend CSS with variables, nesting, mixins and modular files, alongside their build‑step and learning‑curve trade‑offs.
Fundamentals of HTML: A Guide. Fundamentals of HTML: A Guide
HTML fundamentals explained through semantic structure, browser parsing, accessibility, and how markup choices affect modern front‑end work in practice.
CSS visibility: Hiding Elements Without Affecting Layout. CSS
visibility: Hiding Elements Without Affecting LayoutCSS
visibilityhides elements without altering layout. Here, I explain its use cases, differences from opacity, and how it maintains document flow.
Controlling Element Transparency with CSS opacity. Controlling Element Transparency with CSS
opacityCSS
opacitycontrols transparency, from fully opaque to invisible. Here, I explain how it works, its interaction with layout and practical examples.
Understanding CSS Positioning. Understanding CSS Positioning
A fairly entry‑level overview of the basics of CSS positioning. Learn how to use
static,relative,absolute, andfixedpositioning with examples.
!important in CSS. !importantin CSSUnderstand why !important in CSS creates cascade, specificity, consistency, and maintenance problems, plus when an override may still be defensible.
Setting CSS Blur Filter to Zero on a Retina Screen. Setting CSS Blur Filter to Zero on a Retina Screen
A bug in the WebKit engine that only affects website Retina screen devices means that setting a zero‑blur filter in CSS isn't as easy as it should be.
