Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: CSS FAQ.

CSS FAQ: Difference between revisions

From MoodleDocs
 
(40 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{stub}}
 


== What is CSS? ==
== What is CSS? ==
* CSS stands for "Cascading Style Sheets" and is a web technology for defining the layout and look of a web page. With CSS you can alter the design of your web page without modifying HTML or PHP code.
* CSS stands for "Cascading Style Sheets" and is a web technology for defining the layout and look of a web page. With CSS you can alter the design of your web page without modifying HTML or PHP code.


* [[CSS|Moodle Docs on CSS]]
* [http://en.wikipedia.org/wiki/Cascading_Style_Sheets Wikipedia on CSS]
* [http://en.wikipedia.org/wiki/Cascading_Style_Sheets Wikipedia on CSS]


== How can I learn more about CSS? ==
== Where can I learn more about using CSS? ==
 
=== Online resources ===


Online resources:
* The [http://www.w3schools.com/css/default.asp W3Schools CSS Tutorial] is a great way to learn about CSS by example.
* The [http://www.w3schools.com/css/default.asp W3Schools CSS Tutorial] is a great way to learn about CSS by example.
* [http://www.alistapart.com A List Apart] is a great resource for everything regarding web design, not only CSS.
* [http://www.alistapart.com A List Apart] is a great resource for everything regarding web design, not only CSS.
* [http://css-discuss.incutio.com CSS-Discuss Wiki] - Wiki companion to the [http://www.css-discuss.org CssDiscussList mailing list]. Includes tips and tricks and information on browser hacks, text sizing, and testing.
* [http://www.cssnewbie.com/ CSS Newbie] by Rob Glazebrook


* [http://realworldstyle.com Real World Style] by [http://www.alistapart.com/authors/n/marknewhouse Mark Newhouse] - CSS layouts that even work with NN4
* [http://phrogz.net/CSS/HowToDevelopWithCSS.html How to Develop with CSS]


Books:
* [http://www.positioniseverything.net/ Position Is Everything] attempts to describe and demonstrate some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers.
* The books by CSS guru Eric Meyer are highly recommended:
 
=== Books ===
* The books by CSS guru ''Eric Meyer'' are highly recommended:
** [http://www.ericmeyeroncss.com Eric Meyer on CSS]
** [http://www.ericmeyeroncss.com Eric Meyer on CSS]
** [http://more.ericmeyeroncss.com/ More Eric Meyer on CSS]
** [http://more.ericmeyeroncss.com/ More Eric Meyer on CSS]
** [http://meyerweb.com/eric/books/css-tdg/ CSS: The Definitive Guide, Third Edition]
** [http://meyerweb.com/eric/books/css-tdg/ CSS: The Definitive Guide, Third Edition]
** [http://meyerweb.com/eric/books/css-pocket/ CSS Pocket Reference]
* [http://www.sitepoint.com/books/cssant2/ The CSS Anthology: 101 Essential Tips, Tricks & Hacks] by ''Rachel Andrew''
* [http://www.zeldman.com/dwws/ Designing with Web Standards, 2nd ed.] by ''Jeffrey Zeldman''
* [http://meiert.com/de/publications/books/978-3897217126/ Webdesign mit CSS, 2. Auflage] by ''Jens Meiert'' and ''Ingo Helmdach''. The book is in German, but you can view all designs on the web site and download the complete code. You'll also find [http://meiert.com/en/blog/20070503/on-updating-a-book-webdesign-mit-css/ English comments about the book] in the author's blog.


* [http://meiert.com/de/publications/books/978-3897217126/ Webdesign mit CSS, 2. Auflage] by Jens Meiert and Ingo Helmdach. The book is in German, but you can view all designs on the web site and download the complete code. You'll also find [http://meiert.com/en/blog/20070503/on-updating-a-book-webdesign-mit-css/ English comments about the book] in the author's blog.
* [http://www.transcendingcss.com/ Transcending CSS - The Fine Art of Web Design] by ''Andy Clarke''
 
=== CSS references ===
* [http://reference.sitepoint.com/css SitePoint CSS Reference]
: You can have this reference at your fingertips with SitePoint's [https://addons.mozilla.org/en-US/firefox/addon/10273 CodeBurner plugin] (Firebug extension), see [[Development:Firebug#CodeBurner]].
: There's also [http://tools.sitepoint.com/codeburner/firefox/ CodeBurner for Firefox], a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools.  
 
* [http://www.w3schools.com/CSS/CSS_reference.asp W3Schools]
* [http://www.w3.org/Style/CSS/ W3C] - In lots of languages.


== Where can I find examples for the use of CSS? ==
== Where can I find examples for the use of CSS? ==
Line 34: Line 55:
== Which tools are useful for working with CSS? ==
== Which tools are useful for working with CSS? ==


* [http://www.getfirebug.com Firebug Extension] for Firefox is the single most useful tool for inspecting the CSS of any web page and modifying it on the fly. See [[Development:Firebug]] for further information.
* [http://www.getfirebug.com Firebug Extension] for Firefox is the single most useful tool for inspecting the CSS of any web page and modifying it on the fly. See [[Firebug]] for further information.


* [https://addons.mozilla.org/de/firefox/addon/60 Web Developer Toolbar] for Firefox.  See also [https://docs.moodle.org/en/Category:Firefox_extensions Category:Firefox extensions].
* [https://addons.mozilla.org/de/firefox/addon/60 Web Developer Toolbar] for Firefox.  See also [https://docs.moodle.org/en/Category:Firefox_extensions Category:Firefox extensions].


* Standalone CSS editor [http://www.newsgator.com/individuals/topstyle/default.aspx TopStyle Lite] (you have to scroll down to the bottom of the page to find the free Lite version).
* Standalone CSS editor [http://www.newsgator.com/individuals/topstyle/default.aspx TopStyle]. (You might get redirected to the new TopStyle 4 website, so here's a direct link to download the [http://www.newsgator.com/download/products/ts3lite.exe old free TopStyle 3 Lite version]).  


* The new PHP version of [http://www.netbeans.org/features/php/index.html NetBeans] comes with integrated CSS support. You find a host of documentation, turorials, screen cast, etc. on the web site.
* The new PHP version of [http://www.netbeans.org/features/php/index.html NetBeans] comes with integrated CSS support. You find a host of documentation, tutorials, screen casts, etc. on their web site. See also [[NetBeans]].


== See also: ==
== See also: ==


* [[Themes FAQ]]
* [[Themes FAQ]]
Writing high performance CSS
* [http://code.google.com/speed/page-speed/docs/rendering.html Optimize browser rendering]
* [http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ Performance Impact of CSS Selectors]


[[Category:Themes]]
[[Category:Themes]]
[[Category:FAQ]]
[[Category:FAQ]]

Latest revision as of 06:46, 12 April 2010


What is CSS?

  • CSS stands for "Cascading Style Sheets" and is a web technology for defining the layout and look of a web page. With CSS you can alter the design of your web page without modifying HTML or PHP code.

Where can I learn more about using CSS?

Online resources

  • Position Is Everything attempts to describe and demonstrate some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers.

Books

CSS references

You can have this reference at your fingertips with SitePoint's CodeBurner plugin (Firebug extension), see Development:Firebug#CodeBurner.
There's also CodeBurner for Firefox, a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools.

Where can I find examples for the use of CSS?

Where do I find information about the CSS used by Moodle?

Which tools are useful for working with CSS?

  • Firebug Extension for Firefox is the single most useful tool for inspecting the CSS of any web page and modifying it on the fly. See Firebug for further information.
  • The new PHP version of NetBeans comes with integrated CSS support. You find a host of documentation, tutorials, screen casts, etc. on their web site. See also NetBeans.

See also:

Writing high performance CSS