To add custom css, select the Appearance > Customize option from the admin dashboard, and then Additional CSS.
Custom CSS is very useful for applying slight tweaks to the appearance of your website without having to edit any of the theme files.
These custom rules are applied after the main CSS files of the theme and can overrule any settings if necessary.
For example, you might want to hide certain elements from the view, in which case you would apply the display none setting to the element.
.main-navigation {
display: none !important;
}You might also want to decrease the font size of a long title of a certain post, in which case you would apply the appropriate setting to the corresponding unique post id (or class depending on your theme).
#post-131 .entry-title {
font-size: 1.5rem !important;
}A final example might be that you would like to create a new class to apply to certain blocks (such as a paragraph). You would define this class in the Custom CSS area and then apply it using the block editor when editing a post.
.warning-text {
color: red;
font-weight: bold;
}Custom CSS is best used for temporary or experimental changes to the theme. If you find yourself making significant changes to the layout and appearance of your theme, you should consider using a child theme.
If you are using a child theme, you should consider committing your long term custom CSS styles to the main stylesheet to avoid accidental deletion or overwriting.