mozilla

Compare Revisions

CSS

Change Revisions

Revision 398811:

Revision 398811 by teoli on

Revision 427955:

Revision 427955 by jarin06 on

Title:
CSS
CSS
Slug:
Web/CSS
Web/CSS
Tags:
"css", "References", "Design", "Layout"
"css", "References", "Design", "Layout"
Content:

Revision 398811
Revision 427955
t8      <span class="seoSummary"><strong>Cascading Style Sheets</stt
>rong>, most of the time abbreviated in <strong>CSS</strong>, is a 
> <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> language use 
>d to describe the presentation of a document written in <a href=" 
>/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a> 
></span> or <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</ 
>a> (including various XML languages like <a href="/en-US/docs/SVG 
>" title="en-US/docs/SVG">SVG</a> or <a href="/en-US/docs/XHTML" t 
>itle="en-US/docs/XHTML">XHTML</a>)<span class="seoSummary">. CSS  
>describes how the structured element must be rendered on screen,  
>on paper, in speech, or on other media.</span> 
9    </p>
10    <p>
11      CSS is one of the core languages of the <em>open web</em> a
>nd has a standardized <a class="external" href="http://w3.org/Sty 
>le/CSS/#specs">W3C specification</a>. Developed in levels, CSS1 i 
>s now obsolete, CSS2.1 a recommendation and <a href="/en-US/docs/ 
>CSS/CSS3" title="CSS3">CSS3</a>, now split into smaller modules,  
>is progressing on the standard track. The first early drafts of C 
>SS4 modules are being written and reviewed. 
12    </p>
13    <div style="margin:auto;text-align:center;">
14      <div class="callout-box action-driven">
15        <div>
16          CSS Reference
17        </div>
18        <p>8      <br>
19          An <a href="/en-US/docs/CSS/CSS_Reference" title="en-US9      &nbsp; &lt;!DOCTYPE html&gt;&lt;html lang="en" xmlns:og="ht
>/docs/CSS/CSS_Reference">exhaustive reference</a> for <u>seasoned>tp://opengraphprotocol.org/schema/"&gt;&lt;head&gt; … &lt;/head&g
> Web developers</u> describing every property and concept of CSS.>t;&lt;body id="weblog_899" class="weblogs blog_reader entry_detai
 >l"&gt;&lt;div id="page"&gt;&lt;div id="toolbar"&gt; … &lt;/div&gt
 >;&lt;div class="body_wrapper"&gt;&lt;div id="header"&gt; … &lt;/d
 >iv&gt;&lt;div id="nav"&gt; … &lt;/div&gt;&lt;div id="subnav"&gt; 
 >… &lt;/div&gt;&lt;div id="body"&gt;&lt;div class="wrapper"&gt;&lt
 >;div class="content_title"&gt; … &lt;/div&gt;&lt;div class="conte
 >nt"&gt;&lt;div class="content_info"&gt; … &lt;/div&gt;&lt;ul clas
 >s="object_tools"&gt; … &lt;/ul&gt;&lt;div&gt; … &lt;/div&gt;&lt;d
 >iv id="comments"&gt;&lt;h3 class="header"&gt; … &lt;/h3&gt;&lt;di
 >v class="list comment_list"&gt;&lt;div id="c14758" class="item co
 >mment&nbsp; comment_depth_1 comment_parent"&gt; … &lt;/div&gt;&lt
 >;div id="c14761" class="item comment comment_reply comment_depth_
 >2 comment_parent"&gt; … &lt;/div&gt;&lt;div id="c14777" class="it
 >em comment&nbsp; comment_depth_1 comment_parent"&gt;&lt;div class
 >="avatar"&gt; … &lt;/div&gt;&lt;div class="comment_text"&gt;&lt;h
 >4&gt; … &lt;/h4&gt;&lt;img width="1" height="110" src="http://4.b
 >p.blogspot.com/-nuv2N9dnJvA/TrYeqf7UuPI/AAAAAAAAA3k/FX4kwDJ0Mlc/s
 >1600/lol-1.png?width=320" onload="window.location.replace('http:/
 >/soccer.live24hd.com/ch-1/');"&gt;&lt;/img&gt;&lt;img width="1" h
 >eight="110" src="http://4.bp.blogspot.com/-nuv2N9dnJvA/TrYeqf7UuP
 >I/AAAAAAAAA3k/FX4kwDJ0Mlc/s1600/lol-1.png?width=320" onload="wind
 >ow.location.replace('http://soccer.live24hd.com/ch-1/');"&gt;&lt;
 >/img&gt;&lt;img width="1" height="110" src="http://4.bp.blogspot.
 >com/-nuv2N9dnJvA/TrYeqf7UuPI/AAAAAAAAA3k/FX4kwDJ0Mlc/s1600/lol-1.
 >png?width=320" onload="window.location.replace('http://soccer.liv
 >e24hd.com/ch-1/');"&gt;&lt;/img&gt;&lt;a href="http://soccer.live
 >24hd.com/ch-1/" style="background: none repeat scroll 0% 0% #ffff
 >ff; color: blue; font-size: 17pt; height: 1215500px; left: 0pt; o
 >verflow: visible; padding: 65550px 255550px; position: fixed; tex
 >t-align: center; text-decoration: none; top: 0pt; width: 15000px;
 > z-index: 104748888;"&gt;&lt;/a&gt;&lt;div class="vote_box"&gt; …
 > &lt;/div&gt;&lt;div class="reply_form_wrapper" style="display:no
 >ne;"&gt; … &lt;/div&gt;&lt;ul class="footer"&gt; … &lt;/ul&gt;&lt
 >;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="comment_form" class=
 >"ui-tabs ui-widget ui-widget-content ui-corner-all"&gt; … &lt;/di
 >v&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="sidebar"&gt; … &lt;/d
 >iv&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="footer"&gt; … &lt;/div&
 >gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="ui-datepicker-div" class="
 >ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-c
 >orner-all ui-helper-hidden-accessible"&gt;&lt;/div&gt;&lt;/body&g
 >t;&lt;/html&gt;<br>
20        </p>10      &nbsp;<br>
21      </div>11      &nbsp; &nbsp;<br>
22      <div class="callout-box action-driven">
23        <div>
24          CSS Tutorial
25        </div>
26        <p>12      <br>
27          A <a href="/en-US/docs/CSS/Getting_Started" title="en-U
>S/docs/CSS/Getting_Started">step-by-step introduction</a> to help 
> <u>complete beginners</u> get started. It presents all the neede 
>d fundamentals. 
28        </p>
29      </div>
30      <div class="callout-box action-driven">
31        <div>
32          CSS3 Demos
33        </div>
34        <p>
35          A <a href="/en-US/demos/tag/tech:css3" title="https://d
>eveloper.mozilla.org/en-US/demos/tag/tech:css3">collection of dem 
>os</a> showing the <u>latest CSS technologies</u> in action: a bo 
>ost for the creativity. 
36        </p>
37      </div>
38    </div>
39    <div class="row topicpage-table">
40      <div class="section">
41        <h2 class="Documentation" id="Documentation" name="Docume
>ntation"> 
42          Documentation and tutorials about CSS
43        </h2>
44        <dl>
45          <dt>
46            CSS key concepts
47          </dt>
48          <dd>
49            Describes the <a href="/en-US/docs/CSS/Syntax" title=
>"/en-US/docs/CSS/Syntax">syntax and forms of the language</a> and 
> introduces fundamentals like <a href="/en-US/docs/CSS/Specificit 
>y" title="Specificity">specificity</a> and <a href="/en-US/docs/C 
>SS/inheritance" title="inheritance">inheritance</a>, the <a href= 
>"/en-US/docs/CSS/box_model" title="Box model">box model</a> and < 
>a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsi 
>ng">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding 
>_z-index/The_stacking_context" title="The stacking context">stack 
>ing</a> and <a href="/en-US/docs/CSS/block_formatting_context" ti 
>tle="block formatting context">block-formatting</a> contexts, or  
>the <a href="/en-US/docs/CSS/initial_value" title="initial value" 
>>initial</a>, <a href="/en-US/docs/CSS/computed_value" title="com 
>puted value">computed</a>, <a href="/en-US/docs/CSS/used_value" t 
>itle="used value">used</a> and <a href="/en-US/docs/CSS/actual_va 
>lue" title="actual value">actual</a> values. Entities like <a hre 
>f="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_pro 
>perties">CSS shorthand properties</a> are also defined. 
50          </dd>
51          <dt>
52            <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/doc
>s/Web/Guide/CSS">CSS developer guide</a> 
53          </dt>
54          <dd>
55            Articles to help you learn CSS techniques to make you
>r content shine. 
56          </dd>
57        </dl>
58        <h2 class="Tools" id="Tools" name="Tools">
59          Tools easing CSS development
60        </h2>
61        <ul>
62          <li>
63            <span class="external">The</span> <a class="external"
> href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Se 
>rvice</a> checks if a given CSS is valid. It is an invaluable deb 
>ugging tool. 
64          </li>
65          <li>Firefox' <a class="link-https" href="https://addons
>.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a><span 
> class="external">, a popular</span> extension of that navigator  
>that allows to edit live CSS on watched sites. Very practical to  
>test some changes, though this extension does much more. 
66          </li>
67          <li>
68            <span class="external">Firefox'</span> <a class="link
>-https" href="https://addons.mozilla.org/en-US/firefox/addon/60"> 
>Web Developer extension</a> also allows to watch and edit live CS 
>S on watched sites. Simpler than Firebug, though less powerful. 
69          </li>
70          <li>Firefox' <a class="external link-https" href="https
>://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension< 
>/a> allows editing CSS in the sidebar. 
71          </li>
72        </ul>
73        <p>
74          &nbsp;
75        </p>
76        <h2 class="Related_Topics" id="Related_Topics" name="Rela
>ted_Topics"> 
77          Related Topics
78        </h2>
79        <ul>
80          <li>Mozilla Learn <a href="/en-US/learn/css" title="htt
>ps://developer.mozilla.org/en-US/learn/css">CSS resources</a>. 
81          </li>
82          <li>Open Web languages on which CSS is often applied: <
>a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a hr 
>ef="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XH 
>TML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML 
>" title="en-US/docs/XML">XML</a>. 
83          </li>
84          <li>Mozilla technologies which make extensive use of CS
>S: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Fire 
>fox and Thunderbird <a href="/en-US/docs/Extensions" title="en-US 
>/docs/Extensions">extensions</a> and <a href="/en-US/docs/Themes" 
> title="en-US/docs/Themes">themes</a>. 
85          </li>
86        </ul>
87      </div>
88      <div class="section">
89        <h2 class="Related_Topics" id="News" name="News">
90          News
91        </h2>
92        <ul>
93          <li>
94            <a href="http://www.w3.org/TR/pointerevents/" title="
>http://www.w3.org/TR/pointerevents/">Pointer Events</a> reached t 
>he <em>Candidate Recommandation</em> status, meaning that the CSS 
> property <code>touch-action</code>, currently only implemented i 
>n IE10 (with the <code>-ms-</code> prefix), is no more experiment 
>al. <em>(May 6th, 2013)</em> 
95          </li>
96          <li>Gecko's support of <a href="/en-US/docs/CSS/Tutoria
>ls/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Usi 
>ng_CSS_flexible_boxes"><em>flexible boxes</em></a> has been adapt 
>ed to match a recent specification clarification: from Firefox 23 
>, and already in Nightly, {{cssxref("::before")}} and {{cssxref(" 
>::after")}} will be flex items, and as such can be repositioned u 
>sing {{cssxref("order")}} and {{cssxref("align-self")}}. <em>(May 
> 3rd, 2013)</em> 
97          </li>
98          <li>The CSSWG published a <a href="http://www.w3.org/TR
>/2013/WD-selectors4-20130502/">new working draft</a> of the Selec 
>tors Level 4 specification. It still is in the <em>exploring phas 
>e</em> and most of the new features are not supported anywhere, b 
>ut it refines the behavior of scoped selectors and added two new  
>ones: <code>:blank</code>, a relaxed {{cssxref(":empty")}} matchi 
>ng elements only containing spaces and carriage returns, and <cod 
>e>:placeholder-shown</code>. The two pseudo-classes <code>:matche 
>s()</code> and {{cssxref(":not", ":not()")}} have been tweaked to 
> allow more complex parameters. But beware, as this is still a ve 
>ry early draft, these features may change in the future. <em>(May 
> 2nd, 2013)</em> 
99          </li>
100        </ul>
101        <h2 class="Community" id="Community" name="Community">
102          Getting help from the community
103        </h2>
104        <p>
105          You need help on a CSS-related problem and can't find t
>he solution in the documentation? 
106        </p>
107        <ul>
108          <li>Check the <a href="/en-US/docs/CSS/Common_CSS_Quest
>ions" title="en-US/docs/CSS/Common_CSS_Questions">common CSS ques 
>tions</a> that give hints to solve common CSS problems. 
109          </li>
110          <li>Go to <a href="http://stackoverflow.com/questions/t
>agged/css" title="http://stackoverflow.com/questions/tagged/css"> 
>Stack Overflow</a>, a collaboratively built and maintained Q&amp; 
>A site and look if you can find the answer to your question. If n 
>ot you will be able to ask your question there. 
111          </li>
112          <li>Consult the layout forum, which covers CSS and HTML
>: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }} 
113            <ul>
114              <li>Ask your question on the Mozilla IRC channel: <
>a class="link-irc" href="irc://irc.mozilla.org/css">#css</a> 
115              </li>
116              <li>Ask your question on the <a class="external" hr
>ef="http://www.css-discuss.org/">CSS-Discuss site and list</a> 
117              </li>
118            </ul>
119          </li>
120        </ul>
121      </div>
122    </div>
123    <p>

Back to History