Learn how to CSS for Gutenberg blocks and how to apply custom styles using custom classes and CSS code in WordPress.
⮞ ⮞ Use the video chapters to skip to elements/css you’re interested in styling. ⮜⮜
In this video, we’ll style an entire page of block elements. You’ll make a custom alert box (with icon image), stylish heading, list with colored icon bullets, and stylish button. We’ll also make a unique separator with circular icon, and a callout/CTA box.
CSS Techniques you’ll learn:
* How to add a custom class to Gutenberg blocks
* Targeting blocks by class or element
* Padding, Borders, Margin & Box-shadow
* Adding a background image to a block
* Pseudo-elements ( :before & :after)
* Relative and Absolute positioning
* CSS Counters
——————————————————
Video Chapters
——————————————————
0:00 – Intro
0:18 – What we’re going to build
1:45 – Alert Box with icon
8:48 – List with icon bullets
13:50 – HR separator with centered icon
25:40 – Ordered list with color numbers using css counters
36:16 – Image with box-shadow and frame
39:52 – Button with box-shadow, border and hover effect
47:28 – Group Block with border, padding and background image
1:01:26 – Outro
source