[css-values-5][editorial] Styling, and add some non-normative guidance to how a replacement algo should look

Author: tabatkins

css-values-5/Overview.bs

@@ -48,6 +48,23 @@ dt + dt::before { content: ", "; }
 dl:not(.switch) dt { display: inline; }
 td > small { display: block; }
 </style>
+<style>
+/* Put nice boxes around each algorithm. */
+[data-algorithm]:not(.heading) {
+	padding: .5em;
+	border: thin solid #ddd; border-radius: .5em;
+	margin: .5em calc(-0.5em - 1px);
+}
+[data-algorithm]:not(.heading) > :first-child {
+	margin-top: 0;
+}
+[data-algorithm]:not(.heading) > :last-child {
+	margin-bottom: 0;
+}
+[data-algorithm] [data-algorithm] {
+	margin: 1em 0;
+}
+</style>
 
 <h2 id="intro">
 Introduction</h2>
@@ -3290,7 +3307,24 @@ Substitution</h3>
 	so no further [=arbitrary substitution functions=] exist in the sequence),
 	which it will be replaced by.
 
-	Note: See, for example, [=replace an if() function=].
+	<div class=note>
+		A function's [=replacement=] algorithm is called
+		with the results of [[#early-resolution|early substitution]]
+		and parsing with the function's [=argument grammar=],
+		but nothing more.
+		The algorithm will have to further [=substitute=] each argument it deals with,
+		before [=CSS/parsing=] it as the appropriate part of its <em>normal</em> grammar,
+		and then performing whatever logic it needs.
+
+		It might leave some arguments completely unsubstituted
+		(for example, the fallback argument of an ''attr()'' function,
+		if the attribute value exists and correctly parses),
+		or only parse some arguments based on the results of evaluating other arguments
+		(for example, later <<if-condition>> values in an ''if()'' function
+		are only evaluated if earlier ones evaluated as false,
+		and only the result in the "successful" <<if-branch>> is evaluated).
+	</div>
+
 
 	<div algorithm>
 		To <dfn export local-lt="substitute|substitution" lt="substitute arbitrary substitution function|arbitrary substitution">substitute arbitrary substitution functions</dfn>