### Text-based UA formatting of first-letter example

Source: https://www.w3.org/TR/REC-CSS1-961217

Possible text-based formatting of the drop cap example, showing the first letter as a large block and the rest of the text wrapped around it.

```text
  ___
   | HE FIRST few
   | words of an 
  article in the
  Economist.
```

--------------------------------

### background-position keyword examples

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows equivalent keyword values for background-position with percentage equivalents. Keywords cannot be combined with percentage or length values.

```css
  BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
  BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
  BODY { background: url(banner.jpeg) center }       /*  50%  50% */
  BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

```

--------------------------------

### line-height: equivalent values example

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows three equivalent ways to set line-height: number, length, and percentage. All produce the same resultant line height.

```css
  DIV { line-height: 1.2; font-size: 10pt }     /* number */
  DIV { line-height: 1.2em; font-size: 10pt }   /* length */
  DIV { line-height: 120%; font-size: 10pt }    /* percentage */

```

--------------------------------

### Class selector example

Source: https://www.w3.org/TR/REC-CSS1-961217

Complete HTML document using a class selector to style an H1 element with a specific color.

```html
<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
    H1.pastoral { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 CLASS=pastoral>Way too green</H1>
 </BODY>
</HTML>

```

--------------------------------

### Background shorthand examples

Source: https://www.w3.org/TR/REC-CSS1-961217

The 'background' shorthand sets all individual background properties. The first rule sets only background-color; the second sets all individual properties.

```css
  BODY { background: red }
  P { background: url(chess.png) gray 50% repeat fixed }

```

--------------------------------

### Fictional tag sequence for first-letter example

Source: https://www.w3.org/TR/REC-CSS1-961217

The fictional tag sequence that represents the structure of the drop cap example, showing where the 'first-letter' pseudo-element tags are inserted.

```html
  <P>
  <SPAN>
  <P:first-letter>
  T
  </P:first-letter>he first
  </SPAN> 
  few words of an article in the Economist.
  </P>
```

--------------------------------

### Multiple pseudo-elements example

Source: https://www.w3.org/TR/REC-CSS1-961217

CSS rules and HTML markup showing how to combine 'first-letter' and 'first-line' pseudo-elements, with the first letter green, first line blue, and rest red.

```css
  P { color: red; font-size: 12pt }
  P:first-letter { color: green; font-size: 200% }
  P:first-line { color: blue }
```

```html
  <P>Some text that ends up on two lines</P>
```

--------------------------------

### text-indent: 3em example

Source: https://www.w3.org/TR/REC-CSS1-961217

Indents the first formatted line of a paragraph by 3em. Negative values allowed but may have implementation limits.

```css
  P { text-indent: 3em }

```

--------------------------------

### Visual markup with FONT element

Source: https://www.w3.org/TR/REC-CSS1-961217

HTML example showing visual markup using a FONT element to achieve small-caps style, contrasted with the CSS1 style sheet approach.

```html
  <H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
```

--------------------------------

### HTML example with four ways to combine style and HTML

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows linking an external style sheet with LINK, embedding a STYLE element, importing a style sheet with @import, and using a STYLE attribute on an element. The STYLE attribute mixes style with content.

```html
<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" 
      HREF="http://style.com/cool" TITLE="Cool">
    <STYLE TYPE="text/css">
      @import url(http://style.com/basic);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P STYLE="color: green">While the paragraph is green.
  </BODY>
</HTML>

```

--------------------------------

### ID selector examples

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows ID selectors: one matches any element with ID 'z98y', the other only matches H1 elements with that ID. Also shows an HTML element with that ID.

```css
  #z98y { letter-spacing: 0.3em }
  H1#z98y { letter-spacing: 0.5em }

```

```html
  <P ID=z98y>Wide text</P>

```

--------------------------------

### Set padding with shorthand and background (padding)

Source: https://www.w3.org/TR/REC-CSS1-961217

Shorthand for setting all four padding values. One value applies to all sides; two values set vertical and horizontal; three values set top, horizontal, and bottom; four values set top, right, bottom, left. The example sets 1em vertical and 2em horizontal padding on an H1 with a white background. Padding values cannot be negative.

```css
  H1 { 
    background: white; 
    padding: 1em 2em;
  } 

```

--------------------------------

### text-transform: uppercase example

Source: https://www.w3.org/TR/REC-CSS1-961217

Applies uppercase transformation to H1 elements. The actual transformation is language dependent.

```css
  H1 { text-transform: uppercase }

```

--------------------------------

### Importing style sheets with @import

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows how to combine partial style sheets using @import statements. All @import statements must occur at the start of a style sheet, before any declarations. Rules in the style sheet itself override imported sheets.

```css
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);

H1 { color: red }     /* override imported sheets */
```

--------------------------------

### margin-top: 2em example

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the top margin of H1 elements to 2em. Negative values allowed but may have implementation limits.

```css
  H1 { margin-top: 2em }

```

--------------------------------

### Set background-image with url and none

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the background image of an element. The example sets a background image for BODY using a URL and disables it for P elements with 'none'. When setting an image, also set a background color for when the image is unavailable.

```css
  BODY { background-image: url(marble.gif) }
  P { background-image: none }

```

--------------------------------

### Basic contextual selector example: H1 EM

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows a simple style rule where EM elements inside H1 are colored red. The first part sets H1 to blue and EM to red, but the second part uses a contextual selector to target only EM elements within H1.

```css
  H1 { color: blue }
  EM { color: red }

```

```css
  H1 EM { color: red }

```

--------------------------------

### Drop cap with first-letter pseudo-element

Source: https://www.w3.org/TR/REC-CSS1-961217

HTML and CSS example showing how to create a drop cap that spans two lines using the 'first-letter' pseudo-element with 'float: left' and increased font size.

```html
<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
 </BODY>
</HTML>
```

--------------------------------

### word-spacing example

Source: https://www.w3.org/TR/REC-CSS1-961217

Increases word spacing by 0.4em for H1 elements. The length unit adds to the default space between words.

```css
  H1 { word-spacing: 0.4em }

```

--------------------------------

### Example of a block with nested quotes and escaped characters

Source: https://www.w3.org/TR/REC-CSS1-961217

Illustrates a block in CSS1, showing that braces inside quotes do not match the opening brace and that escaped characters are handled specially.

```css
  { causta: "}" + ({7} * '\'') }

```

--------------------------------

### Fictional tag sequence for multiple pseudo-elements

Source: https://www.w3.org/TR/REC-CSS1-961217

The fictional tag sequence for the multiple pseudo-elements example, showing the nesting of 'first-letter' inside 'first-line'.

```html
  <P>
  <P:first-line>
  <P:first-letter> 
  S 
  </P:first-letter>ome text that 
  </P:first-line> 
  ends up on two lines 
  </P>
```

--------------------------------

### Fictional tag sequence with regenerated SPAN tags

Source: https://www.w3.org/TR/REC-CSS1-961217

Example showing how a pseudo-element breaking up a real element requires regenerated tags in the fictional tag sequence.

```html
  <P>
  <P:first-line>
  <SPAN> 
  This text is inside a long 
  </SPAN>
  </P:first-line>
  <SPAN> 
  span element 
  </SPAN>
```

--------------------------------

### text-align: center example

Source: https://www.w3.org/TR/REC-CSS1-961217

Centers text within a DIV element with class 'center'. Inherits to all block-level elements inside.

```css
  DIV.center { text-align: center }

```

--------------------------------

### Specificity calculation examples

Source: https://www.w3.org/TR/REC-CSS1-961217

Illustrates how to compute selector specificity by counting ID attributes (a), CLASS attributes (b), and tag names (c). The concatenated numbers give the specificity. Pseudo-elements and pseudo-classes count as normal elements and classes.

```css
LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */ 
#x34y         {...}  /* a=1 b=0 c=0 -> specificity = 100 */
```

--------------------------------

### Set background-color to #F00

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the background color of an element. The example sets the background color of H1 elements to red (#F00).

```css
  H1 { background-color: #F00 }

```

--------------------------------

### Set border color with fallback to color property (P)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the border color using the 'border-color' property. If no color is specified, the value of the 'color' property is used. In this example, the border will be a solid black line.

```css
  P { 
    color: black; 
    background: white; 
    border: solid;
  }

```

--------------------------------

### First-letter with preceding quotes

Source: https://www.w3.org/TR/REC-CSS1-961217

Example showing that quotes preceding the first letter are included in the 'first-letter' pseudo-element, as illustrated by an ASCII art representation.

```text
  ||   /\    bird in 
      /  \   the hand
     /----\  is worth
    /      \ two in
  the bush," says an 
  old proverb.
```

--------------------------------

### Fixed background position example

Source: https://www.w3.org/TR/REC-CSS1-961217

Places a fixed background image relative to the canvas instead of the element. The image is positioned at the lower right corner of the canvas.

```css
  BODY { 
    background-image: url(logo.png);
    background-attachment: fixed;
    background-position: 100% 100%;
  } 

```

--------------------------------

### Set background-repeat to repeat-y

Source: https://www.w3.org/TR/REC-CSS1-961217

Controls how a background image is repeated. The example sets a red background with an image and repeats it vertically only (repeat-y). The image will only be repeated vertically.

```css
  BODY { 
    background: red url(pendant.gif);
    background-repeat: repeat-y;
  }

```

--------------------------------

### Shorthand font property for H1

Source: https://www.w3.org/TR/REC-CSS1-961217

Uses the shorthand 'font' property to set font-weight, font-size, line-height, and font-family in one declaration. Equivalent to the previous grouped declarations example.

```css
  H1 { font: bold 12pt/14pt helvetica }

```

--------------------------------

### Border-left overrides border-color (BLOCKQUOTE example)

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows how the order of rules affects border colors. The left border becomes black because 'border-left' sets the color from the 'color' property, overriding the earlier 'border-color: red'.

```css
  BLOCKQUOTE {
    border-color: red;
    border-left: double
    color: black;
  }

```

--------------------------------

### Set background-attachment to fixed

Source: https://www.w3.org/TR/REC-CSS1-961217

Determines if a background image is fixed relative to the canvas or scrolls with content. The example sets a red background with an image, repeats it vertically, and fixes it (fixed). CSS1 core: UAs may treat 'fixed' as 'scroll', but it is recommended to interpret 'fixed' correctly, at least on HTML and BODY elements.

```css
  BODY { 
    background: red url(pendant.gif);
    background-repeat: repeat-y;
    background-attachment: fixed;
  }

```

--------------------------------

### ASCII diagram: Box model terminology (top, bottom, left, right, inner/outer edges)

Source: https://www.w3.org/TR/REC-CSS1-961217

Introduces box model terminology: top/bottom margin, border, padding, inner top/bottom, left/right outer edges, left/right inner edges, and content area. Useful for understanding the relationship between margins, borders, padding, and content.

```text
                               --------------- **<-- top**
                                 top margin
                               ---------------
                                 top border
                               ---------------
                                top padding
                               +-------------+ **<-- inner top**
    |        |        |        |             |         |         |         |
    |--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
    | margin | border | padding|             | padding | border  | margin  |
    |        |        |        |             |         |         |         |
                               +-------------+ **<-- inner bottom**
    **^**                          **^**             **^**                             **^**
    **left**         **left inner edge**             **right inner edge**          **right**
    **outer**                                                              **outer**
    **edge**                        bottom padding                          **edge**
                               ---------------
                                 bottom border
                               ---------------
                                 bottom margin
                               --------------- **<-- bottom**

```

--------------------------------

### CSS1 Sample Style Sheet for HTML 2.0

Source: https://www.w3.org/TR/REC-CSS1-961217

A sample style sheet for HTML 2.0, written according to the suggested rendering in the HTML 2.0 specification. It includes styles for body and block-level elements, with colors added for completeness. It is suggested to be used as a UA default.

```css
  BODY { 
    margin: 1em;
    font-family: serif;
    line-height: 1.1;
    background: white;
    color: black; 
  }

  H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 
  DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
```

--------------------------------

### Set margins using shorthand (margin)

Source: https://www.w3.org/TR/REC-CSS1-961217

Shorthand for setting all four margins. One value applies to all sides; two values set vertical and horizontal; three values set top, horizontal, and bottom; four values set top, right, bottom, left. Negative values are allowed but may have implementation-specific limits.

```css
  BODY { margin: 2em } /* all margins set to 2em */
  BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
  BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

```

--------------------------------

### Grouping contextual selectors: H1 B, H2 B, H1 EM, H2 EM

Source: https://www.w3.org/TR/REC-CSS1-961217

Illustrates grouping multiple contextual selectors in one rule, and shows the equivalent separate rules. The grouped selector is equivalent to the four separate rules.

```css
  H1 B, H2 B, H1 EM, H2 EM { color: red }

```

```css
  H1 B { color: red }
  H2 B { color: red }
  H1 EM { color: red }
  H2 EM { color: red }

```

--------------------------------

### Contextual selectors with multiple ancestors: UL LI and UL UL LI

Source: https://www.w3.org/TR/REC-CSS1-961217

Demonstrates contextual selectors that match LI elements based on the number of UL ancestors. The second selector is more specific and overrides the first for elements with at least two UL ancestors.

```css
  UL LI    { font-size: small }    
  UL UL LI { font-size: x-small }

```

--------------------------------

### ASCII diagram: Box layout for UL with two LI children

Source: https://www.w3.org/TR/REC-CSS1-961217

ASCII diagram showing how margins and padding format the UL and its two LI children. It illustrates the transparent margins (red shines through), the UL padding (red), the LI padding (blue), and the max(a, c) note for vertical margin collapsing.

```text
   _______________________________________________________
  |                                                       |
  |    A      UL margin (transparent)                     |
  |    _______________________________________________    |
  | D |                                               | B |
  |   |    E   UL padding (red)                       |   |
  |   |    _______________________________________    |   |
  |   | H |                                       | F |   |
  |   |   |    a   LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |    _______________________________    |   |   |
  |   |   | d |                               | b |   |   |
  |   |   |   |    e    LI padding (blue)     |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  1st element of list      f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |     max(a, c)                         |   |   | <- note the max
  |   |   |    _______________________________    |   |   |
  |   |   |   |                               |   |   |   |
  |   |   | d |    e    LI padding (blue)     |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  2nd element of list      f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |   c    LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |_______________________________________|   |   |
  |   |                                               |   |
  |   |    G                                          |   |
  |   |_______________________________________________|   |
  |                                                       |
  |   C                                                   |
  |_______________________________________________________|

```

--------------------------------

### CSS1 Tokenizer in Flex Notation

Source: https://www.w3.org/TR/REC-CSS1-961217

Flex tokenizer for CSS1 forward-compatible parsing. Assumes an 8-bit implementation of flex and is case-insensitive (flex command line option -i). Defines patterns for unicode escapes, identifiers, numbers, strings, and various CSS tokens. Includes rules for comments, pseudo-classes, URLs, RGB colors, and illegal character reporting.

```flex
unicode		\\[0-9a-f]{1,4}
latin1		[¡-ÿ]
escape		{unicode}|\\[ -~¡-ÿ]
stringchar	{escape}|{latin1}|[ !#$%&(-~]
nmstrt		[a-z]|{latin1}|{escape}
nmchar		[-a-z0-9]|{latin1}|{escape}
ident		{nmstrt}{nmchar}*
name		{nmchar}+
d		[0-9]
notnm		[^-a-z0-9\\]|{latin1}
w		[ \t\n]*
num		{d}+|{d}*\.{d}+
string		\"({stringchar}|\')*\"|\'({stringchar}|\")*\'

%x COMMENT
%s AFTER_IDENT

%%
"/*"				{BEGIN(COMMENT);}
<COMMENT>"*/"			{BEGIN(0);}
<COMMENT>\n			{/* ignore */}
<COMMENT>.			{/* ignore */}
@import				{BEGIN(0); return IMPORT_SYM;}
"!"{w}important			{BEGIN(0); return IMPORTANT_SYM;}
{ident}				{BEGIN(AFTER_IDENT); return IDENT;}
{string}			{BEGIN(0); return STRING;}

{num}				{BEGIN(0); return NUMBER;}
{num}"%"			{BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm}			{BEGIN(0); return LENGTH;}
{num}mm/{notnm}			{BEGIN(0); return LENGTH;}
{num}cm/{notnm}			{BEGIN(0); return LENGTH;}
{num}pc/{notnm}			{BEGIN(0); return LENGTH;}
{num}in/{notnm}			{BEGIN(0); return LENGTH;}
{num}px/{notnm}			{BEGIN(0); return LENGTH;}
{num}em/{notnm}			{BEGIN(0); return EMS;}
{num}ex/{notnm}			{BEGIN(0); return EXS;}

<AFTER_IDENT>":"link		{return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited	{return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active	{return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line	{return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter	{return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name}		{return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name}		{return CLASS_AFTER_IDENT;}

":"link				{BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited			{BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active			{BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line			{BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter			{BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name}			{BEGIN(AFTER_IDENT); return HASH;}
"."{name}			{BEGIN(AFTER_IDENT); return CLASS;}

url\({w}{string}{w}\)					|
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)		{BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)	{BEGIN(0); return RGB;}

[-/+{};,#:]			{BEGIN(0); return *yytext;}
[ \t]+				{BEGIN(0); /* ignore whitespace */}
\n				{BEGIN(0); /* ignore whitespace */}
\<\!\-\-			{BEGIN(0); return CDO;}
\-\-\>				{BEGIN(0); return CDC;}
.				{fprintf(stderr, "%d: Illegal character (%d)\n",
				 lineno, *yytext);}
```

--------------------------------

### Set font-weight normal and bold

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets P to normal (400) and H1 to 700 (bold).

```css
  P { font-weight: normal }   /* 400 */
  H1 { font-weight: 700 }     /* bold */

```

--------------------------------

### Set right padding with px unit (padding-right)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the right padding of an element to 10px. Padding values cannot be negative.

```css
  BLOCKQUOTE { padding-right: 10px }

```

--------------------------------

### Set top padding with em unit (padding-top)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the top padding of an element to 0.3em. Padding values cannot be negative.

```css
  BLOCKQUOTE { padding-top: 0.3em }

```

--------------------------------

### Set left padding with percentage (padding-left)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the left padding of an element to 20% of the parent element's width. Padding values cannot be negative.

```css
  BLOCKQUOTE { padding-left: 20% }

```

--------------------------------

### Gamma correction lookup table construction

Source: https://www.w3.org/TR/REC-CSS1-961217

Builds a 256-element lookup table to apply gamma correction to RGB values, avoiding transcendental math per color attribute. The table is built once per browser invocation.

```pascal
  for i := 0 to 255 do
    raw := i / 255;
    corr := pow (raw, gamma);
    table[i] := trunc (0.5 + corr * 255.0)
  end
```

--------------------------------

### Using !important to increase declaration weight

Source: https://www.w3.org/TR/REC-CSS1-961217

Demonstrates the '!important' syntax to increase the weight of declarations. The first three declarations have increased weight, while the last has normal weight. Important reader rules override normal author rules, and important author rules override important reader rules.

```css
H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }
```

--------------------------------

### Set default style on BODY element

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets a default text color and background for the document. The background uses an image with a white fallback if the image is unavailable.

```css
  BODY { 
    color: black;
    background: url(texture.gif) white;
  }

```

--------------------------------

### Equivalent longhand for margin shorthand

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows the longhand equivalent of the three-value margin shorthand, where the missing left margin is copied from the opposite side (right).

```css
  BODY {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 2em;        /* copied from opposite side (right) */
  }

```

--------------------------------

### Contextual selectors with element types, classes, and IDs

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows contextual selectors that combine element types, class attributes, and ID attributes to target specific elements based on their ancestors.

```css
  DIV P           { font: small sans-serif }
  .reddish H1     { color: red }
  #x78y CODE      { background: blue }
  DIV.sidenote H1 { font-size: large }

```

--------------------------------

### Set bottom padding with em unit (padding-bottom)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the bottom padding of an element to 2em. Padding values cannot be negative.

```css
  BLOCKQUOTE { padding-bottom: 2em }

```

--------------------------------

### CSS1: Style sheet for UL and LI margins and padding

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows a CSS1 style sheet that sets background, margin, and padding for a UL and its LI children. The single-letter constants (A-G, a-g) are placeholders, not legal CSS1 syntax, used to tie the style sheet to the accompanying figure. The LI text is white on blue, and the UL background is red.

```css
    <STYLE TYPE="text/css">
      UL { 
        background: red; 
        margin: A B C D;      
        padding: E F G H;
      }
      LI { 
        color: white;    
        background: blue;     /* so text is white on blue */ 
        margin: a b c d; 
        padding: e f g h;
      }
    </STYLE>
    ..
    <UL>
      <LI>1st element of list
      <LI>2nd element of list
    </UL>

```

--------------------------------

### Border shorthand equivalent to four individual border properties

Source: https://www.w3.org/TR/REC-CSS1-961217

The first rule sets the same border on all four sides. The second rule shows the equivalent using individual border properties. The 'border' property cannot set different values per side.

```css
  P { border: solid red }
  P {
    border-top: solid red;
    border-right: solid red;
    border-bottom: solid red;
    border-left: solid red
  }

```

--------------------------------

### Grouping declarations for H1

Source: https://www.w3.org/TR/REC-CSS1-961217

Groups multiple declarations for H1, setting font-weight, font-size, line-height, font-family, font-variant, and font-style.

```css
  H1 { 
    font-weight: bold; 
    font-size: 12pt;
    line-height: 14pt; 
    font-family: helvetica; 
    font-variant: normal;
    font-style: normal;
  }

```

--------------------------------

### Set image height with CSS 'height' property

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the height of an image with class 'icon' to 100 pixels. The aspect ratio is preserved if the 'width' property is 'auto'. Negative values are not allowed.

```css
  IMG.icon { height: 100px }

```

--------------------------------

### Pseudo-element combined with class

Source: https://www.w3.org/TR/REC-CSS1-961217

CSS rule and HTML markup showing how to combine a class with a pseudo-element, making the first letter of elements with that class red.

```css
  P.initial:first-letter { color: red }
```

```html
  <P CLASS=initial>First paragraph</A>
```

--------------------------------

### Set border-width with one to four values (H1)

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows the shorthand 'border-width' property with one to four values. The comments indicate the resulting widths for top, right, bottom, and left borders.

```css
  H1 { border-width: thin }                   /* thin thin thin thin */
  H1 { border-width: thin thick }             /* thin thick thin thick */
  H1 { border-width: thin thick medium }      /* thin thick medium thin */
  H1 { border-width: thin thick medium none } /* thin thick medium none */

```

--------------------------------

### Set image width (IMG.icon { width: 100px })

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the width of an image element. The aspect ratio is preserved if the 'height' property is 'auto'. Negative values are not allowed.

```css
  IMG.icon { width: 100px }

```

--------------------------------

### Simple CSS rule setting H1 color to blue

Source: https://www.w3.org/TR/REC-CSS1-961217

A basic CSS rule with selector 'H1' and declaration 'color: blue'. This is the simplest form of a style sheet.

```css
  H1 { color: blue }

```

--------------------------------

### Set display types for HTML elements with CSS 'display' property

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets display values for P, EM, LI, and IMG elements. The last rule turns off the display of images.

```css
  P { display: block }
  EM { display: inline }
  LI { display: list-item }
  IMG { display: none }

```

--------------------------------

### Set font-style for headings and emphasized text

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets H1, H2, H3 to italic and H1 EM to normal. Emphasized text within H1 will appear in a normal face.

```css
  H1, H2, H3 { font-style: italic }
  H1 EM { font-style: normal }

```

--------------------------------

### Class selector for all elements

Source: https://www.w3.org/TR/REC-CSS1-961217

Selects all elements with the class 'pastoral' and sets their color to green.

```css
  .pastoral { color: green }  /* all elements with CLASS pastoral */

```

--------------------------------

### Set border-style with two values (#xy34)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the border style using the 'border-style' property with two values. The horizontal borders will be 'solid' and the vertical borders will be 'dotted'.

```css
  #xy34 { border-style: solid dotted }

```

--------------------------------

### Set border width with em unit (H1)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the border width using the 'em' unit to achieve relative widths that scale with font size.

```css
  H1 { border: solid 0.5em }

```

--------------------------------

### Set font-weight bolder

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets STRONG to bolder, selecting a font weight relative to the inherited weight.

```css
  STRONG { font-weight: bolder }

```

--------------------------------

### Invalid at-keyword ignored: @three-dee

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows that an invalid at-keyword is ignored together with everything following it up to the next semicolon or brace pair. The whole @three-dee at-rule is skipped, effectively reducing the style sheet to the remaining rule.

```css
@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 {color: blue}

```

```css
H1 {color: blue}

```

--------------------------------

### Set border width with keyword values (H1 and P)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the top border width using the 'thick' keyword for H1 and P elements. The keyword widths are constant throughout a document, so both elements will have the same border width regardless of font size.

```css
  H1 { border: solid thick red }
  P  { border: solid thick blue }

```

--------------------------------

### CSS comments: EM { color: red } /* red, really red!! */

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows the syntax for comments in CSS, which are similar to C comments. Comments cannot be nested and are treated as whitespace by a CSS1 parser.

```css
  EM { color: red }  /* red, really red!! */

```

--------------------------------

### Set font-variant small-caps and font-style oblique

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets H3 to small-caps and EM to oblique, resulting in emphasized words in oblique small-caps.

```css
  H3 { font-variant: small-caps }
  EM { font-style: oblique }

```

--------------------------------

### Set left margin with em unit (margin-left)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the left margin of an element to 2em. Negative values are allowed but may have implementation-specific limits.

```css
  H1 { margin-left: 2em }

```

--------------------------------

### Set bottom border with color (H1 { border-bottom: thick solid red })

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the width, style, and color of the bottom border of an H1 element. The color is explicitly set to red.

```css
  H1 { border-bottom: thick solid red }

```

--------------------------------

### CSS1 parser encountering an illegal @import after rules

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows a style sheet with a second @import that is illegal because it appears after a ruleset. The CSS1 parser skips the entire at-rule, effectively reducing the style sheet to the first @import and the H1 rule.

```css
  @import "subs.css";
  H1 { color: blue }
  @import "list.css";

```

```css
  @import "subs.css";
  H1 {color: blue}

```

--------------------------------

### CSS1 style sheet for small-caps

Source: https://www.w3.org/TR/REC-CSS1-961217

CSS1 style sheet declaration that replaces the FONT element approach for small-caps, followed by the corresponding HTML markup.

```css
  H1 { font-style: small-caps }
```

```html
  <H1>Headline</H1>
```

--------------------------------

### Percentage value for line-height

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows that line-height percentage is relative to font-size. Children inherit the computed value (12pt), not the percentage.

```css
  P { font-size: 10pt }
  P { line-height: 120% }  /* relative to 'font-size', i.e. 12pt */

```

--------------------------------

### Set bottom border without color (H1 { border-bottom: thick solid })

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the width and style of the bottom border, omitting the color. The border color will be the same as the element's 'color' value.

```css
  H1 { border-bottom: thick solid }

```

--------------------------------

### Unknown property ignored: H1 { color: red; rotation: 70deg }

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows that a declaration with an unknown property is ignored, so the UA treats the style sheet as if only the valid declaration remained.

```css
H1 { color: red; rotation: 70deg }

```

```css
H1 { color: red; }

```

--------------------------------

### Float images left with CSS 'float' property

Source: https://www.w3.org/TR/REC-CSS1-961217

Places all IMG elements with CLASS=icon along the left side of the parent element, with text wrapping on the right. The element is treated as block-level, ignoring the 'display' property.

```css
  IMG.icon { 
    float: left;
    margin-left: 0;
  }

```

--------------------------------

### Grouping selectors with comma-separated list

Source: https://www.w3.org/TR/REC-CSS1-961217

Groups selectors H1, H2, H3 to apply the same font-family, reducing style sheet size.

```css
  H1, H2, H3 { font-family: helvetica }

```

--------------------------------

### Set bottom margin with length (margin-bottom)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the bottom margin of an element to 3px. Negative values are allowed but may have implementation-specific limits.

```css
  H1 { margin-bottom: 3px }

```

--------------------------------

### Pseudo-element in contextual selector

Source: https://www.w3.org/TR/REC-CSS1-961217

CSS rule showing that pseudo-elements are only allowed at the end of a contextual selector.

```css
  BODY P:first-letter { color: purple }
```

--------------------------------

### Illegal values ignored: IMG { float: left } and others

Source: https://www.w3.org/TR/REC-CSS1-961217

Illustrates that illegal values or values with illegal parts are treated as if the declaration weren't there at all. The CSS1 parser honors the first rule and ignores the rest, as if the style sheet had the empty declarations.

```css
IMG { float: left }       /* CSS1 */
IMG { float: left top }   /* "top" is not a value of 'float' */
IMG { background: "red" } /* keywords cannot be quoted in CSS1 */
IMG { border-width: 3 }   /* a unit must be specified for length values */

```

```css
IMG { float: left }
IMG { }
IMG { }
IMG { }

```

--------------------------------

### HTML element with emphasized text

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows an H1 element containing an EM element. The EM will inherit the color from its parent if no color is assigned to it.

```html
  <H1>The headline <EM>is</EM> important!</H1>

```

--------------------------------

### Hiding STYLE content with SGML comments

Source: https://www.w3.org/TR/REC-CSS1-961217

During a transition phase, STYLE element content may be hidden using SGML comments. Since STYLE is CDATA, conforming SGML parsers will not remove the comment.

```html
  <STYLE TYPE="text/css"><!--
    H1 { color: green }
  --></STYLE>

```

--------------------------------

### CSS1 parser skipping an illegal selector

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows a style sheet with a selector-string that is illegal in CSS1 (P[align]). The parser skips the entire ruleset, reducing the style sheet to the valid rules.

```css
  H1 { color: blue }
  P[align], UL { color: red; font-size: large }
  P EM { font-weight: bold }

```

```css
  H1 { color: blue }
  P EM { font-weight: bold }

```

--------------------------------

### CSS1 parser skipping invalid declarations

Source: https://www.w3.org/TR/REC-CSS1-961217

Shows a style sheet with declarations that have invalid values or unknown properties. The parser skips these declarations, reducing the style sheet to the valid declarations.

```css
  H1 { color: red; font-style: 12pt }
  P { color: blue;  font-vendor: any;  font-variant: small-caps }
  EM EM { font-style: normal }

```

```css
  H1 { color: red; }
  P { color: blue;  font-variant: small-caps }
  EM EM { font-style: normal }

```

--------------------------------

### Set right margin with percentage (margin-right)

Source: https://www.w3.org/TR/REC-CSS1-961217

Sets the right margin of an element to 12.3% of the parent element's width. Negative values are allowed but may have implementation-specific limits.

```css
  H1 { margin-right: 12.3% }

```

--------------------------------

### CSS font set for multilingual text

Source: https://www.w3.org/TR/REC-CSS1-961217

Defines a font-family list for text containing Latin, Japanese, and mathematical symbols. The browser tries each font in order to find a glyph for a character.

```css
  BODY { font-family: Baskerville, Mincho, Symbol, serif }

```

--------------------------------

### Clear floating elements with CSS 'clear' property

Source: https://www.w3.org/TR/REC-CSS1-961217

Moves H1 elements below any floating element on the left side, preventing floating elements from appearing on that side.

```css
  H1 { clear: left }

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.