-
Notifications
You must be signed in to change notification settings - Fork 256
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3053 from w3c/syntax-highlighting-for-css-techniques
Syntax highlighting for css techniques
- Loading branch information
Showing
47 changed files
with
2,383 additions
and
2,269 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,71 @@ | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using percent for font sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using percent for font sizes</h1><section class="meta"><p class="id">ID: C12</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p>CSS</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the <code class="el">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>Percent font sizes in CSS</h3> | ||
| <!DOCTYPE html> | ||
| <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>Using percent for font sizes</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link> | ||
| </head> | ||
| <body> | ||
| <h1>Using percent for font sizes</h1> | ||
| <section class="meta"> | ||
| <p class="id">ID: C12</p> | ||
| <p class="technology">Technology: css</p> | ||
| <p class="type">Type: Technique</p> | ||
| </section> | ||
| <section id="applicability"> | ||
| <h2>When to Use</h2> | ||
| <p><abbr title="Cascading Style Sheets">CSS</abbr></p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a <code class="language-css">font-size</code> is specified for the <code class="language-html">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>Percent font sizes in CSS</h3> | ||
| <p>This example defines the font size for the <code class="language-html">strong</code> element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p> | ||
|
|
||
| <p>This example defines the font size for the <code class="el">strong</code> element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p> | ||
|
|
||
| <pre xml:space="preserve"> | ||
| strong {font-size: 120%} | ||
|
|
||
| ... | ||
| <pre xml:space="preserve"><code class="language-html"><style> | ||
| strong {font-size: 120%} | ||
| </style> | ||
|
|
||
| <h1>Letting the <strong>user</strong> control text size</h1> | ||
| <p>Since only the user can know what size text works for him, | ||
| it is <strong>very</strong> important to let him configure the text size. | ||
| …</pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check that the value of the CSS property that defines the font size is a percentage.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check #1 is true</li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2><ul> | ||
| <p>Since only the user can know what size text works for them, | ||
| it is <strong>very</strong> important to let them configure the text size.</p></code></pre> | ||
| </section> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="procedure"> | ||
| <h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check that the value of the CSS property that defines the font size is a percentage.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check #1 is true</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ul> | ||
| <li><a href="../css/C13">C13</a></li> | ||
| <li><a href="../css/C14">C14</a></li> | ||
| </ul></section><section id="resources"><h2>Resources</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/CSS2/fonts.html">Cascading Style Sheets, Level 2 (CSS2), Fonts</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/CSS2/fonts.html#font-size-props">CSS 2 Font Size Property</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </section></body></html> | ||
| </ul> | ||
| </section> | ||
| <section id="resources"> | ||
| <h2>Resources</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/css-fonts-3/">Cascading Style Sheets, Fonts</a>. | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">CSS <code class="language-css">font-size</code> property</a>. | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,74 @@ | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using named font sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using named font sizes</h1><section class="meta"><p class="id">ID: C13</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p>CSS</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <!DOCTYPE html> | ||
| <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>Using named font sizes</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link> | ||
| </head> | ||
| <body> | ||
| <h1>Using named font sizes</h1> | ||
| <section class="meta"> | ||
| <p class="id">ID: C13</p> | ||
| <p class="technology">Technology: css</p> | ||
| <p class="type">Type: Technique</p> | ||
| </section> | ||
| <section id="applicability"> | ||
| <h2>When to Use</h2> | ||
| <p><abbr title="Cascading Style Sheets">CSS</abbr></p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a <code class="language-css">font-size</code> relative to the inherited <code class="language-css">font-size</code>.</p> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>Named font sizes in CSS</h3> | ||
| <h3>Named font sizes in CSS</h3> | ||
| <p>This example selects a larger font size for <code class="language-html">strong</code> elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p> | ||
|
|
||
| <p>This example selects a larger font size for <code class="el">strong</code> elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p> | ||
|
|
||
| <pre xml:space="preserve"> | ||
| strong {font-size: larger} | ||
|
|
||
| <pre xml:space="preserve"><code class="language-html"><style> | ||
| strong {font-size: larger} | ||
| </style> | ||
| ... | ||
|
|
||
| <h1>Letting the <strong>user</strong> control text size</h1> | ||
| <p>Since only the user can know what size text works for him, | ||
| it is <strong>very</strong> important to let him configure the text size. | ||
| …</pre> | ||
| <p>Since only the user can know what size text works for them, | ||
| it is <strong>very</strong> important to let them configure the text size. | ||
| ...</code> | ||
| </pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check that the value of the CSS property that defines the font size is one of xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger.</li> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="procedure"> | ||
| <h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check that the value of the CSS property that defines the font size is one of <code class="language-css">xx-small</code>, <code class="language-css">x-small</code>, <code class="language-css">small</code>, <code class="language-css">medium</code>, <code class="language-css">large</code>, <code class="language-css">x-large</code>, <code class="language-css">xx-large</code>, <code class="language-css">smaller</code>, or <code class="language-css">larger</code>.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check #1 is true</li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2><ul> | ||
| <li><a href="../css/C12">C12</a></li> | ||
| <li><a href="../css/C14">C14</a></li> | ||
| </ul></section><section id="resources"><h2>Resources</h2> | ||
|
|
||
| </section> | ||
| <section class="results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check #1 is true</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ul> | ||
| <li><a href="../css/C12">C12</a></li> | ||
| <li><a href="../css/C14">C14</a></li> | ||
| </ul> | ||
| </section> | ||
| <section id="resources"> | ||
| <h2>Resources</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/CSS2/fonts.html">Cascading Style Sheets, Level 2 (CSS2), Fonts</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/CSS2/fonts.html#font-size-props">CSS 2 Font Size Property</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </section></body></html> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">CSS 3 <code class="language-css">font-size</code> Property</a>. | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,71 @@ | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using em units for font sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using em units for font sizes</h1><section class="meta"><p class="id">ID: C14</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p>CSS</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the <code class="el">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <!DOCTYPE html> | ||
| <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>Using em units for font sizes</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link> | ||
| </head> | ||
| <body> | ||
| <h1>Using <code class="language-css">em</code> units for font sizes</h1> | ||
| <section class="meta"> | ||
| <p class="id">ID: C14</p> | ||
| <p class="technology">Technology: css</p> | ||
| <p class="type">Type: Technique</p> | ||
| </section> | ||
| <section id="applicability"> | ||
| <h2>When to Use</h2> | ||
| <p><abbr title="Cascading Style Sheets">CSS</abbr></p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The objective of this technique is to specify text font size in <code class="language-css">em</code> units so that user agents can scale content effectively. Since the <code class="language-css">em</code> is a property of the font, it scales as the font changes size. If a <code class="language-css">font-size</code> is specified for the <code class="language-html">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>Em font sizes in CSS</h3> | ||
|
|
||
| <p>This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.</p> | ||
|
|
||
| <pre xml:space="preserve"> | ||
| strong {font-size: 1.6em} | ||
|
|
||
| ... | ||
|
|
||
| <h3><code class="language-css">em</code> font sizes in CSS</h3> | ||
| <p>This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.</p> | ||
| <pre xml:space="preserve"><code class="language-html"><style> | ||
| strong {font-size: 1.6em} | ||
| </style> | ||
| ... | ||
| <h1>Letting the <strong>user</strong> control text size</h1> | ||
| <p>Since only the user can know what size text works for him, | ||
| it is <strong>very</strong> important to let him configure the text size. </p> | ||
| …</pre> | ||
| <p>Since only the user can know what size text works for them, | ||
| it is <strong>very</strong> important to let them configure the text size.</p> | ||
| …</code></pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check that the value of the CSS property that defines the font size is expressed in em units.</li> | ||
| </ol> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="procedure"> | ||
| <h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check that the value of the CSS property that defines the font size is expressed in em units.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check #1 is true</li> | ||
| </ul> | ||
| <section class="results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check #1 is true</li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2><ul> | ||
| <li><a href="../css/C12">C12</a></li> | ||
| <li><a href="../css/C13">C13</a></li> | ||
| </ul></section><section id="resources"><h2>Resources</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/CSS2/fonts.html">Cascading Style Sheets, Level 2 (CSS2), Fonts</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/CSS2/fonts.html#font-size-props">CSS 2 Font Size Property</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </section></body></html> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ul> | ||
| <li><a href="../css/C12">C12</a></li> | ||
| <li><a href="../css/C13">C13</a></li> | ||
| </ul> | ||
| </section> | ||
| <section id="resources"> | ||
| <h2>Resources</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">CSS 3 <code class="language-css">font-size</code> Property</a>. | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </body> | ||
| </html> |
Oops, something went wrong.