sample.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="./xml.css"?>

<!-- 
  Sample XML File (light version)

  @version   0.1.0-exp
  @date      2019-07-14
  @author    Andreas Mixich
  @license   CC0 or, where local legislature does not respect PublicDomain, ISC.
  @note      In order to use 'xml.css' in this Gist along with this file, you may need to modify a little. I may update this later.
-->

<prefix:document xmlns:prefix="http://example.com/ns/prefix"
          xmlns:html="http://www.w3.org/1999/xhtml"
          xmlns:xi="http://www.w3.org/2001/XInclude"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns:dc="http://purl.org/dc/elements/1.1/"
          xmlns:opf="http://www.idpf.org/2007/opf"
          version="1.0"
          xml:base=".">

  <prefix:meta>
  <dc:title xml:lang="en">Sample <html:em>XML</html:em> Document</dc:title>
  	<dc:creator opf:role="aut" opf:file-as="Mixich, Andreas">Andreas Mixich</dc:creator>
  	<dc:language>en</dc:language>
    <dc:date opf:role="publication">2020</dc:date>
  </prefix:meta>
  <html:script src="../assets/docready.js" language="javascript"></html:script>
  <html:script language="javascript">//<![CDATA[
      docReady(function(){
        console.log("sample.xml: ready");
        console.log("sample.xml: " + XLink.NAMESPACE);
        XLink.xlinks;
      });
    //]]>
  </html:script>
  <prefix:body>
    <prefix:para>lorem ipsum</prefix:para>
  </prefix:body>
</prefix:document>

xml-xhtml-mix.xml

<their:document 
    xmlns:their="http://their.com/ns"
    xmlns:your="http://your.com/ns"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <xhtml:style>
    @namespace your url("http://your.com/ns");
    @namespace xhtml url("http://www.w3.org/1999/xhtml");
    xhtml|style { display: none; }
    your|hidden { display: none; }
    your|annotation { display: inline; }
  </xhtml:style>
  <their:element>
    <your:hidden>Customer is not interested in this data.</your:hidden>
    <your:annotation>lorem ipsum</your:annotation>
  </their:element>
</their:document>

xml.css

/* xml.css 0.1.0-exp (2020-Feb-09)
 * 
 * Empty CSS template for the styling of XML documents.
 * 
 * @name     XML.css
 * @parent   name of the document we use this style-sheet for
 * @version  0.1.0-exp
 * @date     2020-02-09
 * @author   Andreas Mixich
 * @license  ISC
 * @see      https://css-tricks.com/almanac/selectors/b/blank/
 * @see      https://css-tricks.com/almanac/selectors/e/empty/
 * @see      https://www.w3.org/Style/styling-XML.en.html
 * @see      https://www.htmlgoodies.com/beyond/css/displaying-xml-files-using-css.html
 * @see      http://www.brenkoweb.com/tutorials/xml/xml-styling-with-css/css-with-xslt
 * @see      https://stackoverflow.com/questions/16554819/css-show-element-attribute-value-not-element-content
 */

/* How to style XML

	XML documents reference their stylesheets via a procssing instruction, right
	after the XML prolog, within the XML file. For the stylesheet presented here,
  it would look like:

	<?xml-stylesheet href="XML.css"?>

	Web browsers have a built-in stylesheet, which they use to style vocabulary
	known to them. They belong to the HTML namespace and are implied. Since the
	browser does not know any of the XML elements from our vocabularies, it also
	does not have any presets, as how to style them, except, maybe, margins and
	paddings. This is why we must become explicit for any element we introduce.
  Of special note is the 'display' rule which we must configure for all our 
  elements, that we do *not* want to be displayed. All other elements will be
  displayed as 'inline' by default, so we also must take care for that.
 
	All in all, interesting, rules could be:
	 
	display
	margin
	padding
	font-family
	font-size
	font-weight
	font-style

	Use 'display: none' for contents, that shall not face the user.

	Use the ':empty' pseudo selector to select elements that contain either
	nothing or only an HTML comment.
	
	(note that in "Selectors Level 4" spec ':empty' has been updated to include
	all-whitespace element.)
	
	A more powerful variant of the ':blank' pseudo selector is the ':empty' pseudo
	selector. Like ':empty', ':blank' will select elements that are empty, or
	contain only an HTML comment. But, ':blank' will also select elements that
	include whitespace, which ':empty' will not.
	These are useful for hiding empty elements that might cause weird spacing 
	(e.g. they have padding). Or something like removing the border from the 
	top-left table cell element in a cross-referencing table.

	In order to display the contents of the attributes (vs. contents of elements)
	you can use the 'attr()' function. However, this will display also the text()
	node of any non-empty element. If you want to _only_ display attributes, use
	a hack like this:

	element {
		color: transparent;
		position: relative;
		display: inline-block;
		width: 18px;
		padding: 5px;
	}
	
	element:after {
		content: attr(abbr);
		color: red;
		position: absolute;
		left:5px;
		top: 5px;
	}
	

@namespace prefix url("http://codeblocker.org/ns");

prefix|element {}
 
 or
 
prefix\:element {}

The latter one does not really include a namespace, instead it juse creates a
non-prefixed name, that syntactically looks like a prefixed one and thus gets
interpreted by older browsers.

*/


@namespace url("http://example.com/ns/default");           /* The default namespace has no prefix */
@namespace prefix url("http://example.com/ns/prefix");
@namespace xml url("http://www.w3.org/XML/1998/namespace");
@namespace xhtml url("http://www.w3.org/1999/xhtml");
@namespace xlink url("http://www.w3.org/1999/xlink");
@namespace xi url("http://www.w3.org/2001/XInclude");

/* First, we ensure, that all elements get shown as 'block'. This is important,
   since web-browsers tend to do the opposite and display any unknown element's
   content as 'inline'. Thus, we explicitly have to style elements, we want to
   display as inline as such, later on.
 */
* {
	/* You could add the following here:
	
		 font-size: 12pt;
	   line-height: 16pt;
	
		 but is is recommended, to mimick HTML, where one would define a base font
		 and a base font-size in the document-root-element to enable the 'rem' unit.
		 Since this, however, is a generic, minimal and application agnostice style-
		 sheet and the document-root-element would be application specific, it would
		 need to be styled seperately.
	*/
	display: block;
}

/* We make sure, that the '@xml:space' attribute gets translated. */
*[xml|space='preserve'] {
	white-space: pre;
}
*[xml|space='default'] {
  white-space: normal;
}

/* We style all elements, that contain the 'xlink:href' attribute as links. */
*[xlink|href] {
	text-decoration: underline;
	color: blue;
}
*[xlink|href]:hover {
	text-decoration: none;
	cursor: pointer;
}
*[xlink|href]:visited {
  text-decoration: underline;
	color: aqua;
	cursor: pointer;
}

/* We provide a visible warning for any XInclude 'xi:fallback' element. */
xi|fallback {
  border: 5px solid red;
}

element {}

prefix|element {}

prefox|meta {display:none;}
prefix|para {display:block;}