9 Custom CSS Training

Directions to complete each portion can be found in the “CSS Documentation” part (part 3) of MSUL’s OER Program Internal Processes.

Dropdown

The following text is a transcript. Please put it in a custom dropdown

“Lorem ipsum dolor sit amet. Nam corporis voluptatibus et fuga corrupti vel dolores vero cum nihil similique et necessitatibus dignissimos et magnam laudantium in libero quasi. Ab vero nesciunt sit nisi nihil sit tenetur fugit ea aliquid ipsa non doloremque voluptates.

Eos alias labore et aliquam odio aut autem ipsa est aspernatur repellendus. Ab dolores placeat et quos rerum et laboriosam quia non facere dolores vel veritatis dicta.

Et sunt accusantium sed tenetur accusamus et omnis quaerat non sint harum et voluptatem sapiente. Ut suscipit natus sit possimus enim ea consectetur recusandae est porro amet sit officia vero in fugit repellat.”

Custom Lists

Two-Column List

The author wants to break up the same list into two columns, but used a table to do it. Please use CSS to turn this into one custom list with two columns.

Custom Numbered Lists

The author wants to use Persian numerals as markers for their list, but this is not a semantic list. Please use CSS to turn this into a custom semantic list.

۱. lorem

۲. ipsum

۳. dolor

Horizontal List

The author wants this list to be horizontal, but this is not a semantic list. Please use CSS to turn this into a custom semantic list.

1. Lorem 2. Ipsum 3. Dolor

Blank Spaces

The author is using underscores as blank spaces. Please use CSS to implement the blank space solution.

This is a ___

She is ___ tomorrow

Glossary Terms in Textbox Headers

The author wants to use a glossary term in a textbox header, but the default glossary term color (see preview) does not have sufficient color contrast with the dark blue background. Please use CSS to remediate this.

Change Color of All Headers

Change the color of all headers with the class “change-color” (which is all of the headers on this page). Use Custom CSS to do this.

Once you do this, replace your previous CSS, and try to change the color of only h2 headers with the class “change-color”. Use Custom CSS to do this.

Temporarily Change Language Tagged Text Color for Accuracy Checks & Scale up Text of a Certain Language

I’ve language tagged the following text as Russian. Or I think I did. Use custom CSS to change the color of all text tagged as Russian see if I did it correctly.

Лорем ипсум долор сит амет, при еа партем лабитур лобортис, мел еи фацер детрацто, ид вим семпер рецусабо делицата. Ид синт елитр вим, те меа малис ехплицари. Ребум сонет малуиссет еа нец, ет нам етиам импедит фиерент, хис но вирис фабеллас. Иллум аргументум яуи ид. Саперет реформиданс не хис, ех долорум персецути форенсибус нец.

After this, scale up all text tagged as Russian by 150% with CSS.