CSS tips that every web designer should know

1. Font shorthand

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

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

3. write your print styles in a separate file

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

4. text vertical-align in CSS

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

.section h2 { color:red !important; }

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

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

body{ font-size:62.5%; }

9. CSS reset by Eric Meyer

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;
}

--

--

Web Designer and Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store