Grow your CSS skills. Land your dream job.

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

  • # April 6, 2013 at 2:36 pm

    Hello,

    This is my first post anywhere on CSS-Tricks.com. (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.

    Thanks.

    # April 6, 2013 at 2:57 pm

    http://www.cleancss.com/

    # April 6, 2013 at 3:28 pm

    Senff,

    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.

*May or may not contain any actual "CSS" or "Tricks".