csswg-drafts/css2/intro.src at b9459027d99a176438ee1e4b807e5c85cb26753e · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: intro.src,v 1.10 1997-11-05 14:32:12 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Introduction to CSS2</TITLE>
<LINK rel="next" href="convent.html">
<LINK rel="previous" href="about.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Introduction to CSS2</H1>
<H2>A brief CSS2 tutorial</H2>
<P> In this tutorial, we show how easy it can be to design simple
style sheets. For this tutorial, you will need to know a little
<a rel="biblioentry" href="./refs.html#ref-HTML40">[HTML40]</a>
and some basic desktop publishing terminology.

<P>We begin with the following (tiny) HTML document:

<PRE>
&lt;HTML&gt;
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
  &lt;BODY&gt;
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>To set the text color of the H1 elements to blue, you can write the
following CSS rule:

<PRE>
  H1 { color: blue }
</PRE>

<P>The <a rel="biblioentry" href="./refs.html#ref-HTML40">[HTML40]</a>
specification defines how style sheet rules may be specified for HTML
documents: either within the HTML document, or via an external style
sheet. For maximum flexibility, we recommend that authors specify
external style sheets; they may be changed without modifying the
source HTML document, and they may be shared among several documents.

<P>In our example, we define our style sheet in the file
<samp>bach.css</samp>, and associate it with the source HTML document
via the LINK element:

<PRE class="example">
&lt;HTML&gt;
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
  &lt;LINK rel="stylesheet" href="bach.css" type="text/css"&gt;
  &lt;BODY&gt;
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>The LINK elements specifies:

<ul>
<li> the type of link: to a "stylesheet".
<li> the location of the stylesheet via a URL. Hhere, the file
<samp>bach.css</samp> in the same directory as the source HTML document.
<li>the type of style sheet being linked: "text/css".
</ul>

<P>A CSS rule consists of two main parts: <a
href="selector.html">selector</a> ('H1') and declaration ('color:
blue'). The declaration has two parts: property ('color') and value
('blue'). While the example above tries to influence only one of the
properties needed for rendering an HTML document, it qualifies as a
style sheet on its own. Combined with other style sheets (one
fundamental feature of CSS is that style sheets are combined) it will
determine the final presentation of the document.

<P>The <a href="selector.html">selector</a> is the link between the
HTML document and the style sheet; all <a rel="biblioentry"
href="./refs.src#ref-HTML40">[HTML40]</a> element types are possible
selectors.

<P> The <span class="propinst-color">'color'</span> property is just
one of around 100 properties defined in this specification that
determine the presentation of an HTML document.  This specification
includes a <a href="./sample.html">sample style sheet</a> that
describes how HTML elements should be rendered by default.

<P>Let's extend our example to include a simple list of
three favorite Bach compositions:

<PRE class="example">
&lt;HTML&gt;
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
  &lt;LINK rel="stylesheet" href="bach.css" type="text/css"&gt;
  &lt;BODY&gt;
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
    &lt;P&gt;Johann Sebastian Bach was a prolific composer. Some
    Bach compositions that the editors prefer include:
    &lt;UL&gt;
    &lt;LI&gt; Mass in B-minor
    &lt;LI&gt; The Well-Tempered Clavier
    &lt;LI&gt; The Brandenburg Concertos
    &lt;/UL&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>


<P>With CSS2, authors may specify the exact formatting of lists: the
indentation of the list items, the separation of the list items, the
style of the bullet (for unordered lists), the type of numbering (for
ordered lists), etc. (see the section on <a
href="lists.html">lists</a> for more information). In this example,
we specify the bullet style for each list item to be a PNG image
named "bach.png":

<PRE class="example">
   UL { list-style-image: url(bach.png) }
</PRE>

<!-- Add image, printing, info, positioning, fonts -->
<H2>Design principles behind CSS2</H2>

<UL>
<LI>backward compatibility
<LI>complementary to structured documents
<LI>cascading
<LI>platform  &amp; device independence
<LI>accessibility
<LI>maintainability
<LI>network performance
</UL>

<P><EM>This section will be expanded</EM>

</BODY>
</HTML>