Skip to content
English
Sign in
edapp.com
  • There are no suggestions because the search field is empty.

All About Custom CSS

This article will show everything you need to know about designing your content using Custom CSS.

Cascading Style Sheet (CSS) describes how HTML elements will be displayed on a screen, paper, or other media. If you’re modifying colors, font types, font sizes, images, element positioning, and more, CSS is the tool for the job!

 

COURSE ELEMENTS

WORKAROUNDS

TEMPLATE SPECIFIC ELEMENTS

 

CSS ANATOMY   CSS Anatomy

© Screenshot from Codeacademy

Always double-check if no curly bracket or semicolon is missing, as it could make other CSS syntax, not work.

 

💡 COURSE ELEMENTS 💡

Below are selectors and rulesets for the general elements across a course. Be guided by using these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

TEMPLATE

RULESET 

All Buttons

 
 btn.btn { 

}

Solid Buttons

 
 .btn.btn-solid { 

}

Progress Bar

 
 #indicator { 

background-color:var(--main-color); 

color:var(--accent-color); 

}

Page Counter

 
#lesson-header-nav { 

background: var(--main-color); 

color:white; 

}

Menu Button

 
 #lesson-header-nav-menu-btn { 

}

Top Block Header

 
 #lesson-header { 

background: white; 

}

Lesson Title & Line at the Top

 
#lesson-header-title-content { 

color: white; 

border-bottom: 3px solid white; /* line at the top */ 

}

Line at the Bottom

 
 #slides { 

border-bottom: 1px solid white; 

}

Selected Buttons for all Quiz Templates

 
 .selectable.active .btn { 

}

Answer Box

 
 #slide-answer { 

}

Continue Button in

Answer Box

 
 #slide-answer-continue { 

}

General Font for the entire course
 
#slides-view { 

font-family: 'Poppins', sans-serif; 

}

Headings

 
h1, h2, h3, h4, h5 { 

}

List Bullet Points

 
li::before { 

color:var(--accent-color); 

}

‘OK, I’m ready!’ Button

 
btn.btn-solid.play-game { 

}

Exit Button

 
.slide-exit .btn.btn-solid.slide-up { 

}

 

🛠️ WORKAROUNDS 🛠️

Below are some workarounds for the common irksome behaviors we encounter in the day-to-day.

Template

Ruleset 
  • Sequence and Vertical Series

Arrow up in Sequence and Vertical Series hitting the block header.

 
  • Sequence
.slide-text-sequence .btn-up { 

top: 2em; 

}
  • Vertical Series
.slide-image-slider .btn-up { 

top: 2em; 

}
You may adjust the value according to your liking.
  • Image Slider 

The Bottom caption box hits the arrow down.


 
.slide-image-slider .caption.position-bottom { 

bottom: 3.75em; 


}

 
  • Expandable List

A box around the active symbol in Expandable List due to the brand inheritance/color scheme.
 
.slide-expandable-list .item.active .item-button:after {

background: transparent; 

}

 
  • YouTube Template

Broken thumbnail in YouTube template


 
  • No thumbnail, just black
.slide-youtube-video-embed .yt-thumb { 

visibility: hidden; 

}
  • Set one thumbnail for all YouTube slides
.slide-youtube-video-embed .yt-thumb { 

content: url(https://media-public.canva.com/MADQ5L5rh4E/1/thumbnail_large-1.jpg) 

}

Choose one image that will be used for all the YouTube slides. Make sure it’s hosted from a secured website.
  • Bulleted/Numbered List in Sequence template

Inconsistent indention of the bulleted list and numbered list in Sequence.


 
  • Bulleted List
.slide-text-sequence .text-center ul { 

display: block; 

}
  • Numbered List
.slide-text-sequence .text-center ol { 

display: block; 

}
  • “Number 1”
.slide-text-sequence ol.md-list>li:before { 

margin: 0 -1.2em; color: black; 

}
  • Scrolling Mix

Inconsistent indention and color of “Number 1” in the Scrolling Mix.


 
 
.slide-scrolling-media ol.md-list>li:before { 

margin: 0 -1.2em; color: black; 

}

 
  • Scrolling Mix

Bullet points in Scrolling Mix are being cut.

 
 
.slide-scrolling-media ul.md-list { 

padding: 0.5em; 

}

By default, bullet points are working fine. This happens when the imported font is added in the custom CSS, wherein it’s not possible for us to get rid of.

  • Make the background stay

    still
#slides-background { 
transition-timing-function: unset!important; 

transition-duration: unset!important; 

transform: unset!important; 

}

  • Change the texts in Words Templates from uppercase to normal

Add the following property and value to the corresponding selector of the template:

text-transform: none;

  • Remove the lesson title in the block header
#lesson-header-title-content { 
content-visibility: hidden; 

}

 

🔎 TEMPLATE-SPECIFIC ELEMENTS 🔍

TEACH  ✏️ 



 

 

TEXT TEMPLATES

Below are selectors and rulesets for the Text Templates for TEACH. Be guided by following these colors:

root { --main-color:#223042; /* dark blue */ 

--accent-color:#00BAFF; /* light blue*/ 

}

Template

Ruleset
  • Sequence
  • Arrow Up 
.slide-text-sequence .btn-up {

background: var(--main-color); 

}
  • Arrow Down
.slide-text-sequence .btn-down { 

background: var(--main-color); 

}
  • Arrows when hovered
.slide-text-sequence .btn-down:hover, .slide-text-sequence .btn-up:hover { 

background: var(--accent-color); 

}

By default, the arrow up and down buttons follow the value of the colors set in .btn.btn. It’s up to you to change them, like what the codes above display.
  • Expandable List
  • Item (not hovered)
.slide-expandable-list .btn.btn-solid { 

background: var(--accent-color); 

color: white; 

}
  • Hovered Item
.slide-expandable-list .btn.btn-solid:hover { 

background: #39A7E5; 

}
  • Selected Item
.slide-expandable-list .item.active .item-button { 

background: #39A7E5; color: white; 

}
  • Content
.slide-expandable-list .item.active .item-content { 

background: rgba(0, 186, 255, .2); color: black; 

}
  • The (+) sign
.slide-expandable-list .item-button:after { 

color: white; 

}
  • The (-) sign
.slide-expandable-list .item.active .item-button:after { 

color: white; background: transparent; 

}

Due to the brand inheritance, a box following what’s set in the color scheme surrounds the symbol. As a workaround, add a background: transparent.
  • Reveal
 
  • Block
.btn-reveal-title.btn.btn-solid.flippable { 

background: var(--accent-color); 

}
  • Block when flipped
.slide-reveal .btn-reveal.active .btn-reveal-desc.flippable { 

background: var(--main-color); 

border-radius: 0px; 

}

By default, the block's radius will follow the value set in .btn.btn.solid. Unless you declare a different value to change it. Refer to the codes above to see the difference.
  • Quote

 
  • Speech Bubble (Dark)
.slide-speech-bubble .quote.quote-dk .quote-bg { 

background: var(--main-color); opacity: 1; 

}
  • Text in Speech Bubble (Dark)
.slide-speech-bubble .quote.quote-dk { 

color: white; 

}
  • Left Tail or Pointer (Dark)
.slide-speech-bubble .quote.pull-left.quote-dk:after { 

border-color: var(--main-color) transparent transparent; 

}
  • Right Tail or Pointer (Dark)
.slide-speech-bubble .quote.pull-right.quote-dk:after { 

border-color: var(--main-color) transparent transparent; 

}

 

 

 



  • Speech Bubble (Light)
.slide-speech-bubble .quote.quote-lt .quote-bg { 

background: var(--accent-color); 

opacity: 1; 

}
  • Text in Speech Bubble (Light)
.slide-speech-bubble .quote.quote-lt { 

color: white; 

}
  • Left Tail or Pointer (Light)
.slide-speech-bubble .quote.pull-left.quote-lt:after { 

border-color: var(--accent-color) transparent transparent; 

}
  • Right Tail or Pointer (Light)
.slide-speech-bubble .quote.pull-right.quote-lt:after { 

border-color: #00BAFF transparent transparent; 

}
  • Bulleted List
 
  • Bullet Points
.slide-list ::marker { 

color: var(--accent-color); 

}
  • Table
 
  • Table Row (Odd)
.slide-table .table-row:nth-child(odd) { 
background: var(--main-color); 

color: white; 

}
  • Table Row (Even)
.slide-table .table-row:nth-child(even) { 

background: var(--accent-color); 

color: white; 

}

IMAGE TEMPLATES

Below are selectors and rulesets for the Image Templates for TEACH. Be guided by following these colors:

root { --main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

Template

Ruleset
  • Vertical Series

Caption Box (Default)

.slide-image-slider .style-default .caption-content { 

color:white; 

border-radius: 4px; 

}

Caption Box (Dark)

.slide-image-slider .style-dark .caption-content { 

background: #223042; 

color: white; 

border-radius: 4px; 

}

Caption Box (Light)

.slide-image-slider .style-light .caption-content { 

background: #00BAFF; 

color: white; 

border-radius: 4px; 

}

Button Up

.slide-image-slider .btn-up { 
background: #223042; 

}

Button Down

.slide-image-slider .btn-down { 

background: #223042; 

}

Buttons Up and Down when hovered

.slide-image-slider .btn-down:hover, .slide-image-slider .btn-up:hover { 

background: #00BAFF; 

}

Arrow Up

.icon-chevron-up:before { 

}

Arrow Down

.icon-chevron-down:before { 

}
  • Horizontal Series

Page when visited

.slide-image-gallery .pagination .dot.active { 

}

Page when not visited

.slide-image-gallery .pagination .dot { 

}
  • Image Collection

Block

.slide-image-collection .tappy-child { 

}

Block when visited

.slide-image-collection .tappy.visited .tappy-child { 

}
  • Comparison
  • Bar
.slide-comparison .slider-knob { 

}
  • Knob (top)
.slide-comparison .slider-knob:before { 

}
  • Knob (bottom)
.slide-comparison .slider-knob:after { 

}
  • Container
.slide-comparison .slider { 

}
  • Scratch to Reveal
  • Replay Button
.slide-scratch-to-reveal.state-touched .btn-replay { 

}
  • Image Map
  • Waypoint (White)
.slide-image-map.waypoint-white .waypoint { 

}
  • Waypoint (Black) 
.slide-image-map.waypoint-black .waypoint { 

}
  • Waypoint when visited
.slide-image-map.is-loaded .waypoint.tapped { 

}
  • Waypoint box color and thicknes
    .slide-image-map.waypoint-black .waypoint {

    }
  • Image Waypoints
  • Circle Waypoint
.slide-image-waypoints.guided-false .waypoint:after {
}
  • Circle Waypoint when tapped
.slide-image-waypoints.guided-false .waypoint.tapped:after {
}
  • Shadow
.slide-image-waypoints.waypoint-white .waypoint:before { 

}
  • Shadow when hovered
.slide-image-waypoints.waypoint-white .waypoint:hover:before { 

}
  • Shadow when tapped
.slide-image-waypoints.waypoint-white .waypoint:hover:before { 

}
  • Image Waypoints (Guided)
  • Previous and Next Button
.slide-image-waypoints .prev-wp, .slide-image-waypoints .next-wp {
}
  • Previous Arrow
.icon-chevron-left:before { 

}
  • Next Arrow
.icon-chevron-right:before { 

}
  • Scrolling Mix
  • Zoom Icon
.slide-scrolling-media.image-focus-true .multi-content-wrapper-image:after { 

}
  • Image Container
.slide-scrolling-media img.multi-content { 

}
  • Single Image
  • Compose
.slide-image .img-compose { 

}
  • Background when zoomed
.pswp__item { 

}

This code also applies when you click and zoom an image on Scrolling Mix.
  • Media Collection
  • Block
.slide-media-collection .tappy .tappy-child { 

}
  • Block when visited
.slide-media-collection .tappy.visited .tappy-child { 

}

VIDEO TEMPLATES

Below are selectors and rulesets for the Video Templates for TEACH. Be guided by using these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

Template

Ruleset
  • Single Video
  • Background
.video-js .vjs-tech { 
background: white; 

}
  • Play Button
.video-js .vjs-big-play-button { 

background: rgba(51,51,51,.7); 

}
  • Play Icon
.video-js .vjs-big-play-button:before { 

}
  • Video Collection
  • Block
.slide-video-collection .tappy-child.dark:before { 

}
  • Block when visited
.slide-video-collection .tappy.visited .tappy-child { 

}
  • Title
.slide-video-collection .thumb-content { 

}
  • YouTube
  • Play Button
.video-play, .video-replay { 

}
  • Play Button when clicked
.video-play.__active, .video-replay.__active { 

}
  • Play Icon
.video-play:before, .video-replay:before { 

}
  • Thumbnail
.slide-youtube-video-embed .yt-thumb { 

}
  • Vimeo
The Play Button and Icon used on YouTube are the same as the Vimeo template
  • Thumbnail
.vimeo-thumb.content-ver {
content: url(Add-URL-here);
}


  • QUIZ 📚 


MULTIPLE CHOICE TEMPLATES 

Below are selectors and rulesets for the Multiple Choice Templates for QUIZ. Be guided by using these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}
 

Template

Ruleset
  • Multiple Choice
  • Selected Answer
.slide-multiple-choice-game .selectable.active .btn { 

}
  • Correct Answer
.slide-multiple-choice-game.state-complete .selectable.correct .btn { 

}
  • Incorrect Answer
.slide-multiple-choice-game.state-complete .selectable.incorrect .btn { 

}
  • Radio Button
.slide-multiple-choice-game .selectable .btn:before { 

}
  • Selected Radio Button
.slide-multiple-choice-game .selectable.active .btn:before { 

}
  • Radio Button Input
.slide-multiple-choice-game .selectable.active .btn:after { 

}
  • Box around the answers
.slide-multiple-choice-game .block-dk { 

}
  • Circle the Answer
  • Block when an answer is selected
.slide-circle-the-answer .circle-box.active .circle-box-text { 

}
  • Incorrect Answer
.slide-circle-the-answer.state-complete .circle-box.active.incorrect { 

}
  • Chat
  • Left Speech Bubble (Question)
.slide-chat .message--question { 

}
  • The tail of the Left Speech Bubble
.slide-chat .message--question:after { 

}
  • Right Speech Bubbles (Choices)
.slide-chat.show-msg-true .selectable { 

}
  • The tail of Right Speech Bubbles
.slide-chat.show-msg-true .selectable:after { 

}
  • Selected Answer
.slide-chat.show-msg-true .selectable.active { 

}
  • The tail of the Selected Answer
.slide-chat.show-msg-true .selectable.active:after { 

}
  • Correct Answer
.slide-chat.state-complete .chat-msg.correct { 

}
  • The tail of the Correct Answer
.slide-chat.state-complete .chat-msg.correct:after { 

}
  • Incorrect Answer
.slide-chat.state-complete .chat-msg.incorrect { 

}
  • The tail of the Incorrect Answer
.slide-chat.state-complete .chat-msg.incorrect:after { 

}
  • Multi-question
  • Selected Answer
.slide-matrix.game-slide .selectable.active .btn { 

}
  • Box around the answers
.slide-matrix.game-slide .block-dk { 

}
  • Radio Button
.slide-matrix.game-slide .selectable .btn:before { 

}
  • Selected Radio Button
.slide-matrix.game-slide .selectable.active .btn:before { 

}
  • Radio Button Input
.slide-matrix.game-slide .selectable.active .btn:after { 

}
  • Categorize
  • Selected Answer
.slide-categorise .droppy.active .droppy-child { 

}
  • Correct Answer
.slide-categorise.state-complete .droppy-true.active .droppy-child { 

}
  • Incorrect Answer
.slide-categorise.state-complete .droppy-false.active .droppy-child { 

}
  • Answer Text
.slide-categorise .btn-text { 

}
  • True or False Text
.slide-categorise .droppy { 

}
  • Answer Boxes
.slide-categorise .droppy-child.block-dk.text-center.text-lg.slide-left, .slide-categorise .droppy-child.block-dk.text-center.text-lg.slide-right { 

}
  • Select Image
  • Selected Answer
.slide-image-multiple-choice .tappy.active { 

}
  • Correct Answer
.slide-image-multiple-choice.state-complete .tappy.correct { 

}
  • Incorrect Answer
.slide-image-multiple-choice.state-complete .tappy.incorrect.active { 

}
  • Radio Button
.slide-image-multiple-choice .tappy-selection { 

}
  • Selected Radio Button
.slide-image-multiple-choice .tappy.active .tappy-selection { 

}
  • Radio Button Input
.slide-image-multiple-choice .tappy.active .tappy-selection:after { 

}
  • Carousel
  • Box around the answer
.slide-carousel .block-dk { 

}
  • Line linking the answers
.slide-carousel .carousel-item:before { 

}
  • Page when visited
.slide-carousel .pagination .page.active { 

}
  • Page when not visited
.slide-carousel .pagination .page { 

}

 

 

NUMBER TEMPLATES 

Below are selectors and rulesets for the Number Templates for QUIZ. Be guided by following these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

Template

Ruleset 
  • Dial
  • Ring
.slide-dial .dial-ring { 

}
  • Knob
.slide-dial .dial-knob { 

}
  • Speech Bubble (Value)
.slide-dial.dial-knob-value{

}
  • Tail of Speech Bubble
.slide-dial .dial-knob-value:after { 

}
  • Dial (Distribution)
  • Ring
.slide-dial-distribution .dial-ring { 

}
  • Knob
.slide-dial-distribution .dial-knob { 

}
  • Speech Bubble (Value)
.slide-dial-distribution.dial-knob-value{

}
  • Tail of Speech Bubble
.slide-dial-distribution .dial-knob-value:after { 

}
  • Pie Chart
  • Ring
.slide-pie-chart .pie-ring { 

}

The color to be set here should have an adjusted opacity. Do not use full solid color.

  • Text Value
.slide-pie-chart .pie-ring-value { 

}
  • Ratio
  • Bar
.slide-ratio .ratio-bar { 

}
  • Bar (Container)
.slide-ratio .ratio-bar-container { 

}
  • Value
.slide-ratio .ratio-value-amount { 

}
  • Slider
  • Knob
.slide-slider .slider-knob { 

}
  • Slider Bar
.slide-slider .slider-bar { 

}
  • Lines in the bar
.slide-slider .slider-notch:before, .slide-slider .slider-notch:after { 

}
  • Speech Bubble (Value)
.slide-slider .slider-knob-value { 

}
  • Tail of Speech Bubble
.slide-slider .slider-knob-value:after { 

}

 

WORDS TEMPLATES 

Below are selectors and rulesets for the Words Templates for QUIZ. Be guided by following these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

Template

Ruleset 
  • Missing Words
  • Text
.slide-missing-word .fade-in { 

text-transform: lowercase; 

}

Use the above code if your texts are in uppercase, and you want to change it to lowercase.

  • Word Blocks
.slide-missing-word .draggy { 

}
  • Box around the answers
.slide-missing-word .block-dk { 

}
  • Strike Out
  • Text
.slide-strikeout .fade-in { 

}
  • Missing Letters
  • Text
.slide-construct .statement { 

}
  • Letters
.slide-construct.game-playing .letter { 

}
  • Box around the letters
.slide-construct .block-dk { 

}
  • Sentence Builder
  • Placeholder
.slide-construct-sentence .droppy-container { 

}
  • Words
.slide-construct-sentence .draggy .btn { 

}
  • Box around the words
.slide-construct-sentence .block-dk { 

}

 

 

MATCH TEMPLATES

Below are selectors and rulesets for the Match Templates for QUIZ. Be guided by following these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

Template

 

Ruleset

 
  • Connect
  • Blocks
.slide-connect .connect-box { 

}
  • Blocks when clicked
.slide-connect .connect-box.active { 

}
  • Blocks when connected
.slide-connect .connect-box.complete { 

}
  • Drag to Match
  • Boxes (Left)
.slide-drag-to-match .draggies .block-dk { 

}
  • Boxes (Right)
.slide-drag-to-match .droppy-zone { 

}
  • Reorder
  • Icon
.slide-reorder.ready .draggy .btn:before { 

}
  • Box around the answers
.slide-reorder.ready .draggy-container { 

}
  • Blocks
.slide-reorder.ready .btn.btn-solid.btn-block { 

}
  • Image Pairs
  • Boxes
.slide-image-pair .image-container { 

}
  • Connecting Lines
.slide-image-pair .image-container.left:after, .slide-image-pair .image-container.right:after { 

}
  • Select in Order
  • Boxes
.slide-tap-in-order .tappy-child { 

}
  • Radio Button
.slide-tap-in-order .tappy.active .number { 

}

 

 

ENGAGE 🎮3c6846e9-5567-4b6b-acd3-63b4a4688e9b


GAMES TEMPLATES

Below are selectors and rulesets for the Games Templates for ENGAGE. Be guided by using these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

Template

Ruleset
  • Left or Right
  • Answer Box
.slide-game-true-or-false .game-statement { 

}
  • Left Side
.slide-game-true-or-false .game-false { 

}
  • Right Side
.slide-game-true-or-false .game-true { 

}
  • Left Side when box is dragged
.slide-game-true-or-false .game-false.active { 

}
  • Right Side when box is dragged
.slide-game-true-or-false .game-true.active { 

}
  • Image/Word Match
  • Choices
.slide-game-image-word-match .btn-word { 

}
  • Choices when clicked
.slide-game-image-word-match .btn-word.__active { 

}
  • Text
.slide-game-image-word-match .multi-content-text { 

}
  • Enlarge Image
.slide-game-image-word-match .match-image-container { 

height:unset; 

}
  • Memory
  • Tiles
.slide-game-memory .btn.btn-solid { 

}
  • Tiles when hovered
.slide-game-memory .btn.btn-solid:hover { 

}
  • Letter Jumble
  • Block Footer
.slide-game-jumble .jumble-letters { 

}
  • Letters (Choices)
.slide-game-jumble .draggy .letter { 

}
  • Letter when dragged
.slide-game-jumble .draggy.active .letter { 

}
  • Letter when placed
.slide-game-jumble .draggy.active-pos.is-positioned .letter { 

}
  • Displayed Letters
.slide-game-jumble.active .letter { 

}
  • Find-a-word
  • Container
.slide-find-a-word .grid-container { 

}
  • Completed Word
.slide-find-a-word .grid-highlight.complete { 

}
  • Next in Order
  • Block Footer
.slide-game-next-in-order .next-options { 

}
  • Container Block
.slide-game-next-in-order .next-sequence.block-dk.block-sm { 

}
  • Elevator
  • Container Block
.slide-game-elevator .block-dk.content-fill { 

}
  • Choices
.slide-game-elevator .direction-column { 

}
  • Jeopardy
  • Boxes
.slide-game-jeopardy .block-md.block-dk { 

}
  • Title
.slide-game-jeopardy .game-category-title { 

}


FEEDBACK TEMPLATES

Below are selectors and rulesets for the Feedback Templates for ENGAGE. Be guided by using these colors:

root { 

--main-color:#223042; /* dark blue / 

--accent-color:#00BAFF; / light blue*/ 

}

Template

 

Ruleset

 
  • Free Text
  • Input Button
.icon.icon-pencil { 

}
  • Pencil Icon
.icon-pencil:before { 

}
  • “Type your response”
#text-input-view #text-input-prompt { 

}
  • Slider
  • Knob
.active.slide-slider-survey .slider-knob-input { 

}
  • Slider Bar
.slide-slider-survey .slider-bar { 

}
  • Lines in the bar
.slide-slider-survey .slider-notch:before, .slide-slider-survey .slider-notch:after { 

}
  • Speech Bubble (Value)
.slide-slider-survey .slider-knob-value { 

}
  • Tail of Speech Bubble
.slide-slider-survey .slider-knob-value:after { 

}
  • Strongly Disagree & Strongly Agree
.slide-slider-survey .slider-label-min, .slide-slider-survey .slider-label-max { 

}
  • Tail on Speech Bubble of Strongly Disagree & Strongly Agree
.slide-slider-survey .slider-label-min:after, .slide-slider-survey .slider-label-max:after { 

}
  • Survey
  • Choices 
.slide-multiple-choice-survey .btn.btn-solid { 

}
  • Radio Button
.slide-multiple-choice-survey .selectable .btn:before { 

}
  • Selected Radio Button
.slide-multiple-choice-survey .selectable.active .btn:before { 

}
  • Radio Button Input
.slide-multiple-choice-survey .selectable.active .btn:after { 

}
  • Quadrant
  • Choices
.slide-quadrant-survey .btn.btn-solid { 

}
  • All Quadrants
.slide-quadrant-survey .slide-content .quadrant .quadrant-zone { 

}
  • Quadrant 1 (Upper Left)
.slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(1) { 

}
  • Quadrant 2 (Upper Right)
.slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(2) { 

}
  • Quadrant 3 (Lower Left)
.slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(3) { 

}
  • Quadrant 4 (Lower Right)
.slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(4) { 

}

 

:clipboard: Reference Websites

Learn more about CSS: CSS Tutorial

CSS Gradient: CSS Gradient — Generator, Maker, and Background

CSS Shapes: CSS Clip-Path Generator - CSS Portal

Introduction to CSS Course:   Learn CSS