Internal and External CSS

Internal and External CSS

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.

  1. First I have created a Style tag between the Head tag
  2. 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;
}

Check out the Sample over here

Check out how to create a Table in HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

3 − 2 =