We use CSS to tell the browser how to format the HTML lines, according to our CSS lines.
We can place our CSS code, in three locations:
Internal CSS style tag
External CSS file (no tags)
Inline CSS (along with html line)
The most common way is to use external file or folder in the website main folder and internal CSS tag for some specific styling, we will explain each location and why to use it.
Internal CSS lines are placed inside the < style > tag as you can see in the example below, in this situation the CSS will ONLY controll this web page, we use internal CSS when we want to controll specific areas of specific pages.
It is best practice to use external CSS file for "global" controll of the web pages and internal CSS when we want to controll specific areas of specific pages, imagine you have 500 web pages, you can controll 500 side-bars or other page component from 1 CSS file, instead of editing 500 pages.
You must place a reference also called "link" to your global CSS folder / file to connect your Web page to the external css file.
Check the example below to understand how external CSS file works:
We created css file called HowTo.css (.css extension) inside learncss folder, it is now our global CSS file
the HTML web page receive the styling from the Global CSS file using link:
Notice there is no style tag or any CSS lines, the page receive the data from the global CSS file in the web folder.