1. CSS Basics in Dash
Let's learn how to style and position our Dash elements using CSS.
2. What is CSS?
So what is CSS?
CSS stands for cascading style sheets.
It is a language that is used on web pages to determine how objects are styled and placed.
CSS can control:
the text and font properties such as size, color, and style,
and the size and shape of HTML objects.
We can also control whether objects are placed next to, or above, each other.
3. CSS on the web
Most websites have their CSS stored in CSS files.
These are read in by the browser then the page loads to style the HTML elements on the page.
You can open up 'developer tools' on Chrome and see for yourself.
Here is Google's homepage, which has a CSS file for styling that page.
In this course, we will use an alternate method, the style property of HTML tags.
4. CSS on HTML elements
Instead of a CSS file, you can directly style a specific HTML element in its own code.
This is controlled via the style property of an HTML tag.
In this property, we can write CSS statements as a string, separated by a semi-colon. Each statement is like a dictionary in Python, with the property to set and the value to give it.
5. Some CSS styling
In this example, there is a normal H1 tag and an H2 tag with CSS properties set.
We can see the styling appear on the H2 element. We made the H2 tag bigger than the H1 tag using the font-size property of CSS.
6. Editing live CSS
You can even try editing some CSS on a live website.
Right-click on an element on the page, then select 'inspect' and edit a CSS property. Here we are editing the logo width on Google's home page.
Note that this is just a local change; it only works for your browser until you refresh.
7. CSS in Dash
In Dash, CSS is very important for styling and placing our components. Dash components have a style argument that accepts CSS as a dictionary.
For example, we can use the previous styling code but in a Dash component. Recall we set the font size of an H2 object to be 50 pixels with a red color.
We can see the normal H1 and H2 HTML components and the style property dictionary. The dictionary keys are CSS properties, and the values are the associated CSS property values.
8. CSS for color
CSS can be used to set
the background color of an object via the background-color property.
The text color can be set using the color property.
Both of these methods accept basic color strings or RGB codes, such as 0 0 255 being blue.
As a reminder, RGB codes are a three-number code specifying how to construct a color by mixing levels of red, green, and blue. Here are some examples of RGB codes that produce a purple-like color as well as a shade of green, red, and dark blue.
9. CSS for Size
The size of an element can be changed via the width and height properties, just as we did on the live demo using Google's homepage logo.
Here is an example in Dash, where we resize the company logo to be a square, 250 pixels by 250 pixels.
10. CSS size as a percentage
We can also set the width and height of an element to be a percentage proportion of the parent element, rather than specifying exact pixel sizes.
This example sets the image height and width to be fifty percent of the height and width of the parent item, the enclosing Div.
11. Let's practice!
Let's practice using CSS to style some Dash apps.