Damyon: /* Where do I find information about the CSS used by Moodle? */

2016-12-01T07:00:13Z

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

← Older revision		Revision as of 07:00, 1 December 2016
Line 47:		Line 47:
	== Where do I find information about the CSS used by Moodle? ==		== Where do I find information about the CSS used by Moodle? ==

	* [[CSS]] - ~~overview of~~ the ~~use of CSS~~ by ~~Moodle.~~		It is possible to use CSS in Moodle - but it is not recommended. It is far better to use the classes already provided by [[Bootstrap]] to create the output for your page.
	*[[~~CSS styles_ layout.css~~]] ~~contains~~ the ~~layout specifications~~ for ~~various~~ page ~~elements~~.
	*[[CSS ~~styles_color.css]] contains the colors used~~ in ~~the page elements.~~		To read about the rules for using CSS in Moodle see [[CSS Coding Style]].
	*[[CSS ~~styles_fonts.css~~]] ~~defines the fonts used in the page elements~~.

	== Which tools are useful for working with CSS? ==		== Which tools are useful for working with CSS? ==

Deraadt: Created page with " == 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 we..."

2011-06-23T02:05:05Z

Created page with " == 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 we..."

New page

== 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.

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

== Where can I learn more about using CSS? ==

=== Online resources ===

* 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://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]

* [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.

=== Books ===
* The books by CSS guru ''Eric Meyer'' are highly recommended:
** [http://www.ericmeyeroncss.com 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-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://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 [[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? ==
* See [http://www.csszengarden.com Zen Garden], also available [http://www.mezzoblue.com/zengarden/translations/ in different languages].

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

* [[CSS]] - overview of the use of CSS by Moodle.
*[[CSS styles_ layout.css]] contains the layout specifications for various page elements.
*[[CSS styles_color.css]] contains the colors used in the page elements.
*[[CSS styles_fonts.css]] defines the fonts used in the page elements.

== 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 [[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].

* 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, tutorials, screen casts, etc. on their web site. See also [[NetBeans]].

== See also: ==

* [[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:FAQ]]

CSS FAQ - Revision history

Damyon: /* Where do I find information about the CSS used by Moodle? */

Deraadt: Created page with " == 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 we..."