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
|
---
title: CSS first steps
slug: Learn/CSS/First_steps
translation_of: Learn/CSS/First_steps
---
<div>{{LearnSidebar}}</div>
<p class="summary">CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.</p>
<h2 id="Prerequisites">Prerequisites</h2>
<p>Before starting this module, you should have:</p>
<ol>
<li>Basic familiarity with using computers, and using the Web passively (i.e. looking at it, consuming the content.)</li>
<li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
<li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
</ol>
<div class="note">
<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Guides">Guides</h2>
<p>This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.</p>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></dt>
<dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></dt>
<dd>In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></dt>
<dd>Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></dt>
<dd>We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></dt>
<dd>With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This article gives you a chance to do that.</dd>
</dl>
<h2 id="See_also">See also</h2>
<dl>
<dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
<dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd>
</dl>
|
