stylesheet stylesheet, 2019-05-01

stylesheet stylesheet, 2019-05-01

Description of a CSS stylesheet with its comments marked up with HTML, and viewable in an HTML viewer.

Basic styles.

Adjustments for different shapes and sizes of views.

# a hybrid CSS+HTML document

A Cascading Stylesheet (CSS) document can have comments encapsulated between "/*" and "*/". The comments are explanations for the styles and their purpose, thereby discouraging either spontaneous or extraneous styles.

All CSS comments are ignored when the document is used as a stylesheet, therefore, the text within the comments can be anything. In this case, the CSS comments are marked up with HTML.

Technically, nothing is needed for an HTML document, not even a <body>. However, in order to reliably view a CSS document as HTML for conveniently perceiving the CSS comments, the document begins with:

<!DOCTYPE html><!--{}
/*-->

# why it works

the beginning

The very beginning of the CSS document begins with "<!DOCTYPE html>" as recommended by the HTML standards for HTML documents. An empty CSS declaration block "{ }" nullifies any preceding text for a CSS parser, however, that would be stray text when read as an HTML document. Therefore, it is hidden within an HTML comment "<!-- -->", along with the beginning of the first CSS comment "/*".

When the CSS document is read as CSS, the empty CSS declaration block "{ }" nullifies both the doctype and the beginning of an HTML comment.

<!DOCTYPE html><!--
{}

Next is the beginning of the first CSS comment, which is within the HTML comment so it doesn't matter to the HTML renderer.

/*-->

The ending of the HTML comment "-->" is within the CSS comment, therefore it doesn't matter to the CSS renderer.

the middle

The intended CSS rulesets and any other CSS comments are after the ending "*/" of this first CSS comment.

Always add CSS comments justifying the purpose of the styles, thereby avoiding spontaneous and extraneous styles. The text within the CSS comments can be marked up with HTML when helpful.

the end

A stylesheet likely ends with a CSS comment containing the last of the HTML for the document. That final comment does not need to be closed, t.i. no need for "*/", and that abides by the CSS standards:

User agents must close all open constructs (for example: blocks, parentheses, brackets, rules, strings, and comments) at the end of the style sheet.

Not closing the final CSS comment prevents any stray characters after the content when the CSS document is viewed as HTML with a "user agent", f.e. with a web browser.

appearance

In the HTML view of the document, the CSS rulesets will look like they are encapsulated by the inverse of a CSS comment, beginning with "*/" and ending with "/*". A little bit of judicious style can hide that text.

document names

Any document can have more than one name by means of hardlinks or symlinks. Therefore, it is possible for a single CSS/HTML document to have both extensions by having two names differing only by the extension.

qed

Ultimately, this means such a document is completely and perfectly fitting within both the CSS and HTML standards, and a single document can exist as both.

# referencing with <link>

The suffix of a stylesheet referenced from a <link> element does not matter when accessed as a file (t.i. with "file:///" rather than "http://") with an HTML viewer (f.e. a web browser). However, the MIME type of the document does matter when accessed from a webserver.

In other words, while the ".html" extension is perfectly fine for a stylesheet referenced in a <link> element when browsing HTML documents as files, the ".css" extension might be needed instead when accessing from a webserver.

Apache webserver

# Stylesheets are hybrid CSS+HTML.
# Instead of giving a stylesheet more than one name by hardlinking or symlinking, simply serve them as CSS when requested as CSS.
# When there's no "If" directive, use rewrite.
RewriteCond "%{HTTP_ACCEPT}" "text/css" [novary]
RewriteRule "" "-" [T=text/css]

# editing a hybrid CSS+HTML document

Simply edit such documents as if they were CSS documents, because they are, and mark up the CSS comments when helpful.

It is possible to switch syntax mode when editing, such as having different syntax coloring for CSS or for HTML. For example, with the emacs editor simply toggle between css-mode and html-mode (or mhtml-mode) by typing ESC x and then typing the name of the desired mode.

# markup for CSS rulesets

The following styles for CSS rulesets expect a <pre> (classed as css) for maintaining the spacing of the rulesets, and within it a <code> as the context for the CSS rulesets. A <b> is for the text within a CSS comment when it's inline with the CSS.

<pre class="css"><code>*/
.whatever-selector
/*<b>A comment for this ruleset.</b>*/
{whatever-property:whatever-value
;whichever-property:whichever-value}
/*</code></pre>

# colors

Background, text, and other colors defined together to ensure legibility.

*/
.code-sample
{border-color:#adf}

.css
{background-color:#000;color:#cba
;border-color:#000}

code
,kbd
,samp
,var
{background-color:#000;color:#cba}

.code-sample>code
{border-color:#000}

code>b
/*CSS comments within a pre.css.*/
{background-color:#520;color:#cba
;border-color:#520}

code>span
/*Regular text within a pre.code-sample.*/
{background-color:#520;color:#cba}
/*

# colors for printing

*/
@media print
{

*
{background-color:transparent!important;color:#000!important}

.code-sample
,code>b
{border-color:#000}

}
/*

# everything else

Styles for placement, borders, spacing, etc. But never colors.

Sample markup or code is in a <pre> classed as code-sample. Each line is marked as <code> and any regular text within it is marked as <span>.

CSS styles are in a <pre> classed as css. CSS comments within that are marked with <b>.

*/
pre
{font-family:Verdana,"PT Mono","Lucida Console","Courier",Monaco,monospace}

.code-sample
{padding:.05em 0 .25em .5em
;border-left-style:solid
;border-left-width:.2em
;margin:.5em 0 1em .7em}

body>.code-sample
{margin-right:1em;margin-left:1.7em}

.css
/*Hide anything displaced beyond its bounds with overflow.*/
{white-space:pre-wrap
;overflow:hidden
;padding:0 .5em
;border-style:solid none
;border-width:.5em 0
;margin:1em 0 0}

body>.css
{margin-right:1em;margin-left:1em}

code
,kbd
,samp
,var
{font-size:.8em
;line-height:1
;font-family:Verdana,"PT Mono","Lucida Console","Courier",Monaco,monospace
;padding:0 .1em
;outline-style:solid
;outline-width:.1em
;margin-right:.1em;margin-left:.1em
;white-space:pre}

code
{white-space:pre}

.code-sample>code
{display:inline-block
;font-size:.9em
;line-height:1.2
;white-space:normal
;padding:.2em .1em
;margin-top:.2em}

.css>code
/*Displace first line "*/" and last line "/*" beyond top and bottom with margins.
wordwrap is compatible with IE/Edge.  Standard is overflow-wrap.*/
{display:block
;font-size:.9em
;line-height:1.25
;white-space:inherit
;word-wrap:break-word
;overflow-wrap:break-word
;padding:0
;outline-style:none
;margin:-1.2em 0 -1.15em}

code>b
/*Include a bottom border as a background for the internal links (that use a dashed bottom border instead of an underline).*/
{font-size:1.1em
;font-family:"Times New Roman",Times,serif;font-weight:normal
;padding:0 .25em
;border-radius:.6em
;border-bottom-style:solid
;border-width:.15em}

code>span
/*Regular text within markup or code.*/
{padding:0 .1em}

code>var
{font-size:1em
;outline-style:none}
/*

# flexible page width

Coordinated with widths of website stylesheet.

First, modify the defaults for the most minimum width, essentially for a single column of text.

*/
@media screen and (min-width:0)
{

body>.code-sample
{margin-right:.5em;margin-left:1.2em}

body>.css
{margin-right:.5em;margin-left:.5em}

}
/*

Full width for text.

*/
@media screen and (min-width:43em)
{

body>.code-sample
{margin-right:1em;margin-left:1.7em}

body>.css
{margin-right:1em;margin-left:1em}

}
/*

# printing

*/
@media print
{

body>.css
{border-style:none none none solid
;border-width:0 0 0 .1em}

.css>code
{margin-top:-1.3em}

code>b
{border-style:solid
;border-width:.1em}

}
/*

More in:
HTML just happens
website stylesheet