The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS copied from a site is formatted horribly. How can I snap it into something legible?

  • # April 6, 2013 at 2:36 pm


    This is my first post anywhere on (1) I searched this CSS forum using a few different search phrases but did not find anything matching my question. (2) I read the instructions on how to ask a good question. One recommendation is to provide a link. I’ll refrain from that just yet as the site owner may be sensitive to having too many people looking at his code.

    The CSS I copied from the view source window in Firefox looks as follows (I didn’t copy it all):

    @charset “utf-8″;html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:”;content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}

    It looked horrible on the screen. And it looked horrible when I copied it into Notepad. Finally, I tried it in WordPad. I sometimes find that WordPad renders CSS files well even though Notepad does not, but in this case it still remained horribly formatted in WordPad.

    Your helpful advice would be appreciated.


    # April 6, 2013 at 2:57 pm

    # April 6, 2013 at 3:28 pm


    Wow – that worked. If it didn’t, I might have made fun of your hat, but it did and I won’t.

    Thank you.

    # April 6, 2013 at 3:56 pm

    Majority of that is just a reset.

    # April 6, 2013 at 6:36 pm

    Just a little background on line endings. Most systems use a carriage return (Apple), a line feed (UNIX), or a combination CR+LF (Windows) as characters for line endings. Line feeds are very common but notepad sadly only recognizes windows line endings. The difference you see between notepad and wordpad is probably that wordpad recognizes line feeds as line endings as well.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed