<page xmlns="http://projectmallard.org/1.0/"
      xmlns:its="http://www.w3.org/2005/11/its"
      type="topic" style="task"
      id="pref-css">

  <info>
    <link type="guide" xref="index#pref"/>
    <revision pkgversion="3.10" date="2013-07-06" status="candidate"/>
    <revision pkgversion="3.33" date="2019-04-08" status="candidate"/>
    <revision pkgversion="40.alpha" date="2021-01-12" status="candidate"/>

    <credit type="author copyright">
      <name>Gordon Hill</name>
      <email its:translate="no">caseyweederman@gmail.com</email>
      <years>2013</years>
    </credit>
    <credit type="copyright editor">
      <name>Ekaterina Gerasimova</name>
      <email its:translate="no">kittykat3756@gmail.com</email>
      <years>2013</years>
    </credit>
    <credit type="copyright editor">
      <name>Federico Bruni</name>
      <email its:translate="no">fede@inventati.org</email>
      <years>2021</years>
    </credit>

    <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>

    <desc>Override the theme which is used to display web pages.</desc>
  </info>

  <title>Custom CSS</title>

  <p><app>Web</app> allows you to set a custom CSS to change the look and feel of
  every web page that you visit. You may want to do this to set a preferred
  font size or color scheme.</p>

  <steps>
    <item>
      <p>Press the menu button in the top-right corner of the window and select
      <guiseq><gui style="menuitem">Preferences</gui><gui style="tab">Appearance</gui></guiseq>.</p>
    </item>
    <item>
      <p>Under the Style section, switch <gui>Use Custom Stylesheet</gui> to on.</p>
    </item>
    <item>
      <p>Click on the pen icon.</p>
    </item>
    <item>
      <p>Your default text editor will open. Add your custom CSS and save
      the file.</p>
    </item>
  </steps>

  <comment>
    <cite date="2013-07-06">Kat</cite>
    <p>Maybe use a slightly more practical example.</p>
  </comment>

  <p>An example of a custom CSS:</p>
  <code><![CDATA[
body{
    /*Make everything upside-down*/
    -webkit-transform: rotate(180deg);
}
]]></code>

  <p>Your custom CSS will override the style sheet on pages which you visit
  after you enable it.</p>

</page>
