aboutsummaryrefslogtreecommitdiff
path: root/files/ar/web/guide/css/getting_started/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
commit4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch)
treed4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/ar/web/guide/css/getting_started/index.html
parent33058f2b292b3a581333bdfb21b8f671898c5060 (diff)
downloadtranslated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip
initial commit
Diffstat (limited to 'files/ar/web/guide/css/getting_started/index.html')
-rw-r--r--files/ar/web/guide/css/getting_started/index.html43
1 files changed, 43 insertions, 0 deletions
diff --git a/files/ar/web/guide/css/getting_started/index.html b/files/ar/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..2d395bee37
--- /dev/null
+++ b/files/ar/web/guide/css/getting_started/index.html
@@ -0,0 +1,43 @@
+---
+title: Getting started with CSS
+slug: Web/Guide/CSS/Getting_started
+tags:
+ - Beginner
+ - CSS
+ - 'CSS:Getting_Started'
+ - Guide
+ - Needs
+ - NeedsBeginnerUpdate
+ - NeedsTranslation
+ - NeedsUpdate
+ - TopicStub
+ - Web
+translation_of: Learn/CSS/First_steps
+---
+<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers. </span></p>
+<p>The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p>
+<nav class="fancyTOC">
+ <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav>
+<h2 id="What_you_need_to_get_started">What you need to get started</h2>
+<ul>
+ <li>A text editor</li>
+ <li>A modern browser</li>
+ <li>Some experience working with a text editor and browser</li>
+</ul>
+<p>Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.</p>
+<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p>
+<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2>
+<p>To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.</p>
+<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3>
+<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p>
+<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p>
+<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p>
+<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3>
+<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p>
+<ol>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li>
+</ol>