Search⌘ K
AI Features
Home
Courses
Using the Python Transcrypt Transpiler for Front-end Coding

Stylesheet

Explore how to directly apply CSS in React projects compiled with Transcrypt. Learn to use external stylesheets, target HTML elements, assign className in React components, and strategically update styles based on application state.

We'll cover the following...

Directly utilize CSS in our app

We’ll start with using a simple stylesheet as we would for any other static website. For that, we first need a CSS file, and we’ll call it app.css.

NAME_
CSS
body{
    font-family: Arial, sans-serif;
}
.submitBtn {
    margin: 10px;
    color: darkgreen;
    width: 60px;
}
.deleteBtn {
    color: darkred;
}
.editBtn {
    color: blue;
}
button {
    margin-right: 5px;
    width: 60px;
}
.editing {
    color: blue;
}
.adding {
    color: darkgreen;
}

Using HTML element type

Some of the selectors in our CSS file apply directly to an HTML element type, and some use a named CSS class selector. The style attributes for the native element selectors will be automatically applied to the referenced ...