mozilla

Revision 24669 of CSS

  • Revision slug: CSS
  • Revision title: CSS
  • Revision id: 24669
  • Created:
  • Creator: Dria
  • Is current revision? No
  • Comment

Revision Content

"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another feature article or tutorial, should one exist. Otherwise, just comment it out

Getting Started
A guided tutorial that will help you get started with Cascading Style Sheets.

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like XHTML or SVG). In XUL-based products like the Mozilla Suite, Firefox or Thunderbird it is also used for styling application's user interface. For example, Themes make heavy use of CSS to skin the application. CSS is a W3C specification.

Newest Articles (View All)

Using URL values for the cursor property
{{wiki.template('Added-date', [ "June 9th, 2005" ])}} Gecko 1.8 (Firefox 1.1, SeaMonkey 1.0) supports URL values for the CSS 2/2.1 cursor property. This allows specifying arbitrary images as mouse cursors — any image format supported by Gecko can be used.
Common CSS Questions
{{wiki.template('Added-date', [ "June 2, 2005" ])}} Answers (and other pointers) for some of the common CSS questions we see.
Issues Arising From Arbitrary-Element hover
{{wiki.template('Added-date', [ "May 2, 2005" ])}} Many authors make use of the CSS2 pseudo-class :hover to style their links, but advancing CSS support in browsers has caused some unexpectedly aggressive hovering behavior on some pages.
Consistent List Indentation
{{wiki.template('Added-date', [ "April 30, 2005" ])}} Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.
Understanding Underlines
{{wiki.template('Added-date', [ "April 29, 2005" ])}} Understanding the CSS declaration text-decoration: underline; and how it is supposed to work according to the CSS standard can be tricky. Learn how to properly use text-decorations in CSS compliant browsers as well as other not so compliant browsers.
Styling Abbreviations and Acronyms
{{wiki.template('Added-date', [ "April 29, 2005" ])}} The HTML elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors. See how you can take control of their presentation without sacrificing the benefits these elements provide.
Underscores in class and ID Names
{{wiki.template('Added-date', [ "April 28, 2005" ])}} In the authoring of both CSS and JavaScript/DOM (otherwise known as DHTML) routines, it is a near-certainty that class and id names will be used to identify elements. We have discovered, however, that many authors are running into trouble with class and id names because they're used to the bugs of browsers that don't fully support open standards.
Liberty! Equality! Validity!
{{wiki.template('Added-date', [ "April 28, 2005" ])}} Document validation is the single most important tool an author has available. Validating not only makes sure your documents are well-formed, but makes them more robust and ready for the future. Get the details on common validation errors and how to fix your documents so you can avoid them.
Incorrect MIME Type for CSS Files
{{wiki.template('Added-date', [ "April 20, 2005" ])}} You may come across a web page using CSS with poor layout with Netscape 7.x or any Gecko-based browser such as Mozilla, while MSIE displays it nicely. One of the common reasons for this is an improper configuration of the web server hosting the CSS file.
Images, Tables, and Mysterious Gaps
{{wiki.template('Added-date', [ "April 20, 2005" ])}} Due to the rise of standards-based browsers that lay out pages using HTML and CSS, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen. See some approaches to dealing with these new issues.

All Articles...

References (View All)

All References...

Examples (View All)

All Examples...

Community

Tools

Other Resources (View All)

All Other Resources...

Related Topics

Extensions, HTML, Themes, XHTML, XML, XUL

Categories

Interwiki Language Links


{{ wiki.languages( { "de": "de/CSS", "fr": "fr/CSS", "ja": "ja/CSS", "pl": "pl/CSS" } ) }}

Revision Source

<p><span class="comment">"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another feature article or tutorial, should one exist.  Otherwise, just comment it out</span>
</p>
<div class="callout-box"><b><a href="en/CSS/Getting_Started">Getting Started</a></b><br>
<small>A guided tutorial that will help you get started with Cascading Style Sheets.</small></div>
<div>
<p><b>Cascading Style Sheets</b> (<b>CSS</b>) is a stylesheet language used to describe the presentation of a document written in <a href="en/HTML">HTML</a> or <a href="en/XML">XML</a> (including various XML languages like XHTML or <a href="en/SVG">SVG</a>).  In <a href="en/XUL">XUL</a>-based products like the Mozilla Suite, Firefox or Thunderbird it is also used for styling application's user interface. For example, <a href="en/Themes">Themes</a> make heavy use of CSS to skin the application.  CSS is a <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.
</p>
</div>
<table class="topicpage-table">
<tbody><tr><td>
<h4 name="Newest_Articles_.28View_All.29"> Newest Articles <span class="alllinks">(<a href="en/CSS/Articles">View All</a>)</span> </h4>
<dl><dt> <a href="en/Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "June 9th, 2005" ])}} <a href="en/Gecko">Gecko</a> 1.8 (Firefox 1.1, SeaMonkey 1.0) supports URL values for the <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS 2/2.1 cursor property</a>. This allows specifying arbitrary images as mouse cursors — any image format supported by Gecko can be used.</small>
</dd></dl>
<dl><dt> <a href="en/Common_CSS_Questions">Common CSS Questions</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "June 2, 2005" ])}} Answers (and other pointers) for some of the common CSS questions we see.</small>
</dd></dl>
<dl><dt> <a href="en/Issues_Arising_From_Arbitrary-Element_hover">Issues Arising From Arbitrary-Element <code>hover</code></a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "May 2, 2005" ])}} Many authors make use of the CSS2 pseudo-class <code>:hover</code> to style their links, but advancing CSS support in browsers has caused some unexpectedly aggressive hovering behavior on some pages.</small>
</dd></dl>
<dl><dt> <a href="en/Consistent_List_Indentation">Consistent List Indentation</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "April 30, 2005" ])}} Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.</small> 
</dd></dl>
<dl><dt> <a href="en/Understanding_Underlines">Understanding Underlines</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "April 29, 2005" ])}} Understanding the CSS declaration text-decoration: underline; and how it is supposed to work according to the CSS standard can be tricky. Learn how to properly use text-decorations in CSS compliant browsers as well as other not so compliant browsers.</small> 
</dd></dl>
<dl><dt> <a href="en/Styling_Abbreviations_and_Acronyms">Styling Abbreviations and Acronyms</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "April 29, 2005" ])}} The HTML elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors. See how you can take control of their presentation without sacrificing the benefits these elements provide.</small>
</dd></dl>
<dl><dt> <a href="en/Underscores_in_class_and_ID_Names">Underscores in <code>class</code> and <code>ID</code> Names</a>
</dt><dd> <small>{{wiki.template('Added-date', [ "April 28, 2005" ])}} In the authoring of both CSS and JavaScript/DOM (otherwise known as DHTML) routines, it is a near-certainty that class and id names will be used to identify elements. We have discovered, however, that many authors are running into trouble with class and id names because they're used to the bugs of browsers that don't fully support open standards.</small>
</dd></dl>
<dl><dt> <a href="en/Liberty!_Equality!_Validity!">Liberty! Equality! Validity!</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "April 28, 2005" ])}} Document validation is the single most important tool an author has available.  Validating not only makes sure your documents are well-formed, but makes them more robust and ready for the future.  Get the details on common validation errors and how to fix your documents so you can avoid them.</small> 
</dd></dl>
<dl><dt> <a href="en/Incorrect_MIME_Type_for_CSS_Files">Incorrect MIME Type for CSS Files</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "April 20, 2005" ])}} You may come across a web page using CSS with poor layout with Netscape 7.x or any Gecko-based browser such as Mozilla, while MSIE displays it nicely. One of the common reasons for this is an improper configuration of the web server hosting the CSS file.</small> 
</dd></dl>
<dl><dt> <a href="en/Images%2c_Tables%2c_and_Mysterious_Gaps">Images, Tables, and Mysterious Gaps</a><br>
</dt><dd> <small>{{wiki.template('Added-date', [ "April 20, 2005" ])}} Due to the rise of standards-based browsers that lay out pages using HTML and CSS, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen.  See some approaches to dealing with these new issues.</small> 
</dd></dl>
<p><span class="alllinks"><a href="en/CSS/Articles">All Articles...</a></span>
</p>
</td>
<td>
<h4 name="References_.28View_All.29"> References <span class="alllinks">(<a href="en/CSS/References">View All</a>)</span> </h4>
<ul><li> W3C specs: <a class="external" href="http://www.w3.org/TR/CSS1">CSS1</a>, <a class="external" href="http://www.w3.org/TR/CSS21/">CSS2.1</a> (candidate), CSS3 (<a class="external" href="http://www.w3.org/Style/CSS/current-work">under development</a>)
</li><li> <a class="external" href="http://www.w3schools.com/css/css_reference.asp">W3 Schools CSS2 Reference</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/web-developer/bugspecs/REC-CSS1.html">Bug-Annotated CSS1 Specification</a>
</li></ul>
<p><span class="alllinks"><a href="en/CSS/References">All References...</a></span>
</p>
<h4 name="Examples_.28View_All.29"> Examples <span class="alllinks">(<a href="en/CSS/Examples">View All</a>)</span> </h4>
<ul><li> <a href="en/Useful_CSS_tips">Useful CSS tips</a>
</li></ul>
<p><span class="alllinks"><a href="en/CSS/Examples">All Examples...</a></span>
</p>
<h4 name="Community"> Community </h4>
<ul><li> <a class="external" href="http://mail.mozilla.org/listinfo/mozilla-style">Mailing List</a>, <a class="external" href="news://netscape.public.mozilla.style">Newsgroup</a>
</li><li> <a class="external" href="irc://irc.mozilla.org/css">IRC Channel</a>
</li><li> <a class="external" href="http://www.css-discuss.org/">CSS Discuss Site/List</a>
</li></ul>
<h4 name="Tools"> Tools </h4>
<ul><li> <a class="external" href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</li><li> <a class="external" href="https://addons.mozilla.org/extensions/moreinfo.php?id=165">Checky</a> (Firefox Extension)
</li><li> <a class="external" href="https://addons.mozilla.org/extensions/moreinfo.php?id=179">EditCSS</a> (Firefox Extension)
</li><li> <a class="external" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60">Web Developer</a> (Firefox Extension)
</li></ul>
<h4 name="Other_Resources_.28View_All.29"> Other Resources <span class="alllinks">(<a href="en/CSS/Other_Resources">View All</a>)</span> </h4>
<ul><li> <a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a>
</li><li> <a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a>
</li><li> <a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a>
</li><li> <a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a>
</li><li> <a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a>
</li></ul>
<p><span class="alllinks"><a href="en/CSS/Other_Resources">All Other Resources...</a></span>
</p>
<h4 name="Related_Topics"> Related Topics </h4>
<dl><dd> <a href="en/Extensions">Extensions</a>, <a href="en/HTML">HTML</a>, <a href="en/Themes">Themes</a>, <a href="en/XHTML">XHTML</a>, <a href="en/XML">XML</a>, <a href="en/XUL">XUL</a>
</dd></dl>
</td>
</tr>
</tbody></table>
<p><span class="comment">Categories</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p><p><br>
</p>{{ wiki.languages( { "de": "de/CSS", "fr": "fr/CSS", "ja": "ja/CSS", "pl": "pl/CSS" } ) }}
Revert to this revision