They can leave you scratching your head for days, wondering why you element has a purple background and it’s in the left bottom corner. CSS issues like these can leave you feeling frustrated, especially if that’s the only thing holding you back.
Of course there are more of these little quirks than I could list, but here are 5 that I’ve run into more than I would have liked.
Vertical alignment of one line of text.
Almost every time I’ve tried to make a navigation menu, this issue pops up. The trick is more simple than I’d like to admit. If you make the height of your menu the same as the line-height of the text, you don’t have the issue with the extra space or shifted-looking letters. It should look something like this:
.nav-element {
height: 24px;
line-height: 24px
}
Make sure images resize without distortion.
From time to time you’ll get an image with weird proportions and you need it to keep those proportions regardless of what screen size its on. You can do that by setting the max-width to 100% and the height to auto.
What that does is keep the image from overflowing on a smaller device and it calculates the height of the image based on the width. Now you don’t have to worry about your images getting that stretched or squeezed look. You can do it with something as simple as this:
img {
height: auto;
max-width: 100%;
}
Reset all browser default styles.
When you have an element that is consistently wrong no matter what you do to it with CSS, it could the browser overwriting your styles. Browsers have preset margins, padding, borders, and other stuff. Those can really mess up your layout.
The good thing is that there are so many CSS reset sheets out there, you can just pick one you like. A CSS reset sheet removes all of the browser styles so you start fresh on every browser. Here’s one that I use on my websites and one of the more widely known reset sheets: https://meyerweb.com/eric/tools/css/reset/reset.css
Overriding styles.
I want to caution you here. This is a technique that should only be used when you really need it. Otherwise there will be chaos and sadness when you try to update your styles later. Although if you want a certain style to take priority over all of the others, you can use the !important rule.
You can add this rule to any CSS property and it will always take precedence over all other styles. That’s why you want to use this only when you truly have to. If every style is “important”, then the cascading flow of CSS is interrupted and you don’t have any logic behind how styles are applied. Here’s what it looks like in use:
p {
font-size: 24px !important;
}
Getting the vertical screen height right.
Have you ever wanted to fill a screen with a particular element or class of elements? Well you can do that by using the view height unit of measure. The way it works is that you set the height of your element(s) to the percentage of the screen you want it to fill. One consideration you need to remember is how the fill will work on different sized screens. Here’s how you use the view height:
.screen-fill {
height: 75vh;
}
Hopefully these little CSS tricks will help you develop just a little better or faster. Other than that whole issue with centering elements, these tricks just scratch the surface.
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding