Maintained by: David J. Birnbaum (djbpitt@gmail.com)
Last modified:
2023-01-08T19:22:55+0000
CSS controls the presentation (styling) of XML (and HTML)
CSS is described in an external CSS stylesheet, an auxiliary document linked to your XML or HTML (there are other ways to associate CSS information with XML, but the external stylesheet is the most useful, and it’s what we’ll use here)
To associate your CSS with an HTML document, you need to insert a
<link>
element inside the HTML
<header>
, as described below. Note that the procedure for attaching CSS to
HTML is different from the procedure for attaching CSS to other
XML.
To associate your CSS with an XML document in <oXygen/>: Document → XML Document → Associate XSLT/CSS Stylesheet …, as described below. Note that the procedure for attaching CSS to XML is different from the procedure for attaching CSS to HTML.
What CSS can’t do
Move elements to new locations (but see Flexbox, Grid, and the
float
property)
Transform element content to create new content
Alternative (or companion) to CSS: eXtensible Stylesheet Language Transformations: XSLT (stay tuned)
Caution: fine-tuning CSS can be addictive.
Create a CSS rule for everything you want to style, using the information in your schema and your XML document instance, but …
There are default styles (pretty vanilla)
Most styles are inherited from ancestor elements. E.g., a style applied to the root element applies to all child elements unless you override it, etc.
To take advantage of inheritance, I usually work from the outside in.
Components of a CSS statement (Note: this presentation is for CSS in HTML, not generic XML, and a few of the details differ)
Example:
header {
text-align: center;
font-weight: bold;
}
Selector: CSS can identify elements by element type (generic identifier, abbreviated gi), attribute values, context (parent and ancestor elements), etc. The selector must be followed by a pair of curly braces with the actual style declarations between them.
Property: CSS can style for font, color, margins, borders, etc. The property specifies the styling detail (e.g., color), the value specifies how it is styled (e.g., a specific color). The property name must be followed by a colon.
Value: The property value must be followed by a semicolon. Property values that contain spaces (some do, such as some font names) must be enclosed in quotation marks (single or double, as long as they’re both the same); confusingly, in most other cases quotation marks are prohibited.
There are also pseudo-classes and pseudo-elements. The
following will frame elements marked up as
<title type="poem"> … </poem>
in asterisks:
title[type = "poem"]::before {
content : "*";
}
title[type = "poem"]::after {
content : "*";
}
See the MDN Pseudo-classes and pseudo-elements page for more information.
The selector in the example above chooses elements of type
<title>
if and only if they have an
attribute with the name @type
that has the
value poem
.
You can’t make up CSS properties or acceptable values. E.g., if you try to set the color of an element to “pinkGloriousPink!”, that setting will be ignored. You can learn the legal properties and values from the references below.
The procedure for associating a CSS stylesheet with a document is different from XML than for HTML. Sigh.
To attach CSS to HTML (including XHTML) you need to insert the HTML element
<link>
with the
@rel
,
@type
, and
@href
attributes as a child of the
<head>
of the HTML document. That is,
inside the <head>
insert the following
element:
<link rel="stylesheet" type="text/css" href="style.css"/>
@rel
stands for relationship, the
type of link, and this value says that you’re linking to a stylesheet (there can
be other types of links). The @type
attribute is really a sort of subtype; it says that not only are you linking to
a stylesheet (already specified in the @rel
attribute), but that the stylesheet is CSS (there are other types of
stylesheets). @href
stands for
hypertext reference, and points to the stylesheet file. You
should replace style.css with the path to your own stylesheet. If your
stylesheet is in the same directory as your HTML, the path is just the filename.
If it’s in a subdirectory called, for example, css, create a path to it,
e.g., href="css/style.css"
. The value of the
@href
attribute can also be a URL, that is,
a web address. To include the default Obdurodon styles in your own page you can
use:
<link href="http://www.obdurodon.org/css/style.css" rel="stylesheet" type="text/css"/>
To attach CSS to XML in <oXygen/>, select Document → XML Document → Associate XSLT/CSS Stylesheet and navigate to the CSS file. <oXygen/> will insert a line near the top of your document to specify the association. HTML 5 with XML syntax is both HTML and XML, so in principle you could use either method, but we recommend using the HTML linking because it is easier to work with in the browser debugging environments.
A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox