CSS in the editor

Transcript

1. Custom CSS and the editor

2. Custom CSS?

3. CSS?

4. CSS (Cascading style sheet)

5. !important

6. #id .class

7. .editor-styles-wrapper .wp-block-quote.is-large

8. Inspecting

9. None
10. None
11. None

12. Custom CSS in WordPress

13. Adding to the customizer Using additional CSS, doesn’t change files

14. None

15. Theme files in wp-admin Only if able to edit files,

    changes theme files
16. None

17. Adding a stylesheet/editing Requires server access, changes files

18. Let’s create

19. Our starting point Twenty Twenty

20. 1. Add a class to a block using additional CSS

    class field.

21. 2. Create a custom style for an existing block class.

22. Add a class to blocks

23. None
24. None

25. BONUS POINTS… Check on smaller screen

26. None

27. Creating a custom style

28. None
29. None
30. None
31. None

32. Summary…

33. 1. Find the element you want to style

34. 2. Remember cascading

35. 3. Use the additional css field

36. 4. Always preview on smaller devices

37. 5. For a quick, safe option outside of theme use

    ‘Additional CSS’ in the Customizer.

38. 6. Have fun and experiment

39. Thank you