Attach external style sheet file to html web page

Today’s topic is,

Attach external style sheet file to html web page

You’ll be learning the very basics of HTML – How to Attach or Link an external Cascading Style Sheet file to your HTML web page.

Attach external style sheet file to html - PepFryWhat is Cascading Style Sheet?

External style sheet is a text document ending with the .css extension. Which allows you to input styles in the form of text, which is then accessed by the Webpage and processed accordingly.

Advantage of using Style sheet file

Again here, you can use the same Style sheets on numerous Web pages instead of applying the same Style sheet on every pages. Attaching Style sheets are very much useful when you are using dynamic websites that runs over CMS(Content Management System).

How to create an External Cascading Style Sheet file?

If you have Dreamweaver follow these steps:

  • Open Dreamweaver
  • Go to the File menu and click New OR press Ctrl+N
  • It will prompt you with several options, please click on CSS
  • Save(Ctrl+S) it on your local drive

If you do not have Dreamweaver follow these steps:

  • Right click on your Desktop, click on New next click on Text Document
  • Rename it to something as you wish, let it be Style.css
  • Do not forget to add .css at the very end, that makes it a Style sheet file

How to attache/link that external Style Sheet to your Web page?

Attach external style sheet file to html - PepFry

Attach external style sheet file to html

  • Open you HTML file
  • Go to the top of the file, find </head>
  • Apply the following code

There will be so many confusions like:

  • What if your Style Sheet is somewhere else in your hard drive?

See screenshots below to understand where the Style Sheet should be placed and how to attach when Style Sheet files are placed elsewhere.

1) When your Style Sheet is in the same level as your HTML file use the below way of linking

Attach external style sheet file to html - PepFry

Attach external style sheet file to html



To show that your JavaScript file is in the same level as your HTML file- we directly access the Script file. So, it tells that:

  • Since, your HTML file and Style Sheet are in the same level
  • Directly access your Style Sheet

2) When your Style Sheet is in the next level after your HTML file use the below way of linking

Attach external style sheet file to html - PepFry

Attach external style sheet file to html



To show that your Style Sheet file is a level ahead from your project folder – we directly insert a /[Forward slash]. So, it tells that:

  • First to go inside the CSS folder directly – since, your HTML file and CSS folder are in the same level
  • Then access your Style Sheet

3) When your Style Sheet is in the previous level before your HTML file use the below way of linking

Attach external style sheet file to html - PepFry

Attach external style sheet file to html



To show that your Style Sheet file is a level back from your project folder – we insert .. [double period] before the the /. So, it tells that:

  • First to go back a level from your project folder
  • Then go into the CSS folder there
  • Finally access your Style Sheet

Done! your Style Sheet is attached to your Web page.

Hope absolute beginners would have found this tutorial “Attach external style sheet file to html“much useful! Thanks for going through thoroughly.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">