How To Link/Add External CSS To HTML with Tag Tutorial with Examples? – POFTUT
How To Link/Add External CSS To HTML with Tag Tutorial with Examples?

How To Link/Add External CSS To HTML with Tag Tutorial with Examples?

by

CSS is an important part of the web pages where it provides style to the web pages. CSS can be used in different ways where the most suited way is using the CSS code as an external file and link it to the specified web pages or HTML pages. In this tutorial, we will learn how to link external CSS files into web or HTML pages in different ways.

<link> Tag Syntax

Before starting to link we will learn the syntax of the <link>  tag which defines a link between a document and external resources. We will use the <link> tag in order to create a link between the web or HTML page and CSS file.

<head>

   <link ATTRIBUTES>

</head>

As we can see that <link>  tag is used inside the <head>,</head> tags. ATTRIBUTEs are used to set some attributes about the link. Here are some of the most used attributes.

<head>
  <link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
  • `rel` attribute is used to set the relation of the specified document which will be `stylesheet` in our example. CSS is called a stylesheet.
  • `type` attribute is used to set the encoding or content type of the link which will be `text/css` in our example.
  • `href` is the hyperlink reference that specifies the CSS file location or URL in our case.

Also “ tag has some features to notice like below.

  • <link>  tag is stored inside the <head> part of the HTML code.
  • <link> tag do not have any visual presence.
  • <link> tag will make the current page load external source like CSS.
LEARN MORE  HTML target="_blank" Link Tutorial with Examples

Advantages Of Using External CSS File

Using the CSS code as an external CSS file provides a lot of advantages. Here we will some of them here.

  • A single change can affect the whole site or specific group of web pages.
  • Global changes can be made easily without changing web pages one by one.
  • By using external CSS files the content and design can be separated for easier operation or design.
  • Upgrades can be done easily about the HTML of CSS code without affecting other elements.
  • Faster Load Time can be achieved by using external CSS which makes the download of the CSS file in parallel with the web page.
  • External CSS will make better SEO because of the crawlers will parse the page more effectively.

Link External CSS with <link>

We will start with a simple example where we will load a CSS file named mystyle.css into the current HTML web page.

<html>
<head>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a HEADING</h1>
<p>This is a PARAGRAPH.</p>

</body>
</html>
Link External CSS with <link>
Link External CSS with

We can see that the mystle.css is loaded with <link> tag. The style of the heading and paragraph is set with this external CSS file. The mystyle.css file is located at the root location of the site like poftut.com/mystyle.css.

Link External CSS In Different Location with <link>

In the previous example, we have linked a CSS file which is located in the root location of the site. But in some cases, the CSS files can be located in different locations. In this example, we will load the CSS file named mystyle.css which is located in the styles folder of the web page. We will set the href attribute of the <link> tag as /styles/mystyle.css

<html>
<head>
  <link rel="stylesheet" href="/styles/mystyle.css">
</head>
<body>

<h1>This is a HEADING</h1>
<p>This is a PARAGRAPH.</p>

</body>
</html>

Link External CSS In Different Domain with <link>

We can also load CSS files from different domains or web sites. This can be especially useful for load balancing, speed or 3rd party library usage. We will just provide the CSS file full URL to the href attribute which is http://www.poftut.com/styles/mystyle.css in this example.

<html>
<head>
<link rel="stylesheet" href="http://www.poftut.com/styles/mystyle.css">
</head>
<body>

<h1>This is a HEADING</h1>
<p>This is a PARAGRAPH.</p>

</body>
</html>

Link Multiple External CSS Files

While developing and creating a web page there will be a lot of different components. So we may need to create multiple CSS files in order to style these different components and easily manage the styling. We can link multiple CSS files in a single web or HTML page. We just put the <link> tag multiple times like below.

LEARN MORE  HTML target="_blank" Link Tutorial with Examples

In this example, we link or load 3 external CSS files named buttonstyle.css, labelstyle.css and mystyle.css which are all from different URLs.

<html>
<head>
<link rel="stylesheet" href="buttonstyle.css">
<link rel="stylesheet" href="/styles/labelstyle.css">
<link rel="stylesheet" href="http://www.poftut.com/styles/mystyle.css">
</head>
<body>

<h1>This is a HEADING</h1>
<p>This is a PARAGRAPH.</p>

</body>
</html>

Link External CSS For Specific Media Type Like Desktop, Mobile or Resolution

HTML 5 provides some optional features which can be used to load different CSS files for different screen resolutions and media types. For example, highres.css can be loaded for high-resolution screen sizes where lowres.css can be loaded for small devices like phones, etc by using media attribute of the <link> tag.

<html>
<head>
  <link rel="stylesheet" href="highres.css" media="screen and (min-width: 1024px)">
  <link rel="stylesheet" href="highres.css" media="screen and (max-width: 1023px)">

</head>
<body>

<h1>This is a HEADING</h1>
<p>This is a PARAGRAPH.</p>

</body>
</html>

Leave a Comment