CSS

CSS (Cascading Style Sheets) is a web language used to style web pages. It is added to a web page by linking a CSS file using the link element. Every web page on this site contains the following element: <link rel="stylesheet" href="style.css">. It tells the browser to load the style.css file and apply it to this web page.

A CSS Rule is CSS code that alters the presentation of HTML elements.
A CSS Selector is the part of a CSS rule that determines which elements are targeted.

If an element is targeted by several rules, the rules will be merged. If the rules conflict, more specific rules will override less specific rules. A rule that makes all text blue will be overridden by a rule that makes a specific paragraph black. A rule that makes text bold will merge with a rule that makes a specific paragraph red.

THIS ELEMENT IS HIDDEN WHEN CSS IS ENABLED

Examples of CSS in style.css:
Target	Description
body, html	Sets the font to Arial with Serif as a fallback font. Removes default margins. Sets min heights such that the page is always filled. Scrollbar is always shown to keep the home page aligned with the longer pages
Tables with IDs #css-table and #html-table	Adds borders. On mobile, some are grey to highlight which rows are from the same column. On mobile, rows become lists and page breaks commas. On desktop, the first cell has centered text. Adds padding. Sets width to 100%. Aligns the table caption to the left and adds vertical margins. The font of the elements in #html-table is set to Consolas. Replaces the padding of lists with smaller margins on list items.
.page	Sets the background color (depending on the theme setting) Adds a shadow On desktop, sets max width to 60% Adds an one pixel black border. This prevents margins from breaking out and making body bigger than html, since without a border the browser might merge margins into outer elements.
.text-center	Centers text within a block element.
.emphasis	Makes text italic and blue (light cyan on dark theme for contrast).
.code	Radial gradient background, green text Rounded corners Padding Set display to inline-block Shrinks text to 95% Sets font to Consolas (with other monospace fonts as fallback) Sets white-space property to preformatted, preventing whitespace and line breaks from being replaced with one space.
.NA-box	Bolds and centers text.
#css-test	Hides the element for testing the CSS toggle script.
.links	Horizontally aligns elements inside using flexbox, with equal margins around. Link with #current Color is reset to default. Clicking is disabled. Cursor is set to default instead of pointer. Underline is removed. Adds a bottom border and padding.
Table cells with class .code-cell	Similar to .code. No wrapping, shrinks text more, no inline-block.
.highlighted	Highlights element and adds a border with a transition. Overrides all other rules.
.hide	Hides element. Overrides all other rules.
#reset-button	Rounded corners. Black background and white text. Fixed position. Opacity transition. .hide-reset-button: Sets opacity to 0. The display property is not a continuum from 0% to 100%, unlike opacity, so it cannot be used with transitions. Disables click events Disables tabbing to the element. Sets cursor to default. With .hide: keeps display set to inline-block. Both rules have the !important property, but this one has priority because it is more specific. Changes color on hover or focus.
#theme-button	Fixed position. Cannot be highlighted with double-click like text. When the checkbox inside is focused by keyboard (detected by JavaScript), a border is applied, white on dark theme. The actual checkbox is hidden and has click events disabled. Since labels cannot accept focus, the checkbox is still used for keyboard users. Padding is added when border is not active to keep position constant. The "Dark Theme" text is hidden (disable CSS to see it) with font-size 0 and transparency (in case of browsers that have minimum text sizes). Shows #inverted-moon-label if dark theme is on, or else #moon-label. Sets the image width and height to 100% of the label container. The images also have width and height attributes set in HTML, which keeps them from filling the page if CSS is disabled or fails to load.
#show-original	On mobile, has fixed position. #show-original-minimize: (the minimize button) Removes standard button styles. Sets a simple black border. Sets negative margin to ignore .page padding. Centers the minus. Sets background color to blue, with a hover and focus style of deepskyblue (0.25s transition). #show-original-minus: Width and height are set to 8px and 2px. Sets background color to white. .minimized: Removes border and padding. Sets left margin to 97% - 20px. Hides all elements except #show-original-minimize. Removes negative margin on #show-original-minimize.
#show-original-wrapper	Displays above all other elements. Is hidden when the iframe is not active via the .display-none class. #show-original-modal: Width and height are set to 100% Color is set to transparent black. Position is fixed. Cursor is set to arrow on hover. #show-original-iframe: Background color is set to white. Position is fixed. Displays above #show-original-modal. Width and height are set to 90%. Top and left distance is 5% (centered).

~~Note: All toggleable properties are also set to only do anything if the page root does NOT have a specific "disabler class". These classes are added and removed using JavaScript.~~ The original website had a script to toggle CSS rules. This was making it impossible to modify or move around CSS without immediately breaking this page.