Overview.src.html

<h1>CSS Foo Module Level N</h1>

<pre class='metadata'>
Shortname: css-foo
Level: 1
Status: ED
Group: csswg
TR: http://www.w3.org/TR/css-foo/
ED: http://dev.w3.org/csswg/css-foo/
Editor: Name1, Company1, http://example.com/contact
Editor: Name2, Company2, name2@example.com
Abstract: This module introduces the 'foo' property and related values, which do bar and baz.
Ignored Terms: div, dl, dfn
</pre>

<style type="text/css">
/* delete this block when you've cleared out all the .replaceme elements */
.replaceme {
	border: solid red;
	padding: 0 0.5em;
	margin: 0 0.1em;
	background: yellow;
	color: green;
}
.replaceme:before {
	content: "FIXME(";
	color: black;
}
.replaceme:after {
	content: ")";
	color: black;
}
</style>

<h2 id="intro">
Introduction</h2>

	<em>This section is not normative.</em>

	<var class="replaceme">Provide background, motivation, etc.</var>


<h2 id="sample-topic">
Sample section</h2>

	Look at the mark-up in this section for examples.
	See the <a href="https://www.w3.org/Style/Group/css3-src/bin/README">documentation</a> for more precise instructions.
	The companion of this template shows the <a href="Overview.html">processed result</a>.

	To refer to HTML, use [[HTML40]] (note the double square brackets).
	To make a normative reference,
	insert a &ldquo;!&rdquo;, like this:
	[[!CSS3SYN]]
	The currently available <a href="https://www.w3.org/Style/Group/css3-src/biblio.ref">list of bibliographic data</a> can of course be extended.

	We write about a property such as 'foo' like this
	and about a piece of CSS code like this: ''foo: bar''.
	(Note that if it looks like a "property: value",
	it'll automatically link to the property.)
	Inline HTML and XML are similar,
	but use the CODE element: <code class=html>&lt;blockquote&gt;...&lt;/blockquote&gt;</code>
	and <code class=xml>&lt;r:xyz&gt;...&lt;/r:xyz&gt;</code>.

	Note: Note that the property will automatically be linked to its definition.

	To define <dfn>terms</dfn> into the <dfn>index</dfn>,
	there are many <dfn title="variant">variants</dfn>,
	but hopefully the <dfn title="simple|simpler|simplest">simplest</dfn>
	will be the most common.

	Note: Note that you can add non-normative notes like this.

	Of course, multi-paragraph notes are also possible: just enclose them in a <a element>div</a>:

	<div class=note>
		Note that this note is a multi-paragraph note.

		It doesn't <em>need</em> to have two paragraphs, but it could.
	</div>

	Displayed examples come in eight different types:
	CSS examples that need no separate paragraph of explanation are put in a simple PRE:

	<pre class=example>
		EM { font-style: italic }
	</pre>

	CSS examples that need extra text need a DIV.

	<div class=example>
		The following example is the same as the previous one,
		but now it is explained:

		<pre>EM { font-style: italic }</pre>
	</div>

	Illegal CSS examples (examples of errors) are the same,
	but with class "illegal example".
	Examples of HTML and XML code have class "html" and "xml"respectively,
	but are otherwise ditto.

	A formal definition of a property looks like this:

<h3 id="the-display-model">
Internal display model: the 'display-inside' property</h3>

	<pre class='propdef'>
		Name: foo
		Value: inline-inside | block-inside | table | ruby | icon
		Initial: text
		Applies to: all elements
		Inherited: no
		Percentages: n/a
		Media: visual
		Computed value: specified value
		Animatable: no
		Canonical order: per grammar
	</pre>

	<dl dfn-type="value" dfn-for="foo">
		<dt><dfn>value-name</dfn>
		<dd>
			Define values using a <a element>dl</a>.
			Note that the <a element>dl</a> wrapper
			specifies the default <a element>dfn</a> type and what property it's for,
			so you don't have to repeat that information in each individual definition.
	</dl>

	<dfn>Cross-references</dfn> are created by enclosing a term or phrase in &lt;dfn>
	(like the word <a>cross-references</a> earlier in this sentence).
	Then an &lt;a> without an <code>href=''</code> attribute
	with the same text content will automatically be linked.
	Both &lt;dfn>s and &lt;a>s are typed,
	which allows the same text to appear as different types of terms without a collision.
	The type can often be inferred,
	but sometimes it needs to be specified,
	like when you're linking to a <a interface>Foo</a> WebIDL interface.

	And a figure with a caption is done like this:

	<figure>
		<img src="corner.png" alt="A table with a caption above it; both have margins and the margins between them are collapsed, as is normal for vertical margins.">

		<figcaption>
			Just a random image.
			Use SVG if you can.
			Otherwise, W3C prefers PNG over GIF (obviously, since PNG is a W3C Rec).
		</figcaption>
	</figure>

	Don't forget to write the alt.

	<p class='issue'>
		An open issue or editorial remark is OK in a WD,
		but they should be resolved/removed before the document goes to &ldquo;CR&rdquo;
		(Candidate Recommendation).
		Use class=&ldquo;issue&rdquo;.

	<p class='issue'>
		Inline issues will be copied into an <a href="#issues-index">Issues Index</a> at the end of the document,
		for easy reference.

	<pre class='idl'>
		/* Write WebIDL in a &lt;pre class="idl"> as plain text. */
		interface Foo {
			readonly attribute DOMString bar;
			boolean baz(FooDict Arg1, (DOMString or Foo) Arg2);
		};

		dictionary FooDict {
			sequence&lt;Foo> foo;
			boolean bar;
			DOMString baz = "qux";
		};
	</pre>