2.1 Add Some Style

Different ways to style

inline VS internal VS external

If you saw the attributes section of the HTML chapter, you already know the first way you can write CSS but there are actually a bunch of different ways that you can use CSS. in the HTML chapter we already saw that you can add some style right onto your specific HTML element. that is usually called inline CSS.

<p style="color:red;">I am red text</p>

in addition to adding style to your HTML elements, you can actually open up an HTML style tag (in your HTML file) and write a bunch of CSS to style the elements on the page. this is usually called internal CSS. check it:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>A dope site</title>
    <style>
      body {
        background-color: gray;
      }
      h1 {
        color: blue;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>My first web page</h1>
    <p>coding rules</p>
  </body>
</html>

if you copy and paste that into your HTML file from the HTML exercise, make sure you save the file (command + s) and then reload the page in the browser to see it in action 😉
that method is cool but will only work on that specific HTML file or that specific page. if you have a website that has more than one page, sometimes it's nice to have all of your styles defined in just one place, in their own neat file. this is sort of the more traditional way to write CSS and usually called external CSS.
in most projects, you will usually see a file called styles.css or globals.css where you will have a some main styles set for the entire project.
connecting an external CSS style sheet to your HTML file is easy. one line of code in the <head></head> does it:

<link rel="stylesheet" href="styles.css" />

if you want to break that down, its a link tag which is used to link external resources (not to be confused with a hyperlink tag), with two attributes: the relationship attribute which is telling the computer that its a stylesheet 🙃 and then the href points to the actual css file. if you call your css file something different, you need to change that part.
using an external style sheet, the example above would get changed to this:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>A dope site</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>My first web page</h1>
    <p>coding rules</p>
  </body>
</html>

a little cleaner right? but then you need to have an actual style sheet for your CSS. in the same folder as the HTML file you would need a CSS file:

styles.css

body {
  background-color: gray;
}
h1 {
  color: blue;
}
p {
  color: red;
}

people love to argue which is the best way to write CSS and the truth of course is it depends. not only does it depend on your personal preference and project specific use case but in all reality, theres nothing wrong with mixing all three. in most professional projects, you will usually see at least a mix of external and inline, especially with Tailwind.
- there is actually a fourth method of writing CSS that I want to mention but not get too deep into (yet), CSS modules.
- CSS modules involve creating an external style sheet for every component.
- components are typically how you organize your files in JavaScript frameworks like React, Vue and Angular; we will get to those but for now, just know it is possible to have a file that is for all of the buttons in your project, and if the project is using CSS modules you will also see a file called button.module.css

2. CSS 2.2 Exercise