The CSS Box Model is what defines how much space an element takes up on the page. The Box Model is divided up into four major parts: Content, padding, border, and margins.
Within your web browser’s element inspector, you can look at each element’s box model. In Chrome, this is found under the Elements tab in a Styles submenu.
If you hover your mouse over the different areas in that model, it will highlight those areas within the page.
Let’s dive a little deeper on what each area is.
This is where you’ll put text or other elements. …
CSS Specificity is what decides what styles are applied to elements; the more specific the CSS selector, the more weight it has in determining the style of an element.
Take the following HTML and CSS as an example:
Q: What background color will the article element have?
A: White, since the CSS selector the white background color is more specific.
To see this in action, the element inspector will show you all the styles applied to an element in the order of specificity.
There are five main levels that determine a style’s specificity and it all has to do with the syntax used in the selector. They are, in order of least-specific to…
I’ve recently migrated my web application to run inside docker containers and use
docker-compose to spin up all the required dependencies in their own containers (Postgres and Redis, in my case). This application uses Python’s Flask framework and I use
pdb to debug issues.
While researching solutions, I first ran into this article by Vladyslav Krylasov that suggested adding some configuration to my docker-compose.yaml and using a module called
remote-pdb with a telnet client. This worked, but it was a little more cumbersome than I wanted.
My solution was to use
docker attach. First, I still needed to edit my docker-compose.yaml file to add the
tty attributes to my application…