Xah Web Dev Blog

preliminary version

• CSS: what is Wide Color Gamut, Display P3, sRGB.

• CSS: color() function
• CSS: color-mix() function

• CSS: HWB color (hue whiteness blackness)
• CSS: OKLCH color

• added a oklch example
• CSS: Linear Gradient

• popular css website CSS Tricks got a CSS problem (2026)

recent Xah Talk Show on css.

• Xah Talk Show 2026-05-23 Ep785. you need a phd for CSS selectors
• Xah Talk Show 2026-06-03 Ep789. CSS cascade, specificity
• Xah Talk Show 2026-06-08 Ep790. CSS pie chart, attr function
• Xah Talk Show 2026-06-09 Ep791. CSS, make parallel lines, diamond grid, polar grid

• 🆕 CSS: draw a polar grid

• 🆕 CSS: Gradient. Index
• 🆕 CSS: Repeating Radial Gradient
• 🆕 CSS: draw parallel lines, grid, diamond grid

• now random on load
• CSS: Radial Gradient

updates.

• CSS: insert content ::before ::after element
• CSS: letter spacing
• CSS: word spacing

• 🆕 CSS: pie chart

updates

• 🆕 CSS: RGB color function
• CSS: HSL Color
• CSS: Opacity (Transparency)

• added multiple gradients effect
• CSS: Repeating Linear Gradient

• CSS: Border

• CSS: Add Icon to Links

• CSS: Centering
• CSS: Shrink Wrap

• CSS: Round Corners

• CSS: Transform
• CSS: Transition
• CSS: Image Rollover

• 🆕 CSS: insert HTML attribute text. attr()

• 🆕 CSS: color wheel spinner animation
• 🆕 CSS: Angle Units (deg rad grad turn)
• 🆕 CSS: Repeating Linear Gradient
• 🆕 CSS: Conic Gradient
• 🆕 CSS: Repeating Conic Gradient

• added pi and other math constants
• CSS: calc

• added name transparent
• CSS: Color Names

• explained about flex, anonymous item
• CSS: Centering

• CSS: readable text shadow for changing background color

• 🆕 CSS: Outline Text
• CSS: Text Shadow

updated

• CSS: Box Sizing

• CSS: inline-block not aligned at top

• sRGB, Wide Gamut Colors, Display P3

• JS coding style example. codepoint to utf16 encoding (2026)

• call it JS, or js lang. not JavaScript.
• the name JavaScript has lots problems.
• Confusion with java, and confusion with ECMAScript.
• basically abandon the JavaScript name.
• tell others.

• 🆕 Serif vs Sans Serif Font (2026)

• 🆕 CSS: Core Web Fonts
• CSS: common web fonts

• WHATWG vs W3C Split. 2012

old article. interesting, found an article i wrote about this issue, back in 2011.

• HTML code tag inside pre (2011)

• CSS: cascade @layer

updates

• CSS: adjacent sibling selector (+)
• CSS: subsequent sibling selector (~)
• CSS: first child, sibling rank selector
• CSS: child selector (>)

Major discovery. HTML tag and attribute names are not case sensitive, but only for English letters.

• HTML: Case Sensitivity

major updates and new pages

• 🆕 CSS: cascade (rule priority, !important)
• 🆕 CSS: specificity (selector priority)

• CSS: types of selectors
• 🆕 CSS: complex selector (combinator)
• CSS: negation selector (:not)
• CSS: “is any of” selector (:is, :where)
• CSS: selector list (,)

updated.

• CSS: Responsive Table
• CSS: font-weight, bold

• 🆕 CSS: font (shorthand)
• 🆕 JS DOM: Add style to HTML page

minor updates

• JS DOM: Node, Node Type, Element
• JS DOM: Change CSS
• JS DOM: Input Text Field

• JS DOM: setTimeout, setInterval

minor update

• JS DOM: Browser Window Object

major updates.

• CSS: nth-child selector
• CSS: first child, sibling rank selector
• CSS: Styling HTML Table

• iPhone-style Chat Bubbles (ai answer. 2026-05-16)

lots updates

• CSS: descendant selector (space)
• CSS: adjacent sibling selector (+)
• CSS: child selector (>)
• CSS: subsequent sibling selector (~)

• Why is CSS selector syntax cannot use parenthesis for operator precedence (2026)

• CSS Complexity PhD. (2026)

• CSS: ::marker (for list item)

• CSS: color scheme

• CSS: touch-action (phone screen)

minor updates.

• CSS: no child selector

• CSS: :has descendant selector

• JS: String.prototype.codePointAt (Char → ID)

added ::marker

• CSS: pseudo-element selector (::)

• CSS: Linear Gradient
• CSS: Radial Gradient

massive updates.

• CSS: Colors. Index
• CSS: Color Names
• CSS: RGB Color
• CSS: HSL Color
• CSS: Opacity (Transparency)

• CSS: Layout. Index

• CSS: attribute selector ([x])

• CSS: Syntax

• CSS: Text Shadow

• CSS: Box Sizing
• CSS: Margin vs Padding

• CSS: pseudo-class selector (:)

• CSS rebecca purple, new color name 2025

• 🆕 CSS: Misc. Index

• 🆕 CSS: global keywords (property values)

• 🆕 CSS: nesting selector (ampersand &)

• CSS: Selector. Index
• 🆕 CSS: simple selectors
• 🆕 CSS: compound selectors

• CSS: types of selectors

advanced CSS and syntax issue in computer languages.

the relation of CSS Selector List, and the so-called pseudo selectors :is(), is a syntactic one, and critical one.

because :is() is a single syntactic unit, thus allows it to be grouped as part of other expression. but the selector list (of the comma operator), cannot.

• CSS: selector list (,)

splitted out as new page.

• 🆕 CSS: subsequent sibling selector (~)
• 🆕 CSS: adjacent sibling selector (+)

updated.

• CSS: insert content ::before ::after element
• CSS: Margin vs Padding
• CSS: List Bullet Style

new pages

• 🆕 CSS: :has descendant selector
• 🆕 CSS: “is any of” selector (:is, :where)
• 🆕 CSS: types of selectors
• 🆕 CSS: pseudo-class function selector

updates:

• CSS: selector tutorial

• CSS: type selector (tag name)
• 🆕 CSS: class selector (.x)
• 🆕 CSS: ID selector (#)
• CSS: attribute selector ([x])
• 🆕 CSS: selector list (,)
• 🆕 CSS: universal selector (* any tag)

• CSS: align-items (flex cross axis)
• CSS: align-self (for flex items)
• CSS: order (for flex items)

• CSS: flex (flex-grow, flex-shrink, flex-basis)

• JavaScript wart: thisBinding in setTimeout and setInterval

I watched the birth of CSS, becoming accepted around 2001. Now, after flexbox was added some 5 or 10 years ago, finally i wrote a tutorial on it.

• 🆕 CSS: Flexbox Layout

updates

• CSS: Font. Index

• CSS: Reset, Default Values

• Font Size Survey 2023

• CSS: OverFlow, Scrollbar

• JS: ECMAScript 2015
• JS: Difference of Object vs Map
• JS: Enumerable Property

• CSS: Text Decoration, Underline, Overline, Line Through, Wavy

• CSS: Box Sizing

• CSS: Length Units
• HTML: the Root Element
• CSS: :root selector
• CSS: Variable (Custom Property)

• CSS: Selector. Index

• JS DOM: decodeURI

• JavaScript in Depth. by James M Snell (2026)

• JS DOM: Insert, Remove, Replace Element

• History of Angular.js (2018)

• CSS: Pseudo Element
• CSS: pseudo-element selector (::)
• CSS: Pseudo Class
• CSS: pseudo-class selector (:)
• CSS: selector tutorial

• CSS: insert content ::before ::after element

• JS: Value Types
• JS: Primitive Value

• JS DOM: Class Attribute (get add remove toggle)

• HTML: Audio Tag