Theory
Theory

The mystery of the CSS editor

Now you know about inline and external styles and can learn the secret of our CSS editor.

If an "external" style.css file is connected in the markup inside the <head> tag, CSS code from the editor is quietly added inside the <style> tag, and this tag is added to the mini-browser.

In this task, style.css is already plugged in, and the styles are placed in the CSS editor and commented out. Comments in CSS work the same way as in HTML - they allow you to temporarily disable a piece of code.

CSS comments are specified using the characters /* and */:

/*
h1 {
  color: red;
}
*/

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>The mystery of the CSS editor</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>The mystery of the CSS editor</h1> <p>Our mini-browser uses the code you write in the CSS editor and invisibly adds it to the HTML code of the page using the <style> tag.</p> </body> </html>

CSS

/* h1 { font-size: 52px; line-height: 64px; font-family: "Monaco", "Courier", monospace; color: #618ad2; } */

GoalsCompleted

Uncomment the styles in the CSS editor. To do this, remove the /* and */ characters..