3 writing ways of CSS
Goal
- âš¡ Learn 3 writing ways of CSS
1. Style tag
This is just we did in the previous step.
<style>
h1 { color: white; background: navy; }
ul { background: #ffff00; }
</style>
2. Inline style
css-test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 style="color: white; background: navy;">Here is a title.</h1>
<h2>Here is a subtitle.</h2>
<ul style="background: #ffff00;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
3. External CSS file
Make new file css-test1.css in css-test folder
css-test1.css
h1 { color: white; background: navy; }
ul { background: #ffff00; }
Edit css-test1.html
css-test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css-test1.css">
</head>
<body>
<h1>Here is a title.</h1>
<h2>Here is a subtitle.</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Current folder structure looks like this
important
You see that all 1, 2, 3 output is same.
In the next step, we will learn how to use class and id as an css selector.
Refs
You can check the pros and cons of each styling way in the below links.
caution
But currently it is just enough to know there is 3 ways of writing CSS.