Theory
Theory

Other ways to connect CSS

Setting the styles of each tag using the style attribute is very inconvenient. It also leads to clogging HTML code with repetitive pieces of CSS.

Fortunately, there are other ways to connect styles. The first is to connect an external file using the <link> tag, and the second is to use a special <style> tag.

Now you will get acquainted with the second section of the editor - the style.css tab. The code from the CSS editor is inserted into the HTML document as if you had written it in the <style> tag. This is how this tab looks like:

index.htmlstyle.css

First, we'll clean up the code in the HTML editor, and then we'll start step-by-step styling our outline using other CSS features.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Other ways to connect CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Course outline</h1> <p style="color: green;">Paired tags.</p> <p style="color: green;">Single tags.</p> <p style="color: green;">Tag attributes.</p> <p style="color: green;">Inline styles.</p> <p style="color: red;">External Styles.</p> <p style="color: red;">Styling by class.</p> </body> </html>

CSS

/* body { font-family: "Tahoma", serif; } p { color: green; } */

GoalsCompleted

Remove all style attributes from paragraphs,
then remove the /* characters in the first line of the CSS editor.