When we just started to learn CSS many of us believe that it is really hard to understand and use, because unlike HTML this type of programming uses more elements, after a while it becomes easy to understand because practically the only thing we do is improve the appearance of the website using colors, shadows, sizes, shapes, etc... things that we know since childhood.
Common ways to add CSS to HTML documents.
* Inline: using the style attribute (style = "css") in HTML elements.
* Internal: Using a <style> element within the <head> section of the HTML document.
* External: Using a CSS file, calling it with a <link> element.
The most correct way of the three previously mentioned to use CSS elements is using a separate file from the HTML document (external).
Inline CSS.
This type of CSS elements is usually used to modify the appearance of an HTML element independently and without so many problems. Below you can see an example of this.
Code:
<h1 style="color: blue;">This is a custom Heading</h1>
Result:
This is a custom Heading
Internal CSS.
This is used when an extra hosting service is not available, in general it has the same functions as the external CSS. The biggest advantage of this type of CSS element is not having to modify each element independently on the website. Below you can see an example of this.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: aliceblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Result:
This is a heading
This is a paragraph.
External CSS.
In this case the CSS elements are developed in a different document than the HTML document, this new document is commonly known as CSS document and its extension is ".css", the great advantage of this type of CSS elements in comparison with the previous ones is its ease to modify the entire website, because you only need to modify a file without having to be in contact with HTML elements. Below we show you how you should link this external file to your website.
Code:
<head>
<link rel="stylesheet" href="style.css">
</head>
The bold text in the previous code must contain the URL of where your CSS document is located.