Inline:
- The style is written inside the index.html code.
- Do not do. It is not the right way to style.
- Do not entangle your CSS files with your HTML files.
- It looks like:
<h1 style=”color: blue”>The Code Magazine</h1>
- If there is inline, internal and external, inline takes priority and it’s style is what shows on the page.
Internal:
- The style is written inside the
<head> section at the top of the index.html code. - Called the “separation of concerns”, to separate styling from the body of the HTML.
- Good to do when you do not have many lines of styling.
- It should look similar to:
<head>
<style>
h1{
color: red;
}
</style>
</head>
- If there is internal and external, internal will take priority and it’s style is what shows on the page.
External:
- A separate CSS file, side by side with your HTML file:
- Click on new file. (Paper with a + sign.)
- Name file: style.css
- Click enter.
- In new style.css file write your styling. Something like:
h1{
color: purple;
}
- In your index.html you need to link the style page to your HTML, like so:
<head>
<link href=”style.css” rel=”stylesheet” />
</head>
