Separate html and css panes on codepen


codepen has 2 separate panes. (css, html)
cloud9io doesn’t. or I couldn’t activate it maybe…

why are there 2 separate panes? is it because we can create a css (style) file and call its style to a html? so should we create html and css separately? what is the ordinary course of using them?


Generally the Css is in its own document which you link to in the head of the html document. Codepen reflects this, keeping the css and html in their own separate sections, keeping everything organized, but without the need to link to the stylesheet in the html.

Css can be done internally, externally or in-line, but external is the preferred/ generally accepted method.

I don’t really know much about cloud9 yet.

hope that was of some help,
good luck


in cloud9 you create your own documents, so you would have an html file and a css file. you can open them both into the same pane and you would have tabs like in chrome. one for html one for css… or you can split them into two panes like in codepen to view them at the same time.


so I can call css file from my html? if 9cloud ide does this it would be wonderful. thank you.


yes, this helped me a lot to make me understand in simple terms. thank you.


yes exactly, sorry for late response