The correct way to do word wrapping (breaking) by using CSS rules

You often have to deal with words that are too long and they possible do not fit as a whole inside an HTML element. In such cases you have to break the word and put the part that does not fit in the next line. On the other side, you do not want to always fill the lines of an HTML element with text, which means that you do not want to break every single word, but instead you only want to break the words that are wider than the width of the containing HTML element.

Read the complete article

How to correctly combine the font and the line-height CSS rules in an HTML-element?

When using the font rule together with the line-height rule, there is something that you have to pay attention to, if you want to be sure that the combination of the two rules works as intended.

To start with, the font property combines the font-family, the font-size, the font-weight and the line-height in one command. But what happens if you do not set the line-height inside the font property but use the line-height rule explicitly?

Read the complete article

Get Web Essentials to work with TypeScript in Visual Studio 2013

When you install the Web Essentials plugin to your Visual Studio 2013 installation it is very probable that the next time you open a TypeScript project in Visual Studio the program will freeze and you cannot do any further action inside Visual Studio.

Read the complete article

How to place the elements of a list at the bottom of an absolute positioned parent element

Suppose you have a HTML-list and you want to place its elements at the bottom of a parent element which is positioned absolute in your website and also has a predefined height. Apart from that you also want the list to be scrollable, when not all elements can be shown inside the parent element.

Consider the following HTML code which solves these two problems:

Read the complete article

How to create a less function (mixin) and use it for implementing beautiful and customized CSS box-shadows

Less supports the creation of pseudo-functions that can be used as CSS-classes in your less files. Doing this way you can save multiple keystrokes, automate your stylings and avoid syntax errors.

Lets take a look at a function that automates the creation of CSS box-shadows and supports new browsers by making use of browser prefixes.

Read the complete article