DR. JENNIFER LYNN WAGNER

D2L Brightspace Tips: CSS Tricks

The D2L toolbar includes many options for adding colors and positioning elements on your pages that is actually CSS instead of HTML. Although you don't need to know CSS to create pages in D2L, it is worthwhile to learn the basics so that you can customize the look of your content. W3Schools and MDN are good sites for beginners. It is recommended to check all of your course pages with the axe DevTools extension for any accessibility issues (such as insufficient color contrast or missing alt text) that need to be addressed before making them available to students.

Below I have included a few useful CSS properties for customizing the elements on your pages. You can add these CSS styles without going into the source code editor. Click on the element, then click the + sign in the toolbar, choose Attributes, and paste the property into the Style box. If there is more than one property, separate them with a semi-colon. (Note that some CSS does not work in module descriptions in D2L, e.g. shadows.)

Margins/Padding and Borders

If you need more spacing around elements, add margin: 10px or padding: 10px. You can also specify -top, -bottom, -left, -right if you don't want the spacing on all four sides. Margins add space to the outside of the element, whereas padding adds space between the edge of the element and a potential border.

Borders can be added to elements by specifying the width, style and color - which also helps to illustrate the difference between margins and padding. For a solid black border, use border: 1px solid black

This paragraph has no margin or padding but does have border: 1px solid black

This paragraph has margin-left: 50px; border: 1px solid black

This paragraph has padding-left: 50px; border: 1px solid black

Rounded Corners

If you want rounded corners on your images, use border-radius: 15px or if you want to change square images into circles (or rectangle images into ovals), use border-radius: 50%

Black cat looking at camera Black cat looking at camera

Grayscale Images

Use filter: grayscale(100%) to change a color image to black and white.

Black cat looking at camera

Box and Drop Shadows

To add a nice shadow to an image, use box-shadow: 2px 4px 8px #585858. If you are using transparent images, use filter: drop-shadow(2px 4px 8px #585858) instead so that the border goes around just the edges of the image and not the entire box.

Black cat looking at camera

Background Clip

Add the following to large size text so that the background image shows through in the text: background: url('https://picsum.photos/id/1015/200/'); background-clip: text; -webkit-background-clip: text; color: transparent

Swap out the image for one of your own, or use Lorem Picsum for sample photos.


CLIP TEXT

Vertical Column Headers in Tables

If you have a table with several columns and need to save space in the column headers, you can rotate the text 90 degrees using writing-mode:vertical-lr; text-orientation:mixed or display one letter per line using using writing-mode:vertical-lr; text-orientation:upright

Mixed Upright
Cell 1 Cell 2