Semantic markup

What I mean is, that I do not want to type `cd /tmp` but [.userinput]#cd /tmp#

Or, for new or important text, I want to be able to type [.important]#important remark#.

So I can modify display later in CSS without touching the text document itself, and it is easier to remember style tags or to search for them.

I had used that much in my LaTeX documents and discovered recently that it is supported in AsciiDoctor too. I learned that from https://github.com/asciidoctor/asciidoctor.org/issues/422

So I can have style.css

```
@import "/home/stefan/asciidoctor-stylesheet-factory/stylesheets/riak.css";

/* https://github.com/asciidoctor/asciidoctor.org/issues/422 */

:root{
--maincolor:#00FFFF;
--primarycolor:#000000;
--secondarycolor:#AAAA00;
--tertiarycolor:#CCCCCC;
--sidebarbackground:#CACACA;
--linkcolor:#0D47A1;
--linkcoloralternate:#B71C1C;
--white:#FFFFFF;
--black:#000000;
}


.userinput{font-family: monospace, monospace;color:#000; font-size:80%;}

.monospace{font-family: monospace, monospace;color:#000; background-color: #EEE; font-size:70%;}

.important{color: #000; background-color:#FF0}

.new{color: #000; background-color:#FF0}

.dim{font-style: italic}

.quote{}
```

and

```
:stylesheet: style.css


== Test

Some `monospaced` text.

Some [red]#red# text.

== Semantic markup

He said: [.quote]#Hello#

Our unit of length is 1 [.dim]#mm#

This is a very [.important]#important remark# -- maybe displayed large or with red color.

Type [.userinput]#cd /tmp# followed by [.userinput]#compile test.c#
```

which gives

http://ssalewski.de/tmp/semanticmarkup.html

Not bad. But some questions remain:

Is there a way to map for example .userinput exactly to the default style resulting from ``? Or have I always to define it completely new? And can I define a quote style that puts quotation marks or similar characters around a text, so that He said: [.quote]#Hello# results in He said: "Hello". And finally a simple basic question, why do I have in the CSS file "font-family: monospace, monospace;" this is monospace twice. I guess I copied that from somewhere, and it seems to make a difference.

Oh, I just noticed that my local html file is displayed as desired like

http://ssalewski.de/tmp/semanticmarkup.png

but the one I uploaded not. I guess the issue is that I have not included the CSS properly into the html. It should look like above png, sorry.

[EDIT]

Indeed I have not managed yet to create a html file where the CSS is fully included this way. I tried various command line parameters. So it seems that the only solution is to add my own CSS edits to the original CSS directly?

From the issue linked above we have an other option: "use docinfo to add additional styles". I tried that too some months ago, without success and gave up. Is there a location where I can find a working example for that "docinfo" method?