10 CSS Rules You Should Know


Though creating any kind of web design is possible these days, but to learn few techniques which not only make working on web pages simpler but much more efficient is always good. Here are few CSS rules which can come handy these days when you are designing a web page.

These are well supported by all the major browsers these days as well:

@font-face

The days have gone when the web used to be rules by a limited number of fonts like Arial, Verdana, Times new roman which made the page had the same monotonous look over years. These days the @font-face rule allows the designers to import any type of font by including their eot, woff or ttf files. Even more, there are free online fonts available by Google Webfonts or Typekits. The new and unlimited range of web fonts gives a complete new and refreshing look to the website.

@font-face {
font-family: Blackout;
src: url("assests/blackout.ttf") format("truetype");
}

To use google font, you can just include the font file and you are good to go:

<link href='http://fonts.googleapis.com/css?family=Quando' rel='stylesheet' type='text/css'>

margin: 0 auto; –

This is probably the first thing you’ll learn and will always need when using CSS. This rule aligns any block to the center of its container.

#container {
 margin: 0 auto;
}

@background-size

– How many times have you dropped the idea of designing a page with 100% background size since in some cases browsers doesn’t support it, in other cases different resolutions/pixel ratio totally break the page. The @background-size rule is one useful rule provided by CSS3 to eliminate this problem by writing just one line of code.

body {
 background: url(image.jpg) no-repeat;
 background-size: 100%;
}

@media

– There is always a requirement to have a printable view of your web page which should not have the headers, footers and few other elements. @media rule comes handy in such cases. It lets you specify the styling for print media. These days this rule also enables the designers to create responsive or adaptive designs.

@media screen and (max-width: 960px) {
}

color: rgba();

– In most cases, designers used to create PNG images to create buttons and other icons/images to have transparency. This not only decreases performance to load an extra image but a change in the color requires deploying a new image always. This rule provides a way to have transparency with the help of RGBa color modes. Using this rule, you can set the RGB property along with the transparency required.

.btn {
 color: rgba(0,0,0,0.5);
}

overflow: hidden;

– It is one of the clearing solutions which works in almost 90% of the cases.

.container {
 overflow: hidden;
}

.clearfix

– In cases where the overflow:hidden doesn’t work, you can try using .clearfix to clear any of your HTML contents individually.

.clearfix:after {
 content: ".";
 display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}

transform: rotate(30deg);

– This rule rotates an item as per the defined rotation angle. No need to write any cluttered javascript code to make this possible.

.title {
transform: rotate(30deg);
}

input[type=”text”]

– To style a text box, we generally define a class on it and then style that class in the CSS. The input[type=”text”] rule helps in styling the form elements without having to define a class/id on it.

input[type=”text”] {
 width: 200px;
}

a {outline: none}

– To remove that huge dotted line from your page which you click a link, this rule is used.

a {outline: none;}

Leave a Reply