Line25

10 CSS Rules Every Web Designer Should Know

Read the full post

Through experience as web designers we memorise all kinds of code syntax, hacks and snippets. With CSS in particular there is a number of rules and declarations that can really help transform your website designs and open up new possibilities when compared to older techniques. This post rounds up 10 declarations and tips that every web designer should have available in their CSS arsenal.

@media

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

}

The @media rule not only allows you to specify styling for your web page when printed. These days media queries are more associated with the creation of responsive or adaptive website designs. Create a media query using properties such as min-width to adjust your design according to the user’s viewport size.

background-size

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

A cool and extremely useful CSS3 property that has now gained thorough browser support is background-size. At one point making a background scale to the size of its parent required some right messing around, but now just one line of code is all you need. Use this snippet to achieve the ever-popular full screen background image effect.

@font-face

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

One CSS3 property that has really helped transform the web over recent years is @font-face. We previously had all kinds of limitations regarding font licensing which held back this property, but now there’s bucket loads of fonts to choose from and a range of services that build upon the basic @font-face code. Use @font-face manually with freely available fonts, or via third party services such as Google Webfonts or Typekit.

margin: 0 auto;

#container {
	margin: 0 auto;
}

The clever margin: 0 auto; declaration is one of the first snippets you learn when getting to grips with CSS. It’s surprising that no specific declaration for centering a block element was ever added to the CSS spec, but instead we’ve all come to rely on the auto margin workaround. Add margin: 0 auto; to centre any block element within its parent.

overflow: hidden

.container {
	overflow: hidden;
}

There’s all kinds of float clearing solutions and hacks out there, but one pure and simple way to clear your floats is to simply use the overflow: hidden; declaration on the container of your floated elements. It doesn’t add a load of garbage to your stylesheet and it gets the job done in 90% of scenarios.

.clearfix

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

For those float clearing situations where overflow: hidden; doesn’t work, the best alternative is the clearfix technique. Remember you don’t have to use the clearfix class name, your could target this code to any of your HTML elements individually.

color: rgba();

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

PNG images used to be required for creating any kind of transparency effects in web design, but thanks to another advance in CSS transparency can now be created with the help of the RGBa color mode. Using RGBa in place of a hex value allows you to select a colour using its red, green and blue channels as well as setting an alpha level, such as 0.5 for 50% opacity.

input[type="text"]

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

The input[type="text"] selector and advanced selectors as a whole are great for taking your CSS skills from intermediate to expert. Attribute selectors in particular are extremely useful for styling elements without the need for additional classes. What about using attribute selectors to target the submit version of an input element or add an icon to external links?

transform: rotate(30deg);

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

If I’m honest I’ve yet to find a use for CSS transform properties in a real design project, but the ability to manipulate HTML elements without Javascript is so cool it makes these properties worth remembering! Combine transform properties with CSS transitions to create some fun animation effects.

a {outline: none;}

a {outline: none;}

Nothing can spoil a design more than seeing a huge dotted outline spanning across the whole page when you click a link element. The a {outline: none;} declaration will remove this, but for accessibility don’t forget to also add :focus states to your links. If you don’t mind seeing the dotted border but wish it didn’t span the whole screen, just add a {overflow: auto; } to your stylesheet instead.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.awdltd.co.uk Gareth

    Wow there was one or two in there I didn't even know!

  • http://@leads Tom

    Removing outline is a big accessibility no-no.

    • http://gabrielizaias.com Gabriel Izaias

      +1 for not removing outline.

    • http://www.normansblog.de/ Norman

      not if you declare your own focus styles

      • Michael Spellacy

        Even here I would be wary as it may not be wise to restyle the focus from its normal, expected look and behavior. Tread carefully.

        Nice little post.

  • http://charlieasemota.net Charlie

    what exactly is the difference between :
    overflow: hidden and clear:both ?

    • Tigger

      Overflow specifies what happens when content overflows its containing box. Clear specifies which side of the element floats are not allowed on. If "clear: both;" is declared, then the floated elements will be forced to stretch out to accomodate their container. You might use clear: both on a footer div to get, say, a sidebar and a main section of a page, which are unequal in height because of their content, to stretch the same amount all the way to the footer. Take a look at http://www.quirksmode.org/css/clearing.html for more info. I wish I were better at explaining it. Sorry if I confused you more!

  • http://www.longyc.com LongYC

    I wish we can use hex notation for RGBA as in Android app development. I always prefer hex as it is straight forward and shorter.

  • http://thomasjbradley.ca Thomas J Bradley

    That .clearfix may not work in older IEs and may cause weird display issues. I would use the HTML 5 Boilerplate version:

    .clearfix:before,
    .clearfix:after {
    content: "";
    display: table;
    }

    .clearfix:after {
    clear: both;
    }

    .clearfix {
    zoom: 1;
    }

    • Anne D.

      A case can be made for refusing to support "older IEs."

  • http://blogverize.blogspot.com Nimsrules

    Not all but, yes there were a few which I really didn't know like the outline: none for anchor tags. I thought this worked only for removing those yellow and blue outlines from text inputs. Great share I must add.

  • http://www.eddturtle.co.uk Edd Turtle

    "10 CSS Rules Every Web Designer Should Know" — but should also be aware of their consequences.

    background-size isn't supported by IE8 FYI, neither is rgba & respond.js can be used for media queries.

    • past

      no one cares about IE anymore!!

      • Christian Gehrke

        Unfortunately, my company does and since we build apps for the company to use, I still need to support ie8.

        • http://www.darssh.com darshan

          IE has around 30% market share in the war of browsers.

          So I think microsoft should hire people to make IE CSS3 compatible. :)

    • http://www.starperceptions.com nichole

      I agree. My job has a high percentage of people that use IE because of government regulations and such. It would have been nice if they would have mentioned which rules don't work in IE because not everyone can afford to say "well, download firefox/chrome/safari/etc, it will work there"

  • http://www.netup.in TM Singh

    Great post. Yes, some of them are really interesting and were very new to me.

  • http://www.tutosytips.com/ johanso

    Ok, well, missing several, but well

  • http://www.ottercreativestudio.com Otter Creative Studio

    Simply put: excellent post.

  • http://ww.anjang.com Anjank

    Nice post. I'll learn it

  • http://www.netprofitmarketing.com jared

    Nice list, definitely things every web designer should learn.

  • http://websourcefree.com saha

    I apply most of the listed rules. There are few rules which I have not used commonly. But I'll try to used them. Every web designer should learn these rules. Thanks for sharing this useful list.

  • http://molanamaulana.com Molana

    agree,.. we have to know that
    thank for share

  • http://www.spinxwebdesignnewyork.com/ Alex Braker

    I have applied all the rules in my design which you have given here. The best rule is color:rgba() and by using this property you can easily give the transparency into your web design.

  • http://techyhuman.com umashankar

    Awesome stuff :)

  • Niraj

    How to avoid over lapping of the Divisions when browser window is resized?

  • http://www.webmastericons.com Webmastericons

    Great CSS recommendations. This is definitely helpful. Thanks.

  • http://www.bsl-i.com/ Thomas

    Brilliant CSS recommendations has made sourcing good content for reading and blogging much better, also some great inspiration in there.

  • http://www.spinxwebdesign.com/ Webdesign Lover

    CSS can be a bit daunting for one if one is just getting started. And the post has shared the most important CSS rules that helps to one and give the better understanding of how to use CSS. Great job you have done my friend…

  • http://www.darusim.com Daru Sim

    Very informative! Thanks!

  • http://www.ocwebdesigner.com/ Alex >

    great article. i'm definatley going to use at least one method in my next project.

  • http://www.darssh.com darshan

    Few more useful CSS3 rules:

    input:valid

    input:invalid

    element>element

  • http://www.nazcarpine.com Naz

    Great stuff. Thanks

  • http://webdesignrussia.ru/ Design Russia

    Waht a nice blog you have! Really enjoyed reading all your posts about web design. From my point of view, it's important to follow above mentioned CSS rules, as they help a lot to keep up with website usability!

  • Sean

    I'm one of the older schooled web developers where to clear floated elements you just created a class called "clearboth" and then inserted an empty div using that class. For me this is what works 100% of the time. The "clearfix" method I haven't used very often mainly because I've found several places where it absolutely does not work. I can't explain why it doesn't work, just that it simply does not work for me at least half the time.

    The project I'm currently working is using a predefined template that uses the clearfix method. I've had several elements (usually divs) that are floated for one reason or another. I first tried using the clearfix on them so that any following elements would line up correctly but at least 50% of the time absolutely nothing came of using clearfix. However as soon as I removed the clearfix class and then inserted a div with a normal clearboth class after the floated elements, everything lined up just fine.

    So I don't currently see myself using the clearfix method anymore. I mean why use it if it doesn't work?

    • http://thepercussionroom.com wazz

      i insert that div too.

  • Mike

    Nice always good to remember basics.. no relation to this is article i just wanted to say your blog rock simple and clean but the best so far seriously .
    I compare all the webdesign blogs and you always come out with something different than the others thats what make it so good . keep it up

  • http://www.properlabs.com Michael

    Good stuff. Thanks for sharing. Pretty basic stuff, but always a nice refresh.

  • Cgizma

    <a href="http://www.thetechinfogroup.com/it-support-los-angeles/it-consulting-los-angeles.html” >Los Angeles IT Services </a> need stylish blog design so thanks!

  • Cgizma

    <a href="http://www.thetechinfogroup.com/">Los Angeles IT Services </a> needs stylish blog design so thanks

  • http://www.wesayhowhigh.com Jump Web Design

    multiple backgrounds will be incredibly helpful when it is eventually whole-heartedly supported.

    text-overflow too, instead of using PHP to truncate strings.

  • http://NewfoundlandDesigner.com Justin

    The font-face didn't work for me. I wonder why.

  • Rafael H

    as a fan of the keyboard use,
    i am really against the 'outline:0' css… maybe it makes your design cleaner, but as soon as i will see i cannot use the keyboard, i will leave your site.

  • http://balisidenotes.com Rudi

    Some are new for me, tq for share this stuff, hope you write more about CSS in the future

  • http://www.techehow.com/ Osho Garg

    Great Work, I Am Currently Learning CSS3 And HTML5 But 9 Of Them Rules Are New To Me :)

  • http://designknots.com mark

    thanks for the share a big big help thanks again….

  • http://webstudio316.com Danny

    I don't quite get the .clearfix stuff – but I guess I'll research. Otherwise great post, very useful. Keep it up!

  • http://john-mulligan.com John Mulligan

    Very useful, Got a couple nice tips from this list.

  • Ray

    Thanks for sharing! Can you indicate which are CSS3 specific?

  • http://www.magicedit.com Dustin Ryen

    Great post! I found it very informative.

  • http://www.siteway.de/ Richard

    Great. The clearfix is great thanks for sharing.

  • http://www.pixondesign.com Pixon design

    Great post. A perfect info source. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. I desired to be able to many thanks because of this outstanding examine!!

  • http://www.garethbotha.com Gareth

    Great list, thanks for sharing! Some of these are really helpful.

  • Rakhi Dhavale

    helpful! thanks!