Compare Revisions

Getting started with CSS

Change Revisions

Revision 74863:

Revision 74863 by Verruckt on

Revision 74864:

Revision 74864 by Hazyana on

Title:
Getting Started (CSS Tutorial)
Getting Started (CSS Tutorial)
Slug:
CSS/Getting_Started
CSS/Getting_Started
Tags:
css, CSS:Getting_Started
css, CSS:Getting_Started
Content:

Revision 74863
Revision 74864
n7    <h3 name="Introduction">n
8      Introduction
9    </h3>
10    <p>
11      This tutorial introduces you to Cascading Style Sheets (CSS
>). 
12    </p>7    <p>
8      /*NAUTICAL-TWILIGHT*/ /*Hed Kandi by Tisay*/
13    <p>9    </p>
14      It guides you through the basic features of CSS with practi
>cal examples that you can try for yourself on your own computer.  
>It is in two parts. 
15    </p>10    <p>
16    <ul>11      /*page background*/ body {
17      <li>Part I illustrates the standard features of CSS that wo
>rk in Mozilla browsers and also in most other modern browsers. 
18      </li>
19    </ul>
20    <ul>
21      <li>Part II contains some examples of special features that
> work in Mozilla but do not necessarily work in other environment 
>s. 
22      </li>
23    </ul>
24    <p>12    </p>
25      The tutorial is based on the <a class="external" href="http13    <pre class="eval">
>://www.w3.org/TR/CSS21/">CSS 2.1 Specification</a>. 
14 background-image: url(http://img144.imageshack.us/img144/8787/he
 >dkandibeachhousebyplewo2.jpg);
15 background-position: center;
16 background-repeat: no-repeat;
17 background-attachment: fixed;
18 background-color:#000000 ;
19</pre>
26    </p>20    <p>
27    <h4 name="Who_should_use_this_tutorial.3F">21      } /*global fonts*/ .usercontent {
28      Who should use this tutorial?
29    </h4>
30    <p>22    </p>
31      This tutorial is mostly for beginners in CSS, but you can a23    <pre class="eval">
>lso use it if you have some experience in CSS. 
24 font-family: trebuchet;
25 color: ffffff;
26 text-transform: uppercase;
27</pre>
32    </p>28    <p>
29      } /*global links*/ .usercontent a, .usercontent a:link, .us
 >ercontent a:visited, .usercontent a:hover, .usercontent a:active 
 >{
33    <p>30    </p>
34      If you are a beginner in CSS, use Part I of this tutorial t31    <pre class="eval">
>o understand CSS and learn how to use it. Then use Part II to und 
>erstand the scope of CSS in Mozilla. 
32 text-decoration: underline;
33 color: 8B0A50;
34</pre>
35    </p>35    <p>
36      } .usercontent a:hover {
36    <p>37    </p>
37      If you know some CSS, you can skip the parts of the tutoria38    <pre class="eval">
>l that you already know, and only use the parts that interest you 
>. 
39 text-decoration: none;
40 color: ffffff;
41</pre>
38    </p>42    <p>
43      } /*modules*/ .commonbox { /*box*/
39    <p>44    </p>
40      If you are experienced in CSS but not in Mozilla, you can s45    <pre class="eval">
>kip to Part II. 
46 border-width: 0px;
47 border-color: none;
48 border-style: none;
49 background-color: transparent;
50</pre>
41    </p>51    <p>
42    <h4 name="What_do_you_need_before_you_start.3F">52      } .commonbox h1, .commonbox h2 { /*header*/
43      What do you need before you start?
44    </h4>
45    <p>53    </p>
46      To get the most from this tutorial, you need an editor for 54    <pre class="eval">
>text files and a Mozilla browser (Firefox or Mozilla Suite). You  
>must also know how to use them in basic ways. 
55 font-family: trebuchet;
56 color: ffffff;
57 text-transform: uppercase;
58 background-color: CD1076;
59</pre>
47    </p>60    <p>
61      } .commonbox .viewall { /*viewall link*/
48    <p>62    </p>
49      If you do not want to edit files, then you can just read th63    <pre class="eval">
>e tutorial and look at the pictures, but that is a less effective 
> way for you to learn. 
64 font-family: trebuchet;
65 color: ffffff;
66 text-transform: uppercase;
67</pre>
50    </p>68    <p>
69      } .commonbox .imgblock75, .ir { /*photo blocks*/
51    <p>70    </p>
52      A few parts of the tutorial might require other Mozilla sof71    <pre class="eval">
>tware. Those parts are optional. If you do not want to download o 
>ther Mozilla software, then you can skip them. 
72 border-width: ;
73 border-color: ;
74 border-style: ;
75 background-color: ff6699;
76</pre>
53    </p>77    <p>
78      } .commonbox .dr { /*name bars below photo blocks*/
54    <p>79    </p>
55      <strong>Note:&nbsp;</strong> CSS provides ways to work with80    <pre class="eval">
> color, so parts of this tutorial depend on color. You can only u 
>se these parts of the tutorial easily if you have a color display 
> and normal color vision. 
81 font-family: trebuchet;
82 color: ffffff;
83 text-transform: uppercase;
84 background-color: ff6699;
85</pre>
56    </p>86    <p>
57    <h4 name="How_to_use_this_tutorial">87      } .commonbox .evenrow { /*even row*/
58      How to use this tutorial
59    </h4>
60    <p>88    </p>
61      To use this tutorial, read the pages carefully and in seque89    <pre class="eval">
>nce. If you miss a page, then you might find it difficult to unde 
>rstand later pages. 
90 background-color: transparent;
91</pre>
62    </p>92    <p>
93      } /*specific module boxes*/ .controlpanel { /*box*/
63    <p>94    </p>
64      On each page, use the <i>Information</i> section to underst95    <pre class="eval">
>and how CSS works. Use the <i>Action</i> section to try using CSS 
> on your own computer. 
96 border-width: ;
97 border-color: ;
98 border-style: ;
99 background-color: ;
100</pre>
65    </p>101    <p>
102      } .photos { /*box*/
66    <p>103    </p>
67      To test your understanding, take the challenge at the end o104    <pre class="eval">
>f each page. Solutions to some of the challenges are revealed on  
>later pages in the tutorial. 
105 border-width: ;
106 border-color: ;
107 border-style: ;
108 background-color: ;
109</pre>
68    </p>110    <p>
111      } .friends { /*box*/
69    <p>112    </p>
70      To understand CSS in more depth, read the information that 113    <pre class="eval">
>you find in boxes captioned <i>More details</i>. Use the links th 
>ere to find reference information about CSS. 
114 border-width: ;
115 border-color: ;
116 border-style: ;
117 background-color: ;
118</pre>
71    </p>119    <p>
72    <h3 name="Tutorial_Part_I">120      } .blogsreviews { /*box*/
73      Tutorial Part I
74    </h3>
75    <p>121    </p>
76      A basic step-by-step guide to CSS.122    <pre class="eval">
123 border-width: ;
124 border-color: ;
125 border-style: ;
126 background-color: ;
127</pre>
128    <p>
129      } .videos { /*box*/
130    </p>
131    <pre class="eval">
132 border-width: ;
133 border-color: ;
134 border-style: ;
135 background-color: ;
136</pre>
137    <p>
138      } .testimonialscomments { /*box*/
139    </p>
140    <pre class="eval">
141 border-width: ;
142 border-color: ;
143 border-style: ;
144 background-color: transparent;
145</pre>
146    <p>
147      } .moreabout { /*box*/
148    </p>
149    <pre class="eval">
150 border-width: ;
151 border-color: ;
152 border-style: ;
153 background-color: ;
154</pre>
155    <p>
156      } .fanof { /*box*/
157    </p>
158    <pre class="eval">
159 border-width: ;
160 border-color: ;
161 border-style: ;
162 background-color: ;
163</pre>
164    <p>
165      } .groups { /*box*/
166    </p>
167    <pre class="eval">
168 border-width: ;
169 border-color: ;
170 border-style: ;
171 background-color: ;
172</pre>
173    <p>
174      } .testimonials { /*box*/
175    </p>
176    <pre class="eval">
177 border-width: ;
178 border-color: ;
179 border-style: ;
180 background-color: ;
181</pre>
182    <p>
183      } .scrapbook { /*box*/
184    </p>
185    <pre class="eval">
186 border-width: ;
187 border-color: ;
188 border-style: ;
189 background-color: ;
190</pre>
191    <p>
192      } .myfans { /*box*/
193    </p>
194    <pre class="eval">
195 border-width: ;
196 border-color: ;
197 border-style: ;
198 background-color: ;
199</pre>
200    <p>
201      } .reviews { /*box*/
202    </p>
203    <pre class="eval">
204 border-width: ;
205 border-color: ;
206 border-style: ;
207 background-color: ;
208</pre>
209    <p>
210      } .blogs { /*box*/
211    </p>
212    <pre class="eval">
213 border-width: ;
214 border-color: ;
215 border-style: ;
216 background-color: ;
217</pre>
218    <p>
219      } /*control panel*/ .controlpanel .imgblock200 { /*primary 
 >photo border*/
220    </p>
221    <pre class="eval">
222 border-color: ;
223 border-style: ;
224</pre>
225    <p>
226      } .data { /*data answers*/
227    </p>
228    <pre class="eval">
229 font-family: trebuchet;
230 color: ffffff;
231 text-transform: uppercase;
232</pre>
233    <p>
234      } .controlpanel .q { /*data labels*/
235    </p>
236    <pre class="eval">
237 font-family: trebuchet;
238 color: ffffff;
239 text-transform: uppercase;
240</pre>
241    <p>
242      } .data a { /*data links*/
243    </p>
244    <pre class="eval">
245 font-family: trebuchet;
246 color: ffffff;
247 text-transform: uppercase;
248</pre>
249    <p>
250      } a.more { /*more about link*/
251    </p>
252    <pre class="eval">
253 font-family: trebuchet;
254 color: 8B0A50;
255 text-transform: uppercase;
256</pre>
257    <p>
258      }
n79      <li>n261      <li>controlPanelButtons a, #controlPanelButtons a:link, #co
 >ntrolPanelButtons a:visited { /*buttons*/
80        <b><a href="en/CSS/Getting_Started/What_is_CSS">What is C
>SS</a></b> 
81      </li>
82      <li>
83        <b><a href="en/CSS/Getting_Started/Why_use_CSS">Why use C
>SS</a></b> 
84      </li>
85      <li>
86        <b><a href="en/CSS/Getting_Started/How_CSS_works">How CSS
> works</a></b> 
87      </li>
88      <li>
89        <b><a href="en/CSS/Getting_Started/Cascading_and_inherita
>nce">Cascading and inheritance</a></b> 
90      </li>
91      <li>
92        <b><a href="en/CSS/Getting_Started/Selectors">Selectors</
>a></b> 
93      </li>
94      <li>
95        <b><a href="en/CSS/Getting_Started/Readable_CSS">Readable
> CSS</a></b> 
96      </li>
97      <li>
98        <b><a href="en/CSS/Getting_Started/Text_styles">Text styl
>es</a></b> 
99      </li>
100      <li>
101        <b><a href="en/CSS/Getting_Started/Color">Color</a></b>
102      </li>
103      <li>
104        <b><a href="en/CSS/Getting_Started/Content">Content</a></
>b> 
105      </li>
106      <li>
107        <b><a href="en/CSS/Getting_Started/Lists">Lists</a></b>
108      </li>
109      <li>
110        <b><a href="en/CSS/Getting_Started/Boxes">Boxes</a></b>
111      </li>
112      <li>
113        <b><a href="en/CSS/Getting_Started/Layout">Layout</a></b>
114      </li>
115      <li>
116        <b><a href="en/CSS/Getting_Started/Tables">Tables</a></b>
117      </li>
118      <li>
119        <b><a href="en/CSS/Getting_Started/Media">Media</a></b>
n122    <h3 name="Tutorial_Part_II">n264    <pre class="eval">
123      Tutorial Part II265 color: FFffff;
266 border-color: ffffff;
267 border-style: dotted;
268 background-color: FF007F;
269</pre>
124    </h3>270    <p>
125    <p>271      }
126      Examples that show the scope of CSS in Mozilla.
n129      <li>n274      <li>controlPanelButtons a:hover { /*buttons hover*/
130        <b><a href="en/CSS/Getting_Started/JavaScript">JavaScript
></a></b> 
t132      <li>t
133        <b><a href="en/CSS/Getting_Started/XBL_bindings">XBL bind
>ings</a></b> 
134      </li>276    </ol>
135      <li>277    <pre class="eval">
136        <b><a href="en/CSS/Getting_Started/XUL_user_interfaces">X278 color: #ffffff;
>UL user interfaces</a></b> 
137      </li>279 border-color: ;
138      <li>280 background-color: FF69B4;
139        <b><a href="en/CSS/Getting_Started/SVG_graphics">SVG grap281</pre>
>hics</a></b> 
140      </li>282    <p>
141      <li>283      }
142        <b><a href="en/CSS/Getting_Started/XML_data">XML data</a>284    </p>
></b> 
143      </li>
144    </ol>{{ wiki.languages( { "fr": "fr/CSS/Premiers_pas", "it": 
>"it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/C 
>SS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CS 
>S/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }} 

Back to History