CODEWITHSUNDEEP
htmlcss
ifeanyichukwu obi
ifeanyichukwu obi

Reputation: 11

Linking the index file to the css file

I am having an issue with linking my html to the external CSS using the following folder structure.

project
|  index
|  |  index.html
|  css
   |  style.css

In this case, how would i link the index.html to the style.css?

Upvotes: 1

Views: 1388

Answers (1)

Ballo Ibrahima
Ballo Ibrahima

Reputation: 627

The tag

is an HTML tag which is not only intended to link style sheets, but which can also refer to other HTML pages on the site, linked by a hierarchy. For example, it is possible to indicate the next page in a series of documents, or the parent page, to go up one level in the navigation. It can also be used to indicate an external resource such as an RSS or Atom feed, or a favicon . In any case, an element has at least two attributes: rel(type of relationship) and href(linked resource).

Here is a summary of the specific attributes, in the case of use with a style sheet:

rel="stylesheet", to indicate that the relation linking the HTML document to this file is that of a style sheet type="text/css", to indicate its MIME type, eventually media="le type de média destination"to exploit it according to one consultation medium or the other ( screen, print...) or even attribute titlein the case of persistent and alternate style sheets.

Example :

<link rel="stylesheet" href="habillage.css" type="text/css" media="screen" />
<link rel="stylesheet" href="texte.css" type="text/css" media="screen" />
<link rel="stylesheet" href="impression.css" type="text/css" media="print" />

The @import rule

@importis a CSS2 property that must be followed by the URL of a file that will contain styles to apply in addition to the current style sheet. You can use @import:

between the tags and in the section an HTML page; at the beginning of a CSS file, to include one or more other style sheets;

This second possibility is interesting because it allows you to create more scalable style sheets (a single file is linked from the HTML page, and the import of style sheets is managed directly from this root CSS file). Problem: this operation can slightly slow down the loading of styles and therefore of the page, and it is not recommended in a process of optimizing client performance.

Example :

<style type="text/css">
  @import url(/styles/habillage.css);
  @import url(/styles/texte.css);
</style>

You can optionally add a list of media. But beware, Internet Explorer 6-7 does not understand this syntax, and will not import the corresponding style sheet at all! (Internet Explorer 8+ fixes this problem).

<style type="text/css" media="print">
  @import url(impression.css);
</style>

This property also allows style sheets to be imported into other style sheets. This offers possibilities to create dynamic style sheets without having to copy the same code several times.

Upvotes: 3

Related Questions