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" tag. Every web page on this site contains the following tag: <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 some CSS code that is only applied to certain HTML tags.
A CSS Selector determines which tags a rule is applied to.
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 overriden 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.
style.css contains the following CSS rules:
| Target | Description | Toggle |
|---|---|---|
| Root elements | Some browsers add a tiny gap at the start of the page. This rule removes it. | Toggle Rule |
| All text | Sets the font to Arial. | Toggle Rule |
| Root elements | Sets the page's blue background. | Toggle Rule |
| Tables and all components of tables | Adds a border to this table. Touching borders are set to merge. | Toggle Rule |
| First cell of each row of all tables | Centers text. | Toggle Rule |
| Elements with "page" class | Defines a "page" class. This class makes the white background this text is on expand vertically to fill the page, adds a shadow, centers it, sets a maximum width and adds padding. | Toggle Rule |
| Elements with "title" class | Defines a "title" class. This class centers the page title and sets margin (empty space around the element) to 0. | Toggle Rule |
| Elements with "emphasis" class | Defines an "emphasis" class. This class makes all text with the class italic, blue, bigger and changes it's font. | Toggle Rule |
| Elements with "code" class | Adds a radial gradient background, rounded corners, horizontal padding, makes text green, makes the element always display as a rectangle and slightly shrinks the text so gradients in adjactent lines can't touch. | Toggle Rule |
| Elements with "notoggle" class. | This class sets a gray background and centers text. | Toggle Rule |
| Elements with "toggle" class | This class sets a background, centers text, makes it blue and sets the cursor when hovering over the element to pointer. | Toggle Rule |
| Elements with "toggle" class that are being clicked. | Changes background to red. | Toggle Rule |
| The element with ID "csstest" | Hides the element. The only purpose of the element is testing the CSS toggle scripts. | Toggle Rule |
| Element with class of "links" | This class, in conjunction with the following rule, horizontally aligns the elements inside the container element. Also adds a bottom border. | Toggle Rule |
| Elements inside element with class of "links" | Horizontally aligns the elements in conjunction with the previous rule. | Toggle Rule |
| The link element with ID of "current" | Disables the link and makes it bold. | Toggle Rule |
| Page root | Makes the vertical scrollbar always show even if not needed so there is no alignment change between short pages and long pages. | Toggle Rule |
| Table cells with class "codecell" | Makes text green, adds gradient similar to code class and shrinks text. | Not used on this page |
| First cell of each row of tables with class "compressfirst" | Makes the cell's width as small as possible without breaking up words. | Not used on this page |
| Elements with "highlighted" class | Highlights element and adds a border. Overrides all other rules. | Not used on this page |
| Elements with "hide" class | Hides element. Overrides all other rules. | Not used on this page |
| Element with "resetter" id | Adds rounded corners, black background, white text, sets cursor to pointer and adds margin and padding. Element will display relative to browser window, unaffected by scrolling. | Not used on this page |
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.