Connect CSS to your HTML

CSS stands for Cascading Style Sheets. It controls how your page looks. HTML builds the content. CSS makes it look good.

The three ways to add CSS

There are 3 ways to style your HTML. To keep things simple, we’ll use the same example each time: changing the text inside an <h1> tag to be red.

1. Inline style - Add the style attribute directly to a tag.

   <h1 style="color: red;">Hello!</h1> <!-- This H1 is now red -->

2. Internal style inside a <style> tag in the <head>

   <head>
     <style>
       h1 { color: red; }
     </style>
   </head>
   <body>
     <h1>Hello!</h1> <!-- This H1 is now red -->
   </body>

3. External stylesheet in a separate .css file and linked in the <head>

   HTML FILE

   <head>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <h1>Hello!</h1> <!-- This H1 is red -->
   </body>

   CSS FILE

   h1 { color: red; }