Cascading Style Sheets, level 1

https://www.w3.org/TR/REC-CSS1-961217
Admin
Cascading Style Sheets, level 1 (CSS1) is a style sheet mechanism that allows authors and readers to...
Tokens:38,947
Snippets:306
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### 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;
  } 

```

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

### 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>
```

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

### 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>
```

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

### 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 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;
  }

```

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

### 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 }

```

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

### 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 }

```

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

### 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 }

```

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

### 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 }

```

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

### 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.
```

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

### 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**

```

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

### 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;
  }

```

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

### 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%;
  } 

```

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

### 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 }

```

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

### 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 }

```
Tokens:
Raw