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 is a way of considering each HTML element as a box with some important properties.
In the middle is the content, which includes our H1, P, image, or other content. We can set the height and width of our content.
Outside our content is space called padding.
Next, we can add a border, between the padding and margin, of different styles and size.
Outside the border, there is more space called 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 argument in CSS has three properties, separated by spaces.
The first property is the width or thickness of the border in pixels.
The second property is the style. This could be solid, dotted, or other styles.
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 spacings 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.
See this example, we set padding with four numbers which would produce this spacing around some HTML object.
6. Adding padding in Dash
Let's see the difference between padding and margin by further editing the style dictionary of our example. Here we see it without padding, but still with the border.
Now adding padding of 100px, we see extra space inside the border, on all sides since we specified one number.
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. It causes the left and right margins of an object to be equal, taking up the total space left besides the object itself. This is a powerful and important trick.
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.