book: Extend CSS chapter (#1339)

* Add a note about finishing touches to "Set CSS Name and Use Exported Colors" section of 14th (CSS) chapter of the book.

Changes:
- Remind reader to include "style.css" to "resources.gresource.xml" and
  call "load_css()" function in `connect_startup` handler.
- Add anchors to listings/todo/3/main.rs file to be able to show them
  in the chapter:
  - connect_startup
  - load_css

* Update book/src/css.md

Co-authored-by: Bilal Elmoussaoui <belmouss@redhat.com>

* Update book/src/css.md

Co-authored-by: Bilal Elmoussaoui <belmouss@redhat.com>

* Alling code in xml listing of chapter 14th of the book.

* Final additions

---------

Co-authored-by: Bilal Elmoussaoui <belmouss@redhat.com>
Co-authored-by: Hofer-Julian <julianhofer@gnome.org>

book/listings/todo/3/main.rs

@@ -17,11 +17,13 @@ fn main() -> glib::ExitCode {
     // Create a new application
     let app = Application::builder().application_id(APP_ID).build();
 
+    // ANCHOR: connect_startup
     // Connect to signals
     app.connect_startup(|app| {
         setup_shortcuts(app);
         load_css()
     });
+    // ANCHOR_END: connect_startup
     app.connect_activate(build_ui);
 
     // Run the application
@@ -34,6 +36,7 @@ fn setup_shortcuts(app: &Application) {
     app.set_accels_for_action("win.filter('Done')", &["<Ctrl>d"]);
 }
 
+// ANCHOR: load_css
 fn load_css() {
     // Load the CSS file and add it to the provider
     let provider = CssProvider::new();
@@ -46,6 +49,7 @@ fn load_css() {
         gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
     );
 }
+// ANCHOR_END: load_css
 
 fn build_ui(app: &Application) {
     // Create a new custom window and show it

book/src/css.md

@@ -252,6 +252,39 @@ As of this writing, these exported colors can only be found in its [source code]
 
 There we find the color `success_color`, which in real scenarios should be used to indicate success.
 We can then access the pre-defined color by adding an `@` in front of its name.
+
+We also have to add `style.css` to `resources.gresource.xml`.
+
+Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/3/resources/resources.gresource.xml">listings/todo/3/resources/resources.gresource.xml</a>
+
+```diff
+ <?xml version="1.0" encoding="UTF-8"?>
+ <gresources>
+   <gresource prefix="/org/gtk_rs/Todo3/">
+     <file compressed="true" preprocess="xml-stripblanks" alias="gtk/help-overlay.ui">shortcuts.ui</file>
+     <file compressed="true" preprocess="xml-stripblanks">task_row.ui</file>
+     <file compressed="true" preprocess="xml-stripblanks">window.ui</file>
++    <file compressed="true">style.css</file>
+   </gresource>
+ </gresources>
+```
+
+Additionally, we call `load_css()` in `connect_startup`.
+
+
+Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/3/main.rs">listings/todo/3/main.rs</a>
+
+```rust ,no_run,noplayground
+{{#rustdoc_include ../listings/todo/3/main.rs:connect_startup}}
+```
+
+`load_css()` is very similar to the one shown at the beginning of the chapter.
+However, this time we load styles using `load_from_resource()`.
+
+```rust ,no_run,noplayground
+{{#rustdoc_include ../listings/todo/3/main.rs:load_css}}
+```
+
 And that is how the task rows look like after the change.
 Probably better to revert this immediately again.