Inline CSS

Exercise

Create a new folder on your computer and name it "CSS"
Open the folder in VSCode by selecting "File" -> "Open Folder" from the menu bar
Select the folder that you created in step 1 from the file explorer and click "Open".
In the left-hand side panel, right-click on the folder and click on "New File".
Name the file "index.html".
Type the following code into the editor window for the "index.html" file and save:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
</head>
<body>
  <h1>CSS Intro</h1>
  <p>This is my first time using CSS</p>
  <p>CSS makes the website look good</p>
  <p>List of things I'm learning</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
  <a href="https://www.google.com">Link to Google</a>
</body>
</html>

Save.
Right-click anywhere in the editor and select "Open with Live Server" from the context menu. This will start a local server and open your HTML file in your default browser. Any changes you make to your HTML, CSS, or JavaScript files will automatically refresh the page in your browser, allowing you to see the changes in real-time. If you want to stop the server, you can simply close the browser window or click on the "Stop" button in the bottom right corner of the Visual Studio Code window.
Make the header green by adding a style attribute to the header tag like the following:

<h1 style="color:green">CSS Intro</h1>

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

`<h1 style="color:green">CSS Intro</h1>`

This is called inline CSS. Inline CSS is a type of CSS styling that is applied directly to a specific HTML element using the style attribute within the HTML tag. Inline CSS is useful for making small, specific changes to the look of a single element but for larger more complex websites this method is not used very often or at all. It is good to be aware of it in case you run into it on older code. The attribute value in this example turns the Hello World text green.

The better way to define CSS is to use an external stylesheet since it will make it easier to manage and maintain your styles. This is the way we will be working with CSS going forward in this book.

Experiment with the Code

Try making the header color blue.
Try changing the text color of the paragraphs.
Try changing the text color of the list items.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References