mozilla

Revision 24723 of CSS

  • Revision slug: CSS
  • Revision title: CSS
  • Revision id: 24723
  • Created:
  • Creator: maitrey684
  • Is current revision? No
  • Comment 2 words added, 1 words removed

Revision Content

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.

Documentation

CSS Reference
A reference to CSS and extensions on Mozilla.
Using CSS transforms
An introduction to CSS transforms.
CSS transitions
Using CSS transitions.
CSS animations
Using CSS animations.
Media queries
How to use media queries to select style sheets based on details of the rendering device.
Using URL values for the cursor property
Gecko 1.8 (Firefox 1.5, 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.
CSS3 Columns
A short tutorial on using CSS3 columns.
Issues Arising From Arbitrary-Element hover
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
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.
Using dynamic styling information
How to obtain information on and manipulate styling via the DOM

View All...

Community

  • View Mozilla forums ...

{{ DiscussionList("dev-tech-css", "mozilla.dev.tech.css") }}

Tools

View All...

Related Topics

Extensions, HTML, Themes, XHTML, XML, XUL

 

Categories

Interwiki Language Links

 Lesson 1. If your style class is getting inherited from another class then use "!important" for the style that you don't want to get inherited.

Ex. width : 100px !important;

{{ languages( { "de": "de/CSS", "es": "es/CSS", "fr": "fr/CSS", "it": "it/CSS", "ja": "ja/CSS", "ko": "ko/CSS", "nl": "nl/CSS", "pl": "pl/CSS", "pt": "pt/CSS", "zh-cn": "cn/CSS", "zh-tw": "zh_tw/CSS" } ) }}

Revision Source

<div class="callout-box"><strong><a href="/en/CSS/Getting_Started" title="en/CSS/Getting_Started">Getting Started</a></strong><br>
A guided tutorial that will help you get started with Cascading Style Sheets.</div>
<div><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) is a stylesheet language used to describe the presentation of a document written in <a href="/en/HTML" title="en/HTML">HTML</a> or <a href="/en/XML" title="en/XML">XML</a> (including various XML languages like <a href="/en/XHTML" title="en/XHTML">XHTML</a> or <a href="/en/SVG" title="en/SVG">SVG</a>). In <a href="/en/XUL" title="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" title="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>.</div>
<table class="topicpage-table"> <tbody> <tr> <td> <h4 name="Documentation"><a href="/Special:Tags?tag=CSS&amp;language=en" title="Special:Tags?tag=CSS&amp;language=en">Documentation</a></h4> <dl> <dt><a href="/en/CSS_Reference" title="en/CSS_Reference">CSS Reference</a></dt> <dd>A reference to CSS and <a href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS_Reference/Mozilla_Extensions">extensions</a> on Mozilla.</dd> <dt><a class="internal" href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using CSS transforms">Using CSS transforms</a></dt> <dd>An introduction to CSS transforms.</dd> </dl> <dl> <dl> <dt><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a></dt> <dd>Using CSS transitions.</dd> <dt><a href="/en/CSS/CSS_animations" title="en/CSS/CSS animations">CSS animations</a></dt> <dd>Using CSS animations.</dd> </dl> <dl> <dl> <dt><a class="internal" href="/En/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></dt> <dd>How to use media queries to select style sheets based on details of the rendering device.</dd> </dl> <dl> <dt><a href="/en/Using_URL_values_for_the_cursor_property" title="en/Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a></dt> <dd><a href="/en/Gecko" title="en/Gecko">Gecko</a> 1.8 (Firefox 1.5, 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 <a href="/en/Gecko" title="en/Gecko">Gecko</a> can be used.</dd> </dl> <dl> <dt><a href="/en/CSS/CSS3_Columns" title="en/CSS3_Columns">CSS3 Columns</a></dt> <dd>A short tutorial on using CSS3 columns.</dd> </dl> <dl> <dt><a href="/en/Issues_Arising_From_Arbitrary-Element_hover" title="en/Issues_Arising_From_Arbitrary-Element_hover">Issues Arising From Arbitrary-Element <code>hover</code></a></dt> <dd>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.</dd> </dl> <dl> <dt><a href="/en/Consistent_List_Indentation" title="en/Consistent_List_Indentation">Consistent List Indentation</a></dt> <dd>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.</dd> <dt><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt> <dd>How to obtain information on and manipulate styling via the DOM</dd> </dl> <p><span class="alllinks"><a href="/Special:Tags?tag=CSS&amp;language=en" title="Special:Tags?tag=CSS&amp;language=en">View All...</a></span></p> </dl></dl></td> <td> <h4 name="Community">Community</h4> <ul> <li>View Mozilla forums ...</li> </ul> <p>{{ DiscussionList("dev-tech-css", "mozilla.dev.tech.css") }}</p> <ul> <li><a class="link-irc" href="irc://irc.mozilla.org/css">#css IRC channel</a></li> <li><a class="external" href="http://www.css-discuss.org/">CSS-Discuss site and list</a></li> </ul> <h4 name="Tools">Tools</h4> <ul> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a></li> <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a></li> </ul> <p><span class="alllinks"><a href="/Special:Tags?tag=CSS:Tools&amp;language=en" title="Special:Tags?tag=CSS:Tools&amp;language=en">View All...</a></span></p> <h4 name="Related_Topics">Related Topics</h4> <dl> <dd><a href="/en/Extensions" title="en/Extensions">Extensions</a>, <a href="/en/HTML" title="en/HTML">HTML</a>, <a href="/en/Themes" title="en/Themes">Themes</a>, <a href="/en/XHTML" title="en/XHTML">XHTML</a>, <a href="/en/XML" title="en/XML">XML</a>, <a href="/en/XUL" title="en/XUL">XUL</a></dd> </dl> </td> </tr> </tbody> </table> <p> </p> <p><span class="comment">Categories</span></p> <p><span class="comment">Interwiki Language Links</span></p> <p> <span style="font-size: large;"><span style="font-family: Verdana;"><strong>Lesson 1</strong></span></span>. If your style class is getting inherited from another class then use "!important" for the style that you don't want to get inherited.</p> <p><strong>Ex. width : 100px !important;</strong></p> <p>{{ languages( { "de": "de/CSS", "es": "es/CSS", "fr": "fr/CSS", "it": "it/CSS", "ja": "ja/CSS", "ko": "ko/CSS", "nl": "nl/CSS", "pl": "pl/CSS", "pt": "pt/CSS", "zh-cn": "cn/CSS", "zh-tw": "zh_tw/CSS" } ) }}</p>
Revert to this revision