HTML and CSS Basics, part 24: CSS tips and tricks for beginners
The top 10 useful things to know (which weren't mentioned before in this article series)
By: Ajdin Imsirovic 27 September 2019
It’s time to wrap up this article series.
Photo by
Steven Welch, @stevewelch on Unsplash
Tip #1: Center a div with the CSS declaration of margin: 0 auto
To center any layout, for example, inside the <body> element, you can use 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 <body> element. It will also make the layoutWrapper div 1000 pixels wide.
Tip #2: Never override a framework CSS class directly!
This tip has to do with CSS in frameworks, such as Bootstrap.
I’ve actually seen a junior dev at work do this:
@media (max-width: 800px) {
.d-flex {
display: block;
}
}
Obviously, the above code is wrong because it’s a confusing signal. It’s like switching colors on traffic lights.
The coder was signalling a property of display being set to flex, when in reality he’s setting it to block.
The solution for the above issue is simple.
Here’s an example HTML:
<div class="d-flex d-blockM">
...
</div>
Of course, inside CSS, you can add this:
@media (max-width: 800px) {
.d-blockM {
display: block;
}
}
What you see above is a clean solution that will work even when you don’t know much about a framework.
Obviously, the letter M in the d-blockM class name means “mobile” - which should be sorted out with the rest of your team, so you’re on the same page.
Tip #3: Narrow containers in Bootstrap
Another Bootstrap quickie: containers come in two flavors: container-fluid, and container.
Each one has its own widths. But what happens if you want a very narrow container?
Just add it a max-width: <your-desired-width>.
Here’s the starting code:
<div class="container">
...
</div>
The container class already exists in the Bootstrap framework - meaning it’s pre-written, so we shouldn’t override it. Instead, to extend it, we add our own custom class, and name it, for example, container-narrow:
.container-narrow {
max-width: 400px;
}
Now we can use it in HTML:
<div class="container container-narrow">
...
</div>
Tip #4: To style a navigation, use the <ul> element
Most navigations on the web are simple lists.
First, you specify a <ul>, and then inside it, you specify as many <li> elements as you want.
A more modern approach is using the <nav> element as a wrapper, and then <a> elements as links - which is definitely more semantic.
On the internet, you’ll see the first approach, the second approach, or the combination of the two. It’s good to know what’s out there, but it’s better to stick with <nav> if you can.
Tip #5: Avoid over-qualified selectors
Here’s an example of an over-qualified selector:
div.someClass {
/* some code */
}
Why the div in the front? Almost always, you can just use something along these lines:
.someClass {
/* some code */
}
Tip #6: How to add a shadow to a div
Here’s a CSS property we haven’t discussed before: box-shadow.
Here’s an example of using it:
.shadow1 {
box-shadow: 5px 5px 5px 5px lightgray;
}
Here’s the result of using the box shadow on a div.
Tip #7: How to add a shadow to text in CSS
Similar to box-shadow for the box-model, we can add shadow to text with the text-shadow property:
.text-shadow1 {
text-shadow: 10px 10px tomato;
}
Here’s a live code example of the above property in use.
Tip #8: You can add nice effects with hover and transition
Putting together several concepts we covered in this article series, let’s have a look at a practical example: a button with a hover effect.
Tip #9: Using rgb alpha and hsl alpha colors
You’ve seen colors in this article series mostly as:
- named HTML colors
- hex colors (such as
#ffffff, i.e white)
There are two additional colors often in use in CSS: rgb and hsl.
Here’s an example of an rgb color:
div {
background: rgb(255,255,255);
}
The above color is white. The values in rgb range from 0 to 255 (for each of the three: red, green, and blue).
The black color is written as rgb(0,0,0);
However, we can easily make it transparent, by adding it the fourth parameter, alpha, so that it becomes, for example:
div {
background: rgba(0,0,0,1)
}
The above color is still black, but we can easily make it “more gray” by specifying its alpha (i.e its transparency), as a decimal number between 0 and 1.
For example, this is rgb black with 10% transparency: rgba(0,0,0,0.9).
The same thing works for hsla color notation, where hsl stands for “hue, saturation, lightness” and a stands for “alpha”.
Here’s an example of hsl red:
div {
hsl(0,100%, 50%)
}
Here’s the same hsl red, written with the alpha, i.e using the hsla notation:
div {
hsla(0,100%,50%,1)
}
Finally, let’s update the above example with a 10% transparent red color:
div {
hsla(0,100%,50%,0.9)
}
Colors in CSS are a very interesting topic, but in my opinion, a beginner should not dive too deep before they’ve got at least several layouts under their belt. That’s why I’ve waited all the way to the end of this article series to introduce you to rgb, rgba, hsl, and hsla.
Tip #10: Using CSS filters, you can quickly turn an image grayscale
Here’s a great tip to quickly update an image.
Consider this article’s intro image:
To make it gray, all we have to do is add this CSS:
filter: grayscale(1);
That’s it, our image is now monochrome:
We can even control the amount of grayscale added:
In the above image, the grayscale is 50%.
The css we used is this:
filter: grayscale(0.5);
This article concludes our introduction to HTML and CSS.
Use the below links to navigate through other tutorials in this guide.
You are here: Part 24, CSS tips and tricks for beginners
