How to use the <link> tag to define a relationship to an external resource?

JavascriptWeb DevelopmentFront End Scripts

The <link> tag is used in HTML to define a relationship to an external resource. It is used to link external style sheets. It gets added inside the <head>…<head> tag, but does not have a closing tag. Define your external CSS file in it.

The CSS file created separately will have all the CSS code inside it. The href attribute adds the css file link.

You can try to run the following code to include external CSS in HTML. The HTML file is here, with a link to CSS file style.css

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="mystyles.css">
   </head>
   <body>
      <h1>Heading</h1>
      <p>This is demo content.</p>
   </body>
</html>

The CSS file mystyles.css, with the CSS code,

h1
 { color: green; }
p
 { font-size: 14px; }
raja
Updated on 04-Oct-2019 11:59:36

Advertisements