Tips and Tricks
Let's discuss a few of the tips and tricks for beginners while developing layouts.
We'll cover the following...
- Center a div with the CSS declaration of margin: 0 auto
- Never override a framework CSS class directly
- Narrow containers in Bootstrap
- Use the <ul> element to style a navigation
- Avoid over-qualified selectors
- Add a shadow to a div
- Add a shadow to text in CSS
- Add effects with hover and transition
- Using RGB alpha and HSL alpha colors
- Use CSS filters to turn an image into grayscale
We’ll go over the top 10 useful things to know that we haven’t covered so far in the course.
Center a div with the CSS declaration of margin: 0 auto
To center any layout, for example, inside the <body> element, you can use the world-famous margin: 0 auto.
For example:
<body><div class="layoutWrapper"><!-- the rest of layout --></div></body>
The CSS:
.layoutWrapper{margin: 0 auto;width: 1000px;}
The above code will center the <div> with the class of layoutWrapper inside the <div> element. It will also make the layoutWrapper div 1000 pixels wide.
Never override a framework CSS class directly
This tip has to do with CSS in frameworks, such as Bootstrap.
@media(max-width:800px){.d-flex {display: block;}}
The above code is wrong because it’s a confusing signal. It’s like switching colors on traffic lights so that green means stop and red means go.
The coder was signaling the property of display being set to flex, when in reality, they're setting it to block.
The solution for the above issue is simple.
<divclass="d-flexd-blockM">...</div>