Advanced CSS Classes

On this Page:


What is a CSS Class?

In special circumstances Web Services will create CSS Classes that allow you to tell the block editor to display a particular block differently than it normally would. Please note that these specific advanced CSS Classes are only available on the department.kzoo.edu websites.

How to Apply an Advanced CSS Class

To achieve the effect listed, open the “Advanced” tab in the block editing sidebar, and type the class name into the “Additional CSS Class(es)” field.

CSS Classes at K

For any block:

Class: pad-left
Effect: Adds a 2 “em” padding (white space) to left

Class: pad-right
Effect: Adds a 2 “em” padding (white space) to right

Class: smush
Effect: reduces space between letters.
Note: Use sparingly when you really need something to fit. Not intended for large blocks of text.

For any block that does not provide a color-palette chooser (e.g. Heading):

Class: black
Effect: Turns all the text in the block black

Class: orange
Effect: Turns all the text in the block brandK orange
Note: For accessibility, the text must be at least 14 point (typically 18.66px) and bold; or 18 point (typically 24px) or larger.

Class: dark-gray
Effect: Turns all the text in the block dark-gray

Class: red
Effect: Turns all the text in the block brandK red

Class: aqua
Effect: Turns all the text in the block brandK aqua

Class: green
Effect: Turns all the text in the block brandK green

Class: purple
Effect: Turns all the text in the block brandK purple

Heading block:

Class: caps
Effect: Displays the heading in all capital letters.
Note: Type in mixed-case then apply this class for better universal experience than typing in all caps.

Class: clearnone
Effect: Prevents the header from taking up all the horizontal space; allows other blocks (e.g. images) to float up next to the heading instead of starting below the heading.

Paragraph block:

Class: justify
Effect: Fully-justifies text within the block

Class: clearfix
Applies to: Paragraphs that have left or right alignment
Effect: Prevents text that follows the aligned block from wrapping around it

Image block:

Class: clearfix
Applies to: images that have left or right alignment
Effect: Prevents text that follows the aligned block from wrapping around it

Cover IMAGE block:

Class: shortblock
Effect: Reduces minimum height of the block to 2/3 of the default

Columns block:

Class: hasmargin-wide
Effect: Adds a 3 “em” margin to columns

Class: hasmargin-narrow
Effect: Adds a .5 “em” margin to columns

List block:

Class: nobullet OR hidebullet
Effect: Suppresses bullets

Class: nomargin
Effect: Removes left margin from (un-indents) list

Class: upper-roman
Effect: replaces numbers with uppercase roman numerals. Indented sublists follow outline A., 1., a., i.

Class: upper-alpha
Effect: replaces numbers with uppercase alphabet. Indented sublists follow outline 1., a., i.

Class: lower-alpha
Effect: replaces numbers with lower-case alphabet. Indented sublist is lower-case roman

Class: lower-roman
Effect: replaces numbers with lower-case roman numerals.

Class: checklist
Effect: replaces bullet with open square

Table block

Class: grid
Effect: light grey grid outline around cells