Tommy Hodgins tomhodgins

CSS explained for programmers:

CSS is a stylesheet language, it's built around rules which contain 'declarations' of properties

selector {
  property: value;
}

	<xsl:stylesheet
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
	>

	<xsl:output
	method="xml"
	encoding="utf-8"
	indent="yes"

	<script type=module>
	import html from 'https://crocdn.com/_plugins/html.js'

	customElements.define(
	'scroll-container',
	class ScrollContainer extends HTMLElement {
	constructor() {
	super()

	this.updateOverflowAttribute = this.updateOverflowAttribute.bind(this)

	<!DOCTYPE webdev [
	<!ENTITY innovati "<person>innovati</person>">
	]>

	<?xml-stylesheet href="data:text/css,
	person::before,
	person::after {
	content: '💙';
	}
	" ?>

	<script type=module>
	import {Remarkable} from 'https://unpkg.com/[email protected]/dist/esm/index.js'

	customElements.define(
	'mark-down',
	class MarkDown extends HTMLElement {
	constructor() {
	super()
	this.innerHTML = new Remarkable().render(this.innerHTML)
	}

	<style>
	body {
	display: flex;
	}

	/* Hide all non-active tabs by default */
	main div:not(.active) {
	display: none;
	}
	</style>

	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DOM Processor examples</title>

	<script type=module>
	// The DOM Processor function
	function domProcessor(object = new DocumentFragment, transforms = {}) {
	if (object instanceof Element) {
	Object.keys(transforms)