The CSS attributes are not taking effect, but the "CSS_PATH" attribute is working.

[Gu-f]

I wrote the CSS for Screen, but it only takes effect when referenced in the tcss file.
Minimum Demo:
Display centered normally:

# main.py
from textual.app import App, ComposeResult
from textual.screen import Screen
from textual.widgets import Label


class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        yield Label("Center Label")

    CSS_PATH = 'main.tcss'


class MyApp(App):
    def on_mount(self) -> None:
        self.push_screen(MyScreen())


if __name__ == "__main__":
    MyApp().run()

========
# main.tcss
Screen {
    align: center middle;
    background: $surface;
}

Label {
    background: $background;
    border: round white;
    padding: 1 2;
    text-style: bold;
}

Centered display is not effective:

from textual.app import App, ComposeResult
from textual.screen import Screen
from textual.widgets import Label


class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        yield Label("Center Label")

    CSS = """
    Screen {
        align: center middle;
        background: $surface;
    }
    
    Label {
        background: $background;
        border: round white;
        padding: 1 2;
        text-style: bold;
    }
    """


class MyApp(App):
    def on_mount(self) -> None:
        self.push_screen(MyScreen())


if __name__ == "__main__":
    MyApp().run()

Is this in line with expectations?
I think this should be consistent with the effect of the tcss file.

[willmcgugan]

When you put CSS in a screen it is "scoped". i.e. it prefixes every ruleset with the container type. It is breaking your CSS because your Screen rule becomes MyScreen Screen, which doesn't make sense.

The solution is to always be specific with your rules. Don't style Screen because that would apply to all screens. If you want to style MyScreen then begin your rule with MyScreen. Textual knows not to prefix specific rules like that.

So a fix would be this:

from textual.app import App, ComposeResult
from textual.screen import Screen
from textual.widgets import Label


class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        yield Label("Center Label")

    CSS = """
    MyScreen {
        align: center middle;
        background: $surface;
    }

    Label {
        background: $background;
        border: round white;
        padding: 1 2;
        text-style: bold;
    }
    """


class MyApp(App):
    def on_mount(self) -> None:
        self.push_screen(MyScreen())


if __name__ == "__main__":
    MyApp().run()

Or even better:

from textual.app import App, ComposeResult
from textual.screen import Screen
from textual.widgets import Label


class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        yield Label("Center Label")

    CSS = """
    MyScreen {
        align: center middle;
        background: $surface;
        Label {
            background: $background;
            border: round white;
            padding: 1 2;
            text-style: bold;
        }
    }
    """


class MyApp(App):
    def on_mount(self) -> None:
        self.push_screen(MyScreen())


if __name__ == "__main__":
    MyApp().run()

The alternative is to disable CSS scoping, by setting SCOPED_CSS=False

from textual.app import App, ComposeResult
from textual.screen import Screen
from textual.widgets import Label


class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        yield Label("Center Label")

    SCOPED_CSS = False
    CSS = """
    Screen {
        align: center middle;
        background: $surface;
    }

    Label {
        background: $background;
        border: round white;
        padding: 1 2;
        text-style: bold;
    }
    """


class MyApp(App):
    def on_mount(self) -> None:
        self.push_screen(MyScreen())


if __name__ == "__main__":
    MyApp().run()

However, I would not recommend that. As the way you have written it, the Screen and Label rules will apply everywhere. i.e. if you create new screens, they will all be center aligned.

[Gu-f]

Thank you so much