DEV Community: Martin Klestil

CSS inheritance

Martin Klestil — Fri, 08 Aug 2025 19:09:02 +0000

What is CSS inheritance?

In CSS, certain properties can be automatically passed from a parent element to its child elements.
This is called inheritance.

Why is it important?

Thanks to inheritance, you don't have to redefine each property for each individual element.
This saves time and ensures a consistent design.

What is inherited?

Not all CSS properties are automatically inherited.
Typical inheritable properties include:

color
font-family
line-height

For example, if you assign a text color to a <div>, this color will be inherited by the <p> elements it contains.

Code Example

<div>
<p>Text in a Paragraph</p>
</div>

div {
color: red;
}

The <p> element automatically inherits the font color of the

What is not inherited?

Non-inherited properties must be set explicitly for each element.
Examples:

margin
padding
border
background

Code Example:

<div>
This is the parent element with padding.
<p>This is the child element</p>
</div>

div{
border: solid 1px red;
}

If you want to explicitly inherit this, you must set it in the child element using inherhit.

<div>
This is the parent element with padding.
<p style="border: inherit;">This is the child element</p>
</div>

Keywords `inherit`, `initial`, `unset`

`inherit`

Resets the property to its default value (as defined by the browser).

unset (combination of inherit and initial)
Combines both worlds:

For inheritable properties → inherit
For non-inheritable properties → initial

When should you use inheritance specifically?

When multiple child elements share the same properties, inheritance is worthwhile:

body {
font-family: Arial, sans-serif;
color: #333;
}

When is it better not to use it?

Inheritance only works from top to bottom – from parent to child.

If you want to specifically change the design of a single element, you should address it directly or work with classes.

Conclusion

CSS inheritance is a powerful tool for making your stylesheet more efficient and clearer.
If you use it consciously, you save time and avoid repetition in your code.

Thanks

Thank you for reading this far! I'm still new to writing articles and have a lot to learn. I appreciate for your feedback.
Happy coding 😊

JavaFX Notepad Tutorial

Martin Klestil — Sat, 29 Mar 2025 10:47:49 +0000

Hello World!

I would like to share my learning journey with JavaFX, this is my notepad project.

Before starting

Java Version: openjdk 22
IDE: IntelliJ Community Edition
Build Tool: Maven

My Plan

If you look at Notepad you can break it down into a few parts. Menu, TextArea, Icon, Title, Control (Close...).

Time to code

I create with IntelliJ a new JavaFX Project and start with a mvc architecture.

MainView

The MainView gives me my root element for the Scene, this is where the text area and the menu are added.

Model

Than we must implement some logic, to make the Menu clickable, editable the text ...

You can play around here and add all the features you want.

Controller

My controller only connects the view to the models.

Conclusion

Thank you for reading this far! I'm still new to writing articles and have a lot to learn. I appreciate for your feedback.
Happy coding 😊

JavaFX Dock project

Martin Klestil — Tue, 27 Aug 2024 08:51:16 +0000

Hello World!

I would like to share my learning journey with JavaFX by demonstrating a small project in the form of a 'dock'. The goal of this project is to create a bar at the bottom of the screen where program icons can be placed and launched directly.

Project idea

I came across this project as part of the Udemy course 'JavaFX - Creating Java programs with interfaces / GUIs'.

I developed my own interpretation and expanded and improved the project according to my ideas.

Before starting

Java Version: openjdk 22
IDE: IntelliJ Community Edition
Build Tool: Maven

Create Project

Creating a JavaFX project in IntelliJ is easy.

Project Structure

I'm following the MVC architecture, with separate packages for the model, view, and controller.

public class App extends Application {
    public void start(Stage stage) throws IOException {
        //MVC
        MyView view = new MyView();
        MyController controller = new MyController(view);

        //JavaFX
        Scene scene = new Scene(view.getRoot(), 520, 240);
        stage.setTitle("Hello World!");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch();
    }
}

View

public class MyView {
    private Group root = new Group();
    private ImageView imageViewDock;

    private final String[] icons = {"Browser.png", "IDE.png", "Mail.png", "Text.png" };
    private ArrayList<IconImageView> iconsList = new ArrayList<>();

    public MyView() {
        Image image = new Image(getClass().getResourceAsStream("/images/Dock.png"));
        //Dock
        imageViewDock = new ImageView(image);
        imageViewDock.setTranslateX(12);
        imageViewDock.setTranslateY(100);

        root.getChildren().add(imageViewDock);

        for(int i = 0; i < icons.length; i++){
            IconImageView icon = new IconImageView(icons[i]);
            icon.setTranslateX(90+80 * i);
            icon.setTranslateY(100);
            icon.setEffect(new Reflection());
            root.getChildren().add(icon);
            iconsList.add(icon);
        }
    }

I use the Group layout as the root element for my scene. Then I create an ImageView that contains my image for the dock.
Using a for loop, I created the icons and added them to the dock.

Icons

public class IconImageView extends ImageView {

    String path = "";

    public IconImageView(String path) {
        this.path = path;
        Image image = new Image(getClass().getResourceAsStream("/images/" + this.path +""));
        this.setImage(image);
        this.setScaleY(0.8);
        this.setScaleX(0.8);

For the icons, I created a custom IconImageView class where I defined default values and zoom in/out effects.

Controller

public class MyController {
    private  MyView view;

    public MyController(MyView view) {
        this.view = view;
        DockHandler dockHandler = new DockHandler();

        //Add Event Handler, exit by 2 clicks
        this.view.getImageViewDock().setOnMouseClicked(dockHandler.getMouseEventEventHandler());

        //Add Event Handler Icons
        ArrayList<IconImageView> iconsList = view.getIconsList();
        for ( int i = 0; i < iconsList.size(); i++){
            iconsList.get(i).setOnMouseClicked(new IconHandler(iconsList.get(i).getPath()).getEventHandler());
        }
    }
}

The controller connects my view with the model classes. The dockHandler terminates the program when you double-click on the dock.

IconHandler

public IconHandler(String path) {

        eventHandler = new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent) {
                //Query operating system
                String os = System.getProperty("os.name").toLowerCase();


                if (path.equals("Browser.png")){
                    System.out.println("Browser");
                    if(os.contains("win")){
                        String path = "C:\\Program Files\\Mozilla Firefox\\firefox.exe" ;
                        startProgramm(path);
                    }else if (os.contains("mac")) {
                        String path = "open /Applications/Firefox.app" ;
                        startProgramm(path);
                    }else {
                        System.out.println("Unsupported operating system");
                    }

                } else if

In IconHandler, check which operating system is used and then open the application for Mac or Windows.

App

        //Transparent
        scene.setFill(Color.TRANSPARENT);
        stage.initStyle(StageStyle.TRANSPARENT);

        stage.show();

        //Position
        //Screen Size
        Rectangle2D screenSize = Screen.getPrimary().getVisualBounds();
        double x = (screenSize.getWidth() - stage.getWidth()) / 2;
        double y = screenSize.getHeight() - stage.getHeight() - 40;
        stage.setX(x);
        stage.setY(y);
    }

Finally, I implemented transparency and positioned the dock correctly on the screen.

Future

Currently, some elements, such as paths and images, are still hard-coded. I plan to improve these areas to allow new icons to be added dynamically.

Conclusion

Thank you for reading this far! I'm still new to writing articles and have a lot to learn. I appreciate any feedback you may have. May the Force be with you. 😊

Dark theme with css

Martin Klestil — Fri, 28 Jul 2023 05:48:55 +0000

Hello world, this is my first blog post.🥳

I've spent the last few days to find an easy way to create dark and light themes using css.

With the help of prefers-color-scheme we can create our own theme for dark or light mode.

prefers-color-scheme

That will be use with a media query, to detect if the user has their system set to use a light or dark color theme.

Now, comes to the question of how to test the whole thing?

Test

Current browsers read the theme preference from the operating system. Luckily there is a way to test this easily.

Tested with Google Chrome Version 115.x(July 2023).

Open developer tools
Open Command Control
- Ctrl + Shift + P (Windows)
- Command+Shift+P (Mac)
Enter Show Rendering
Emulate CSS Media

Where does it work?

Thanks to the site caniuse.com we can check CSS commands, there we get a global coverage of 94.93% for prefers-color-scheme (as of July 2023).

DEV Community: Martin Klestil

CSS inheritance

What is CSS inheritance?

Why is it important?

What is inherited?

Code Example

What is not inherited?

Code Example:

Keywords inherit, initial, unset

inherit

When should you use inheritance specifically?

When is it better not to use it?

Conclusion

Thanks

JavaFX Notepad Tutorial

Hello World!

Before starting

My Plan

Time to code

MainView

Menu

Model

Controller

Conclusion

JavaFX Dock project

Hello World!

Project idea

Before starting

Create Project

Project Structure

View

Icons

Controller

IconHandler

App

Future

Conclusion

Dark theme with css

Test

Where does it work?

Keywords `inherit`, `initial`, `unset`

`inherit`