Custom CSS Cheat Sheet

Common elements within EdApp. Check out this article for more information on the basics of CSS.

 

Main buttons within the lesson

.btn.btn-solid {

   color: #fff;

   border: 1px solid rgba(0,0,0,0.2);

   background-color: #FFCC33;

   background-clip: padding-box;

}

Targets secondary buttons like the ‘okay I'm done’ button

.btn.btn-muted {

   color: #fff;

   background: #803d9a;4

}

 

Progress bar colour

#indicator {

   color: #803d9a;

   background-color: rgba(0, 0, 0, 0.20);

}

 

 

Menu button on the top right

#lesson-header-nav {

background: rgba(251, 249, 249, 0.18);

}

 

Selectable Buttons

.selectable.active .btn {

background: #FFCC33;

color: #fff;

}

 

Takeaway pop-up

#slide-answer {

   border-bottom: 20px solid #000;

   border-top: 4px solid #000;

   color: #fff;

   background-color: #FFCC33;

   background-image: none;

}

 

CSS Properties

 

background all background properties in one declaration

background-color background color

background-image background image

border-style ADD dotted, dashed, solid, double, groove, ridge, inset, outset

border-bottom-color color of the bottom border

(bottom can be replaced with "left" "right" or "top")

border-color border color

border-width border width

border-radius roundness of corners (0px is right angles) (use percentages to make oval-shaped)

box-shadow creates shadow from element ex (10px 10px grey;)

color text color

display: inline-block make a block around text (like Image Slider)

filter image effects: grayscale, blur, invert etc.

 

font all font properties in one line

@font-face declare non-web-safe fonts

font-family font of the element

font-size font size

font-stretch widen or narrow text

font-style font style: normal, italic, oblique

font-weight use bold or thin characters

 

height height of the element

justify-content justifies flexible container's items horizontally if necessary

letter-spacing space between characters

linear-gradient (angle, color-stop1, color-stop2)ex. (to right, orange, black) (use with BGimage)

line-height line height of text or inline-block elements

list-style all list properties in one line

opacity transparency level of an element

 

padding padding between the element border and content

padding-bottom padding bottom

(bottom can be replaced with "left" "right" or "top")

text-align horizontal alignment of text

vertical-align vertical alignment

For further reading on CSS and more info about what each of the above properties target check out: https://www.w3schools.com/css/default.asp

 

 

Side note: some HTML you might find useful. The following must be applied to the individual text fields within the lesson.

 

 

 

Custom Font Size

<p style=“font-size:20px”>

 

Text colour in a lesson

<span style="color:#54585A">   YOUR TEXT HERE </span>

 

Text alignment

<p style="text-align:center;">Centered paragraph.</p>