Get the CSS from our Tutorials

Here you’ll find all the custom CSS we write in our Youtube tutorials.

Use the links below to navigate CSS for the tutorial you watched. Or you can browse, and check all the CSS we posted.

Tutorials:

• How to style Gutenberg Blocks

CSS for Gutenberg Blocks

<style>

/* Alert box for <p> element. Just add the .alert class to your paragraph block */

p.alert {
    border: 2px solid gray;
    border-radius: 3px;
    padding: 40px 30px 30px 70px;
    background: url("http://btw2.sandbox/wp-content/uploads/2020/10/attention.svg");
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: 15px 15px;
}

/* Unordered list with Unicode Arrow bullets */

ul {
    list-style-type: none;
}

ul li {
    position: relative;
}

ul li:before {
    content:"➜ ";
    position: absolute;
    left: -1.3em;
    color: #27cb7f;
}

/* 50% with separator with circular icon */

hr.icon-separator {
    position: relative;
    width: 50%;
    margin: 50px auto !important;
    overflow: visible;
}

hr.icon-separator:before {
    content:"";
    width: 40px;
    height: 40px;
    background-color: #dfdfdf;
    position: absolute;
    left: calc(50% - 20px);
    top: -20px;
    border: 1px solid gray;
    border-radius: 100%;
    background-image: url("http://btw2.sandbox/wp-content/uploads/2020/10/mountain.svg");
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
    }
    
h2 {
    border-bottom: 1px solid gray;
    padding-bottom: 5px;
    text-align: center;
}

/* Ordered list with colorful numbers */

ol.colorful-list {
    list-style-type: none;
    counter-reset: colorful-list-counter;
}

ol.colorful-list li {
    counter-increment: colorful-list-counter;
    position: relative;
    margin-bottom: 5px;
}

ol.colorful-list li:before {
    content: counter(colorful-list-counter);
    width: 25px;
    display: inline-block;
    background-color: #2b84df;
    position: absolute;
    left: -1.7em;
    color: white;
    text-align: center;
    border-radius: 100%;
    box-shadow: 1px 1px 3px #6a6a6a;
    
}

/* Image with frame, matte, and box-shadow */

.wp-block-image img {
    border: 15px solid black;
    padding: 25px;
    box-shadow: 0 10px 20px -10px;
}

.wp-block-image figcaption {
    font-family: Courier;
    font-weight: bold;
}

/* Gutenberg Group Call-to-action box */

.my-button a.wp-block-button__link {
    border-radius: 0;
    border: 3px solid #4b4a4a;
    min-width: 250px;
    background-color: teal;
    color: white;
    font-size: 20px;
    box-shadow: 2px 2px 8px #797979;
}

.my-button a.wp-block-button__link:hover {
    background-color:#005656;
    transform: translateY(2px);
    box-shadow: 2px 2px 12px #6166a2;
}

.wp-block-group.my-group {
    border: 1px solid #bbb;
    background-color: #f0e8ffbf;
    position: relative;
    margin: 40px;
   
}

.my-group h3:first-child {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    position: absolute;
    top: -1px;
    left: 0;
    text-align: center;
    width: 100%;
    background-color: #1764f2;
    line-height: 35px;
    

}

.my-group .wp-block-group__inner-container {
    padding: 135px 60px 40px;
    background: url("http://btw2.sandbox/wp-content/uploads/2020/10/mountain.svg") no-repeat center 46px;
    background-size: 80px;
    
}
</style>Code language: HTML, XML (xml)