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.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!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
01 02 03 04 05 06 07 08 09 10 | <!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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | body{ font-size: 100px; background: blue; } h1{ font-weight: bold; font-size: 100px; } p.italic { font-style: italic; font-size: 40px; } |