Adding style.css

src/main/java/sbu/javafx/MusicApp.java

@@ -16,6 +16,9 @@ public class MusicApp extends Application {
         Scene scene = new Scene(fxmlLoader.load());
         stage.setTitle("Music Player");
         stage.setScene(scene);
+        scene.getStylesheets().add(
+                MusicApp.class.getResource("style.css").toExternalForm()
+        );
         //TODO: add icon to the stage
         stage.show();
     }

src/main/resources/sbu/javafx/App-view.fxml

@@ -9,6 +9,7 @@
       xmlns:fx="http://javafx.com/fxml/1"
       fx:controller="sbu.javafx.MusicController"
       alignment="CENTER"
+      stylesheets="@style.css"
       spacing="10">
 
     <Label fx:id="nowPlayingLabel" text="Now Playing: None"/>

src/main/resources/sbu/javafx/style.css

@@ -0,0 +1,51 @@
+.root {
+    -fx-background-color: #f4f6f8;
+    -fx-font-family: "Segoe UI";
+    -fx-padding: 20;
+    -fx-spacing: 15;
+}
+
+.label {
+    -fx-text-fill: #2c3e50;
+    -fx-font-size: 14px;
+}
+
+#nowPlayingLabel {
+    -fx-font-size: 18px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #1565c0;
+}
+
+.hbox {
+    -fx-background-color: white;
+    -fx-background-radius: 8;
+    -fx-border-color: #d6d6d6;
+    -fx-border-radius: 8;
+    -fx-padding: 10;
+    -fx-spacing: 10;
+}
+
+.button {
+    -fx-background-color: #1976d2;
+    -fx-text-fill: white;
+    -fx-background-radius: 5;
+    -fx-border-radius: 5;
+    -fx-cursor: hand;
+    -fx-padding: 6 14;
+}
+
+.button:hover {
+    -fx-background-color: #1565c0;
+}
+
+.button:pressed {
+    -fx-background-color: #0d47a1;
+}
+
+.button:last-child {
+    -fx-background-color: #43a047;
+}
+
+.button:last-child:hover {
+    -fx-background-color: #388e3c;
+}