Workshop for WordPress
Custom CSSand the editor
View Slide
Custom CSS?
CSS?
CSS (Cascading style sheet)
!important
#id .class
.editor-styles-wrapper .wp-block-quote.is-large
Inspecting
Custom CSS in WordPress
Adding to the customizerUsing additional CSS, doesn’t change files
Theme files in wp-adminOnly if able to edit files, changes theme files
Adding a stylesheet/editingRequires server access, changes files
Let’s create
Our starting pointTwenty Twenty
1. Add a class to a block using additional CSSclass field.
2. Create a custom style for an existingblock class.
Add a class to blocks
BONUS POINTS…Check on smaller screen
Creating a custom style
Summary…
1. Find the element you want to style
2. Remember cascading
3. Use the additional css field
4. Always preview on smaller devices
5. For a quick, safe option outside oftheme use ‘Additional CSS’ in theCustomizer.
6. Have fun and experiment
Thank you