Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
The CSS Setup

Structure vs Style

Although the <style> element allows you to write CSS code within HTML files, this mixture of HTML and CSS can result in code that is difficult to read and maintain.

It's common for developers to add substantial amounts of custom CSS styling to a web page. When all of that CSS code is placed within a <style> element in an HTML file, you risk the following two things:

  1. Creating a large HTML file that is difficult to read and maintain (by you and other developers). Overall, this can result in an inefficient workflow.

  2. Maintaining a clear distinction between web page structure (HTML) and web page styling (CSS).


Take a look at the code to the right. Note that index.html has evolved to include both HTML and CSS code.

Aside from an increase in length, this mixing of code creates an inefficient workflow for developers and can create confusion because structure (HTML) and aesthetics (CSS) are now combined.

Report a Bug
If you see a bug or any other issue with this page, please report it here.