Internal and External CSS
In this article , we will be looking about , on how to add Styling internally into our HTML File or Externally by creating a new ” .CSS” File
Internal CSS.
Refer the Code below below to check out how to add Internal CSS to our HTML file.
- First I have created a Style tag between the Head tag
- Then I target the Html body, H1 and P to input the style content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>I am HTML</title>
<meta name="description" content="">
<style>
body{
font-size: 100px;
background: blue;
}
h1{
font-weight: bold;
font-size: 100px;
}
p.italic {
font-style: italic;
font-size: 40px;
}
</style>
</head>
<body>
<h1>Create Un Order List</h1>
<ul>
<li><a href="http">About Brian</a></li>
<li><a href="http">Where Brian From</a></li>
<li> <ahref = "http">Contact Brian</a></li>
</ul>
<hr>
<p class="Italic"> Hi All my name is Brian</p>
</body>
</html>
External CSS.
Create an External CSS Style SheetL
Below show how to create an external CSS Style Sheet
- First create a new file and name it as “.CSS”
- Then Put the CSS Link relation Reference between your head tag
- The Rel Link should have a valid location or address where the HTML file can point the link to the CSS
- Finally Style your CSS Content in the “.css” File you have just created
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>I am HTML</title> <meta name="description" content=""> <link rel="stylesheet" href="main.css"> </head>
Now you can add Styling into the “.CSS” File you have just created
body{
font-size: 100px;
background: blue;
}
h1{
font-weight: bold;
font-size: 100px;
}
p.italic {
font-style: italic;
font-size: 40px;
}
Leave a Reply