CSS tricks for web designer

— Absolute positioning

If you want to define where an element is placed on the website at all times, absolute positioning is the key to make this happen. Absolute positioning allows you to control exactly where an element will stay. And then use top, right, bottom and left, accompanied by a pixel value to control the place.

position:absolute;
bottom:10px;
right:10px

The CSS above sets the position of an element to stay 10px from the bottom and right edges of the browser. 

— Use a CSS preprocessor

Use Less or Sass or SCSS when you develop the website. They can help you declare colors, sizes, etc one single time, and create CSS with for cycles and similar things. 

— Link states

The :link pseudo-class controls all links that haven’t been clicked on yet. The :visited pseudo class handles the styling of all of the links you’ve already visited. This tells website visitors where they have already been on the site, and where they have yet to explore.

a:link { color: blue; }
a:visited { color: purple; }

— Resize images to fit

Sometimes images are needed to fit a certain width, while scaling proportionally. An easy way to do this is to use max width to handle this.

Here is an example:

img {
    max-width:100%;
    height:auto;
}

— Split HTML and CSS

It is the best idea of creating different CSS files (for example, one for desktop and one for mobile) while developing, and only, in the end, merge them.

The same principle can be made with HTML. If you’re not developing in SPA environments, you can use PHP to include and require pieces of HTML code.

— Direct children

Use > to select the direct children of an element.

#footer > a

This will select and style all of the active link elements that are immediately under the Footer ID.

—  :before

This CSS is a selector that allows you to choose a CSS element and insert content before every element with a specific class applied to it. 

h3:before { 
    content: "More: ";
<span class="new-blog"> color: #F00;</span>
}

— :after

Like the :before selector, :after can be used to insert content globally on specific elements. A practical use would be adding “see more” after every excerpt on an article . You can do like this:

p:after{ 
    content: " -Read more… ";
    color:#f00;
}

By Tsuki