Advanced CSS in Dash

1. Advanced CSS in Dash

Let's take our CSS skills to the next level by learning to control object layout and spacing.

2. CSS for spacing between objects

The box model in CSS helps us think of every HTML element as a rectangular box with key layers. In the middle is the content - this could be text, an image, or any other component. We can set its height and width. Outside our content is a space called padding. Next, we can add a border between the padding and margin of different styles and sizes. Outside the border, there is more space called a margin, which separates one element from another. This may seem a little confusing at first, but we'll work through some examples now.

3. Adding a border

The border property in CSS takes three elements: First is the thickness in pixels. Next is the style - like solid, dotted, or dashed. The last property is the color. This can be a string or RGB code.

4. A border on our app

Consider the dashboard we created last lesson. We can add a style dictionary with a 5 pixel dotted red border. This is what is produced.

5. CSS spacing

We can set the padding or margin spacing for an HTML element by specifying four numbers. These numbers are the spacing on each side, in a clockwise direction, from top, right, bottom, and left. We could instead specify one number, which will be applied to all sides. Alternatively, you could specify two numbers, and they will be applied to the top-bottom and left-right, respectively. Here's an example with four padding values applied to an HTML component.

6. Adding padding in Dash

Let's compare padding and margin in action. First, we apply a border but no padding. Now, we add 100px of padding. Notice the extra space inside the border on all sides.

7. Adding margin in Dash

If we instead add margin rather than padding, we see extra space outside the border.

8. Centering with auto margin

If we only specify a 100 pixel margin as shown, our graph would end up on the left. Instead of specifying a number, we can use the word auto as the second argument to center align our objects. The auto keyword balances left and right margins evenly, a handy trick to center elements horizontally.

9. CSS for layout

CSS can sometimes be frustrating, as we aren't sure why elements are not aligning. It may be because HTML objects are all either inline or block elements. Inline elements are able to render on the same line, next to each other. We can't set the height, width, or spacing properties of these. Some examples of these include strong, a, and image tags. Block elements can't render side-by-side as they include a line break; however, we can set the sizing properties. Some examples of these include title tags and divs. There is an intermediary option of inline-block where we can set the spacing properties, but they can also render side-by-side.

10. Inline-block elements

Here's an example of a few 50 by 50 pixel divs of different colors. The blue will be block by default, as all divs are. We set the red and green to be inline-block using the display property. Notice how the red and green can appear side-by-side now? Our change in the display property allowed this.

11. Let's practice!

Let's practice using advanced styling skills with CSS in our Dash apps.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.