Basic CSS Styling tips

Submitted by editor on Tue, 11/15/2016 - 14:29

Sizes : em and px

By default on all browsers 1em is equal to 16px. In px sizes are fix and can't zoom in or out but with em, sizes are relative to the parent element. If you need to use zoom feature, use en intend of px. You can also use a mixin SCSS or LESS like

@include fontSize(16);

@mixin fontSize($px) {
  font-size: ($px/16) + em;


Blank (Space) in :after or :before

:after {
  content: '\00a0';


SASS (SCSS) and LESS Syntax:

Calc() function with LESS (calc allow to calculate)

width:  calc(~'100% - 50px');

Multiline truncation with ellipsis

/* SASS mixin for multiline*/
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;

.block-with-text {
  @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: white);  


jQuery Style changes

Add odd, even to a list usin jQuery


Z-index of position:absolute

To use z-index with the elements position:absolute, all z-index defiend elements mush have position:absolute or position:relative.
- div-parent (position:relative)
- - div-child-1 (position:absolute)
- - div-child-2 (position:relative)
<- here, if you don't set the property, by default it can't define z-index.


Style input's placeholder (SCSS /LESS example)

input {
  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-style: italic;
  &::-moz-placeholder { /* Firefox 19+ */
    font-style: italic;
  &:-ms-input-placeholder { /* IE 10+ */
    font-style: italic;
  &:-moz-placeholder { /* Firefox 18- */
    font-style: italic;

Remove / Replace the html "Select" (selectbox's) dropdown arrow

  select {
    //Remove default arrow
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    &::-ms-expand {
      display: none;
    //Replace with an image
    background-repeat: no-repeat;
    background-image: url("/path_to/selecebox_arrow.png");
    background-position: right;


Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.