We have 3 ways to insert CSS into the HTML document :
In external css, we can just include a single file to implement all the styles on our webpage.
We use <link>
tag for including external CSS which comes inside <head>
tag of HTML as shown in example below :
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
styles.css
file will look something like :
p {
color: gray;
}
In internal css, we write the styles to be implemented in the head
of the HTML
file.
We use <style>
tag for writing internal css which comes inside <head>
tag of HTML as shown in example below :
<head>
<style>
p {
color: gray;
}
</style>
</head>
In inline css, we write the styles to be implemented in the body
of the HTML
file in the
same element as attribute.
We use <style>
tag as attribute for writing inline css which comes inside <body>
tag of HTML as shown in example below :
<body>
<p style="color:gray;">Content Comes here </p>
</body>