Change the core preferences of an HTML/CSS explorer program.
Custom formatting, especially based primarily on a name, f.e. a class or a fabricated attribute.
The print medium
Yet another alternate view.
A Cascading Stylesheet (CSS) document has comments within /* and */ documenting the purpose and use of its rules, thereby discouraging spontaneous or extraneous rules.
A CSS interpreter ignores CSS comments, hence their text can be anything, even marked with HTML. HTML documents have no requirements, hence can be without even a <body> mark.
A single document can have many names, f.e. with hardlinks or symlinks. Therefore, a single document can have many extensions, f.e. several names differing only by their extensions.
Penultimately, a CSS+HTML document completely and perfectly abides with both the CSS and HTML standards. It is usable and nameable as both, hence can exist solely as both.
A well documented stylesheet inevitably links to itself for styling its own samples. This particular stylesheet is for the documentation of stylesheets, themselves inevitably self-referencing, too.
To clarify the terminology, a CSS rule is the CSS selector with its declaration block "{ }". A declaration block can have semicolon-delimited declarations. A declaration is a property and a value paired with a colon, f.e. "property:value".
Unrecognizable CSS selectors are allowed for the sake of "forward-compatible parsing". An empty CSS declaration block "{ }" nullifies a CSS selector without prejudice. Those aid in these adjustments for the beginning of a CSS+HTML document rendered as HTML.
Veil the start of a CSS comment "/*" with a nullified HTML comment.
<!--{ }
-->
The HTML standard declares a doctype is used only as a hack for HTML explorers that fail to abide by the HTML standard. Nullify the doctype by using either the DELETE button, or an empty declaration block.
<!DOCTYPE html>{ }
Combining both is readily summarized, too.
<!DOCTYPE html><!--
-->
Viewed as HTML, a set of CSS rules looks like it is encapsulated by the inverse of a CSS comment, */ then /*. A little bit of judicious styling can hide that text (Sets of CSS rules).
The CSS standard states anything left opened at the end will be closed by the HTML/CSS program (user agents).
User agents must close all open constructs (for example: blocks, parentheses, brackets, rules, strings, and comments) at the end of the style sheet.
So, a stylesheet ending with a CSS comment can leave off its ending */, avoiding it left astray when viewed as HTML. Same for HTML marks, hence no need for a final CSS comment for those.
<link>
Any filename is fine in a <link> when accessed as a file, t.i. with "file://".
However, some HTML explorers insist the MIME type of a document matters when accessed from a telecopier (a.k.a. a webserver), and the telecopier might insist on determining the MIME type by the suffix of the requested document.
In other words, with "http://" a ".css" suffix on the filename might be needed instead of ".html" in order to determine a plain text document is actually a plain text document instead of a plain text document.
Or keep whatever filename, and instead configure the telecopier to send a document as the CSS mime type when that document is expected to be received as the CSS mime type. Plain text is as plain text does.
RewriteCond"%{HTTP_ACCEPT}" "text/css"RewriteRule"" "-"[type=text/css]
Edit a CSS document as plain text, because it is. Essentially, mark up the CSS comments with HTML (which is also plain text) when helpful.
A text editor might force a document's appearance based on its filename's suffix, such as ".css" or ".html". It might be possible to change the appearance manually, f.e. in emacs type ESC x and either css-mode or html-mode, or create a new mode.
An HTML mark is the pair of angle brackets < and > with a codeword for the mark and an optional description. For example, <pre> is the mark for text preformatted with spaces and line breaks, and <pre class="css"> is the same but with the class attribute, too.
Marking text well with HTML means preventing misinterpretation of "<" and ">" as part of HTML marks by using the HTML entities < and >.
Use < (a.k.a. "less than") for "<" within the text, t.i. outside a pair of angle brackets.
Use > (a.k.a. "greater than") for ">" when part of the description of a mark, t.i. within a pair of angle brackets. (Probably will never happen, but can be done.)
Use & when an ampersand "&" is needed otherwise.
The HTML of well marked text is revealed in two steps. First, reveal all entities by replacing ampersands "&" with &. Second, reveal all marks by replacing "<" with <.
Afterwards, each revealed HTML entity begins with "&" and ends with ";", and each HTML mark begins with "<" and ends with ">". Thereby each is readily found and marked with <code>, and any resulting "</code><code>" can be removed for simplicity. In emacs:
Summary: Shapes emerge from the difference of color, with darkness unseen and light attracting attention. An excess of differences is an excess of distractions.
Difference of color asserts visual existence and legibility. Lack of light, darkness, correlates with lack of sight, visually unnoticeable, ignorable, and unimportant. Light is visually noticed, a focal point of importance, such as text, and everything in between either an ignorable darkness or a distraction of other light.
Highlighting a detail deflects from the topic. Emphasizing with distinctive shaping evokes a physical sense for visual contrast, f.e. spacing, symbols, punctuation, font variants. Delineate further with the emphasis color, when at all.
Group all the selectors for a specific property/value pair once, or a set of such pairs, for congruency. For example, one rule with all selectors for a specific background color.
Default background
*/
body
{background-color:#000}
/*
*/
html
{color:#cba}
/**/
code
,kbd
,var
{color:#d33}
/**/
a
{color:#0cf}
/*
Inherited color
*/
/*A sample provides
similar environment.*/
.sample
,.sample>dd
,/*Sets of CSS rules.*/
.css
,.css-list
,/*Optional CSS heading.*/
.css>b
,/*A set of CSS rules.
Obscure last line "/*".*/
.css::after
,/*The marked region of CSS.*/
.css>code
,.css-list>dd
,.css-list>*>pre
,.css-list>*>*>code
,/*A short CSS comment.
Obscure "/*" and "*/".*/
code>b
{background-color:inherit
;color:inherit}
/*
The region of CSS,
hide the first line "/*"
*/
.css>code::first-line
{color:transparent}
/*
Boundaries
*/
/*Hyperlinks and
interactions.*/
:focus
{outline-color:#0cf}
/*
Assume black ink on white materials. Depend on shapes rather than color.
*/
@media print
{
*
{background-color:
#fff!important
;color:
#000!important}
}
/*Summary: Minimize visual complexity by tracking all font variants, other than size or line height.
Though the main content of a stylesheet is obviously CSS which is supplemented by its documentation, the CSS is consistently compartmentalized from its documentation. That makes the documentation more receptive of the specified default font.
The very commonly available "Tahoma" and "Verdana" faces have a tilde "~" (used in CSS selectors) distinctive from the hyphen "-", with "Tahoma" more compact than "Verdana". The contextual references within the documention, such as the revealed HTML marks or entities, are congruently faced the same as the CSS.
The system font "system-ui" is preferred for documentation because it is probably well designed or comfortably familiar. It is thereby also preferred for the CSS comments (t.i. documentation) within a set of CSS rules.
The "system-ui" keyword provides a specific font family with specific weight, slant, or other pre-selected characteristics. Some HTML/CSS viewing programs fail to consistently modify or restore those characteristics.
For example, setting the font-weight to "normal" should restore the characteristic as provided by the "system-ui" keyword itself, but the program might provide its base font family with a "normal" weight instead. Consequently, the "system-ui" font family is non-restorable in a flawed program when changes to its characteristics are irreversible.
Contrarily, consider contrasting a serif font with a sans-serif.
Additional distinctive shapes:
<p> rather than p.
< rather than lt.
<var> mark is preferred in its traditional italic variant.
Documentation (default)
*/
html
,/*A short CSS comment
amongst the rules.*/
.css b
,.css-list b
{font-family:
system-ui
,-apple-system
,/*Mac OS X+*/
"Avenir Next"
,"Helvetica Neue"
,/*MS Windows+*/
"Segoe UI"
,SegoeUI
,"Lucida Sans"
,/*any OS*/
Arial
,sans-serif}
/*
A short CSS comment
amongst the rules
*/
/*Bold when w/o CSS.*/
.css b
,.css-list b
{font-weight:normal}
/*
Preformatted text
*/
pre
{font-family:
/*Unambiguous
characters.*/
"PT Mono"
,/*Everything else
is a compromise.*/
"Lucida Console"
,Monaco
,Courier
,monospace}
/*
Informational emphasis
and CSS
*/
code
,var
{font-family:
/*Tilde "~" distinct
from hyphen "-".*/
Tahoma
,Verdana
,/*Unambiguous
characters.*/
"PT Mono"
,/*Everything else
is a compromise.*/
"Lucida Console"
,Monaco
,Courier
,monospace}
var
{/*Traditional variant.*/
font-style:italic}
/*
Interactive emphasis
(buttonboard)
*/
kbd
{font-family:
/*Unambiguous
characters.*/
"PT Mono"
,/*Everything else
is a compromise.*/
"Lucida Console"
,Monaco
,Courier
,monospace}
/*
Summary: Default property values for font size, line height, spacing, borders, placement, and so on. Therefore neither classes nor IDs. No color nor font variants.
Distinctive shapes enable using only one highlight color, when at all. Therefore, emphasize with symbols and punctuation, or with the traditional spacing and font variants from marks.
Mark a revealed HTML mark with <code>, and include the "<" and ">" around the mark name. Mark a revealed HTML entity with <code>, and include "&" and ";" around the entity. Use <var> for attributes separated from their HTML mark. Consider including a sample with its markup.
Consider <kbd> when referencing buttons typed from a buttonboard.
Override the default characteristics of an individual mark by adjusting the properties of it. Select by only the name of the mark, t.i. without any CSS selector combinators, nor pseudo-classes, and so forth (Rules for a mark by context).
View
*/
html
{line-height:1.5}
/*
Sectioning
*/
hr
{clear:both
;padding:0
;border-style:solid
;border-width:
.125em 0 0
;margin:
.5em 0}
/*
Paragraphs
*/
p
{/*About book width,
or 2 article columns.*/
max-width:42em
;margin-bottom:0}
pre
{/*Legibly sized text.*/
font-size:1em}
/*
Informational emphasis
and CSS
*/
code
,var
{font-size:1em
;margin-left:.1em
;margin-right:.1em}
/*
Interactive emphasis
(buttonboard)
*/
/*Boxed and inline,
so need smaller text.*/
kbd
{font-size:.8em
;display:inline-block
;padding:
0 .2em .1em
;outline-style:solid
;outline-width:.0625em
;margin-left:.1em
;margin-right:.1em}
/*
Property values for marks based on their contextual relationships with one another within a document, such as with an asterisk * for a non-specific mark. Generally, rules with CSS selectors using combinators: space, >, +, ~, and so on. Also, a pseudo-class (f.e. :focus), or maybe a pseudo-region (f.e. ::before).
Sectioning
*/
*+h1
,*+h2
,*+h3
,*+h4
{margin-top:1.75em
;margin-bottom:.5em}
/*
Paragraphs
*/
/*Coordinate interstitial spacing
with document line height.*/
*+p
{margin-top:1.5em}
p+p
{margin-top:1em}
/*
Lists
*/
/*Coordinate interstitial spacing
with document line height.*/
*+dl
{margin-top:1.5em}
*+ul
,*+li
{margin-top:.5em}
/*
Hyperlinks and interactions
*/
/*Selection with TAB button.
(Because default is sometimes
indiscernible.)*/
:focus
{outline-offset:.0625rem
;outline-style:double
;outline-width:.1875rem}
/*
Summary: Reveal the HTML markup when illustrating the use of HTML or CSS.
Classes: sample, markup.
The core characteristic of a definition list <dl> region is pairing an introduction (<dt>) with an itemized list (each item as <dd>). For example, a word, its pronuciation, and variant spellings paired with a list of descriptions, or an image paired with its origin, description, and other bibliographical info.
Thereby, a definition list <dl> marks a region of one or more pairings of a terse description with its broader description. It introduces a sample of text marked with HTML, intended either for its alternate view or for revealing the HTML line by line (revealing markup within text).
A sample result of using an HTML <pre> mark. A second sentence on the same line.
The second line of text.
<pre>A sample result of using an HTML <code><pre></code> mark. A second sentence on the same line.
</pre>
<dl class="sample">
<dt><b>Sample:</b>
<dd style="width:10em;overflow:scroll">
<pre>A sample result of using an HTML <code><pre></code> mark. A second sentence on the same line.
</pre>
</dl>
<dl class="markup">
<dt><b>Markup:</b>
<dd><code><pre></code>A sample result of using an HTML <code><code>&lt;</code>pre><code></code></code> mark. A second sentence on the same line.
<dd>The second line of text.<code></pre></code>
</dl>
A <dl> classed as "sample" optionally starts with a <dt> with "Sample:". The following <dd> has well marked text (effectively) the same as would be in a document, thereby demonstrating the intended results.
Follow the demonstrated sample with a <dl> classed as "markup", optionally starting with a <dt> with "Markup:". Copy the well marked text from the sample into a <dd>, and then reveal the HTML. Afterwards, mark each line with <dd> whenever line breaks matter.
Description of markup that has no visible rendering.
<!---->{ }
Description of the next example.
<!--{ }
-->
<dl class="markup">
<dt><p>Description of markup that has no visible rendering.
<dd><code><!----></code>{ }
<dt><p>Description of the next example.
<dd><code><!--</code>{ }
<dd>/*
<dd><code>--></code>
</dl>
When a sample seems unneeded, a <dl> classed as "markup" describes the topic in a <dt> for the HTML revealed in its following <dd> marks, one per line whenever line breaks matter.
Sample result
for markup
*/
.sample>dt+dd
{margin-top:.5em}
.sample>dd
{padding:.5em
;outline-style:dashed
;outline-width:.125em
;margin-right:.125em}
/*Multiple samples.*/
.sample>dd+dt
{margin-top:1.5em}
/*
Listing or description
of revealed markup
*/
.markup>dd+dt
{margin-top:1.5em}
.markup>dt+dd
{margin-top:.5em}
.markup>dd
{/*wordwrap is from IE/Edge.
Standard became overflow-wrap.*/
word-wrap:break-word
;overflow-wrap:break-word
;padding-left:.3125em
;border-left-style:solid
;border-width:.125em}
.markup>dd+dd
{margin-top:.3125em}
/*Legibly sized text.*/
.markup>*>code
{font-size:1em}
/*
Summary: Markup and style a set of CSS rules in a stylesheet by using nearby CSS comments, while hiding the comment delimiters.
/*
and
*/
First and foremost is the content of a document, and secondary is its spacing and indentation. Thereby thoughts primarily flow as a stream, delineated by stepping stones for pausing and reflecting.
Markup indicates the type of spacing by which arbitrary recommended amounts are applied. CSS asserts specific amounts of spacing and supplemental lines, and ensures a significant difference in color so the lines for text and borders can visually exist.
A stylesheet is documented with its intent, samples of use, and explanation of techniques for posterity. Minimally, a set of CSS rules has a comment before it documenting its use.
CSS comments are marked with HTML when helpful. A mark that needs its ending can occur in a later CSS comment for its start in a prior CSS comment.
For example, before the CSS comment ending */ is the start of a mark for a set of rules. Another CSS comment follows that set of rules with the ending mark, and perhaps afterwards begins documenting the next set of rules.
One CSS property per line allows for narrow sets of CSS rules, wherewith a columnar layout emerges. Consider adopting a preferred order of properties, such as inside-out for a region, f.e. padding before border before margin.
Summary: Minimally markup a set of CSS rules, and optionally mark CSS comments.
Class: css.
A concise explanation for the use of the following sets of rules.
*/
.whatever-selector
{/*An unmarked comment.*/
whatever-property:
whatever-value}
.whatever-selector-2
{/*A marked comment.*/
whatever-property: whatever-value}
/*
A concise heading
for this set of rules
*/
.whatever-selector-3
{whatever-property: whatever-value}
/*A marked comment.*/
.whatever-selector-4
{whatever-property: whatever-value}
/*
Some other concise explanation for the use of the next set of rules.
<p>A concise explanation for the use of the following sets of rules.
<pre class="css"><code>*/
<b>A marked comment.</b>*/
</code></pre>
<pre class="css">
<b>A concise heading
</b>
<code>*/
<b>A marked comment.</b>*/
</code></pre>
<p>Some other concise explanation for the use of the next set of rules.
A <pre> classed as "css" maintains line spacing for the whole set of rules, and a <code> mark provides the overall context. This leaves the CSS completely intact and unblemished.
Optionally, include a heading marked as <b> before the <code> region.
Within the marked set, use a <b> within a CSS comment for all of its text, then the beginning and ending of that CSS comment will be mostly or completely obscured (depending of the font family available to the HTML program).
Summary: List and label sets of CSS rules, and optionally mark CSS comments.
Class: css-list.
A concise explanation for the use of the following sets of rules.
*/
.whatever-selector
{/*A comment.*/
whatever-property: whatever-value}
.whatever-selector-2
{/*A marked comment.*/
whatever-property: whatever-value}
/**/
.whichever-selector
{whichever-property: whichever-value}
/*<p>A concise explanation for the use of the following sets of rules.
<dl class="css-list">
<dt>Label for this set
<dd><pre><code>*/
<b>A marked comment.</b>*/
</code></pre>
<dt>Label for another set
<dd><pre><code>*/
</code></pre>
</dl>
A <dl> classed as "css-list" groups multiple sets of coinciding rules for clarity or columnar advantage. Label each set of rules with a <dt>, and mark each set of rules as <dd>.
A <pre> mark maintains line spacing for a set of rules, and a <code> mark provides the overall context. This leaves the CSS completely intact and unblemished.
Within a marked set, use a <b> within a CSS comment for all of its text, then the beginning and ending of that CSS comment will be mostly or completely obscured (depending of the font family available to the HTML program).
/*
and
*/
For the CSS comment delimiters surrounding a set of rules, the text of the first line */ can be selected with ::first-line and completely hidden by coloring its text same as the background.
The text of last line /* usually can be completely obscured with the ::after pseudo-region of the <pre> colored same as the background, and positioned to prioritize it over the last line of the <code> marked region. That can also be used in place of bottom padding for the <pre>.
For font families that extend the characters "/*" beyond the line-height, consider adding a blank line before that delimiter and increasing the negative margin to reduce the extra spacing. Or, consider a greater line-height for the region of CSS.
Positive margins shifts a region away from other regions. Negative margins shifts a region towards other regions, potentially merging. Negative margins for a subregion can shift it beyond the bounds of its outer region.
Consider negative margins for displacing the first */ and the last /* lines of the <code>, with the overflow property as hidden for the <pre>.
However, that is counteracted whenever using padding for top or bottom of the <pre>, or by beginning with an optional heading in the <pre>.
In the case of no heading in the <pre>, consider using the border instead of padding with border-color same as the background color, and then an outline offset inside as the border.
With a heading, simply position it and it will be prioritized over later text, with its background color obscuring the displaced first line of the CSS region.
Sometimes a difference in font families will reveal the bottom edge of the first line */ or the top edge of the last line /* even when it has been displaced by negative margins. A larger line-height might help when the extra spacing between lines is tolerable.
The first */ line can be most simply eliminated by setting the font size to zero for the ::first-line selector, and with no other property changes needed.
*/
.example
,.zero-1st-line
{display:inline-block
/*Padding to have something
between the borders
for when the width
completely collapses. */
;padding:
0 .5em
/*Solid border to reveal
the shape of the region.*/
;border-style:solid
;border-width:2px
/*Dotted outline to reveal
the shape of the content
including the border.*/
;outline-style:dotted
;outline-width:2px}
/**/
.zero-1st-line::first-line
{font-size:0}
/*<div class="example">
<br>line two
</div>
<div class="zero-1st-line">
<br>line two
</div>
Unfortunately, some HTML viewing programs seem confused by a zero font size for the first line when sizing an inline-block and collapses its width to zero, too.
Consider capitulating and setting a min-width to help counter the flaw of such HTML/CSS programs, thereby losing the dynamism of the inline-block. Or, simply never use those particular HTML/CSS programs for viewing documents marked as such.
Whenever specifying width, consider word-wrap (IE/Edge) and overflow-wrap (the later recommendation) for breaking text when width is too narrow, such as a value of break-word.
Presume CSS rules are intended as narrow columns. For example, one property per line, or the property name and value on separate lines. Obscure the beginning /* and ending */ of a CSS comment for the alternate HTML view of the stylesheet.
When positioning, later non-static positioned regions are prioritized over earlier non-static positioned regions, because the z-index defaults to be the same for everything, initially zero (0). "Later" and "earlier" mean as the marked regions were written in the document itself.
An earlier non-static region is prioritized over a later non-static region when the earlier region has a greater z-index value. As such, the z-index rarely need be more than one (1) whenever used.
Only overflow-y need be "hidden" for a region when the top and bottom overflow of a subregion has negative margins. The overflow-x can remain "visible" when left and right overflow is acceptable. For some HTML/CSS programs, overflow-x fails even though overflow-y succeeds.
Consider overflow when either is unavailable, the distinction might be of no matter.
*/
.css
{white-space:pre-wrap
;display:inline-block
;/*Hide anything
displaced vertically.*/
overflow-x:visible
;overflow-y:hidden
;padding-right:.5em
;border-right-style:solid
;border-width:.1em
;margin-left:.5em
;margin-top:1em
;margin-bottom:0
;vertical-align:top}
/**/
.css>b
{display:block
;padding-bottom:.25em
;border-bottom-style:solid
;border-width:.1em
;margin-bottom:-.6em
;/*Prioritize heading
over the CSS region.*/
position:relative}
/**/
.css::after
{content:""
;display:block
;height:.5em
;position:relative}
/**/
.css-list
{display:inline-block
;padding-right:.5em
;padding-bottom:.5em
;border-right-style:solid
;border-width:.1em
;margin-left:.5em
;margin-top:1em
;margin-bottom:0
;vertical-align:top}
/**/
.css-list>dt
{padding-bottom:.25em
;border-bottom-style:solid
;border-width:.1em}
.css-list>dd+dt
{margin-top:2em}
/**/
.css-list>dd
{margin-left:0
;margin-top:1em}
.css-list>dt+dd
{margin-top:.6em}
.css-list pre
{white-space:pre-wrap
;/*Hide anything
displaced vertically.*/
overflow:hidden
;margin:0}
/*
A region of CSS itself
*/
.css>code
,.css-list pre>code
{line-height:1.35
;/*Legibly sized text.*/
font-size:1em
;display:block
;padding-left:.1em
;padding-right:.1em
;margin-left:0
;margin-right:0
;/*Displace first line "*/"
with negative margin
same as line-height.*/
margin-top:-1.35em
;/*Displace last line "/*"
with negative margin
same as line-height.*/
margin-bottom:-1.35em}
/*
Obscure the delimiters /* and */ for a CSS comment within a set of rules when the comment text is marked with a <b>. Apply negative left and right margins, and apply a non-static position to prioritize it over the later text.
Provide substitute delimiters by declaring content for its ::before and ::after selectors.
A short CSS comment
amongst the rules
*/
.css>code>b
,.css-list code>b
{outline-style:solid
;outline-width:1px
;/*Merge with "/*" on left
of the marked text.*/
margin-left:-1em
;/*Merge with "*/" on right
of the marked text.*/
margin-right:-1em
;/*Non-static position
is higher priority
than the surrounging
static text "/*" and "*/".*/
position:relative}
/*
Add a vertical ellipsis
(Unicode 22ee)
on either side
*/
.css>code>b::before
,.css-list code>b::before
{content:"⋮"
;padding-left:.1em
;padding-right:.5em}
.css>code>b::after
,.css-list code>b::after
{content:"⋮"
;padding-left:.5em
;padding-right:.1em}
/*
*/
@media print
{
/*
Samples of HTML markup
*/
.sample
,.markup
{page-break-inside:
avoid}
/*
A short CSS comment
amongst the rules
*/
.css>code>b
,.css-list code>b
{outline-style:none}
/*
*/
}
/*