CSS tips that every web designer should know

3 min readSep 24, 2022

1. Font shorthand

as usual, we write font styles as bellow

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;

But there is no need to use the long code above, you can simply use the following shortened code:

font: FONT-WEIGHT FONT-STYLE FONT-VARIANT FONT-SIZE/LINE-HEIGHT FONT-FAMILY;font: bold italic small-caps 1em/1.5em verdana,sans-serif;

2. select an element by using two or more classes

Another CSS trick is that you can assign more than one class to each HTML tag, so that you separate several classes using space in the class property

HTML
<p class="text side">...</p>CSS
.text.side{
}

3. write your print styles in a separate file

You may use Media Query for print, but also can write in a separate file without media query, only add the media attribute in the HTML link tag.

<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

4. text vertical-align in CSS

Imagine you have a navigation menu on your site whose height is set to 2em. Now you use the vertical-align command in CSS. But using vertical-align will have no effect and the text will still be placed on top of the box!

So what to do?

It is enough to set the value of line-height equal to the height of the desired element!

Here, the height of our desired element is 2em, so it is simply enough to set the line-height value to 2em and the text will be placed in the middle of the box.

5. Overriding all styles

his should be used sparingly because if you do this for everything, you’re going to find yourself in trouble in the long run. However, if you want to override another CSS style for a specific element, use !important after the style in your CSS. For example, if I wanted the H2 headers in a specific section of my site to be red instead of blue, I would use the following CSS:

.section h2 { color:red !important; }

6. Use capital letters in the first letter of the sentence

You can capitalize the first letter of your sentence, just like in newspapers and magazines! To create this effect, you can use the:first-letter pseudo-class.

p:first-letter{ text-transform:uppercase; }

7. Change the style of selected text

::selection{background-color:red; color:white;font-weight:bold;}

8. Choosing a base font-size for body

Appropriately setting the font size to 62.5% in the <body> tag makes 1em equal to 10px. This allows you to quickly and easily use the EM unit and know how many pixels it equates to.

body{ font-size:62.5%; }

9. CSS reset by Eric Meyer

The CSS code snippet below resets all browser default values and makes your CSS codes work in the same way in all browsers and neutralizes browser incompatibility.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: ‘’;
 content: none;
}
/**
 * remember to define focus styles!
 */
:focus {
 outline: 0;
}
/**
 * remember to highlight inserts somehow!
 */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}
/**
 * tables still need ‘cellspacing=”0"’ in the markup
 */
table {
 border-collapse: collapse;
 border-spacing: 0;
}