Why is CSS style not being applied to GTK+ code?

Question

I started fiddling with the GTK+ until I tried to modify a spin button widget:

GTK+ change font to spin button

I didn't quite understood the answer, but I started looking for CSS and trying out the code examples. Finally, after some googling and copy / paste code, especially from here how to set a specific css class to a widget in gtk3? (c) , this is what I managed to do without syntactic or other errors:

test.c

#include <gtk/gtk.h>
#include <string.h>  

static void
activate (GtkApplication *app, gpointer user_data) {
  GtkStyleContext *context;
  GtkWidget *button_01;
  GtkWidget *button_02;
  button_01 = gtk_button_new_with_label("This is a simple button");
  button_02 = gtk_button_new_with_label("This is a stylish button");
  context = gtk_widget_get_style_context(button_02);
  gtk_style_context_add_class(context, "my_style");

  GtkWidget *window;
  GtkWidget * main_box;

  window = gtk_application_window_new (app);
  main_box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 25);

  gtk_box_set_homogeneous (GTK_BOX (main_box), TRUE);
  gtk_container_add (GTK_CONTAINER (window), main_box);
  gtk_container_add (GTK_CONTAINER (main_box), button_01);
  gtk_container_add (GTK_CONTAINER (main_box), button_02);

  gtk_widget_show_all (window);
}

int main (int argc, char **argv) {
  GtkApplication *app;
  int status;

  app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
  g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
  status = g_application_run (G_APPLICATION (app), argc, argv);
  g_object_unref (app);

  return status;
}

and this is the CSS file:

my_style.css

.my_style{
    background: #669999;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}

Should someone compile the code above, a window containing two buttons appears, one button being stylish according to the css file. Yet, both buttons appear to be default styled, as if the my_style.css file is being ignored.

If someone could help, that would be much appreciated.

Answer 1

An application can make GTK+ parse a specific CSS style sheet by calling gtk_css_provider_load_from_file() or gtk_css_provider_load_from_resource() and adding the provider with gtk_style_context_add_provider() or gtk_style_context_add_provider_for_screen(). The following objects are used to implement the style:

• GtkStyleContext is an object that stores styling information affecting a widget defined by GtkWidgetPath. In order to construct the final style information, GtkStyleContext queries information from all attached GtkStyleProviders.

• GtkCssProvider is an object implementing the GtkStyleProvider interface. GtkStyleProvider is used to provide style information to a GtkStyleContext

• GtkCssProvider is an object implementing the GtkStyleProvider interface. It is able to parse CSS-like input in order to style widgets.

for more information GtkCssProvider: GTK+ 3 Reference Manual

The code is the following:

#include <gtk/gtk.h>

static void
activate (GtkApplication *app, gpointer user_data) {
  GtkStyleContext *context;
  GtkWidget *button_01;
  GtkWidget *button_02;
  button_01 = gtk_button_new_with_label("This is a simple button");
  button_02 = gtk_button_new_with_label("This is a stylish button");
  
  context = gtk_widget_get_style_context (button_02);
 
  GtkCssProvider *provider = gtk_css_provider_new ();
  
  gtk_css_provider_load_from_path (provider,
    "my_style.css", NULL);

  GtkWidget *window;
  GtkWidget *box;

  window = gtk_application_window_new (app);
  box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 25);
  
  gtk_style_context_add_provider (context,
                                    GTK_STYLE_PROVIDER(provider),
                                    GTK_STYLE_PROVIDER_PRIORITY_USER);

  gtk_box_set_homogeneous (GTK_BOX (box), TRUE);
  gtk_container_add (GTK_CONTAINER (window), box);
  gtk_container_add (GTK_CONTAINER (box), button_01);
  gtk_container_add (GTK_CONTAINER (box), button_02);

  gtk_widget_show_all (window);
}

int main (int argc, char **argv) {
  GtkApplication *app;
  int status;

  app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
  g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
  status = g_application_run (G_APPLICATION (app), argc, argv);
  g_object_unref (app);

  return status;
}

the CSS selectors is simply called 'button', the code is the following:

button {
    background: #669999;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}

button:hover {
  background: #3085a9;
}