« Back to Main Page

PencilCode:External Stylesheets

From Bold Idea Knowledgebase

External stylesheets allow you to write all your CSS code in one file so that it can be used for multiple HTML pages.

To create a new stylesheet, go to your project folder and click “New File”. Immediately change the name of the file to style.css (you can call it whatever you want add long as it ends in “.css”). This is the file where you'll put all of your CSS code.

‘’’Important’’’: Do not put HTML code in a CSS file. Only CSS code! You don't even need a <style> element.

To use your CSS code in your HTML page, make sure your page has a <head> element just inside the <html> element, then add the special <link> element inside the head with the “rel” attribute set to “stylesheet” and the “href” attribute set to “style.css” (or whatever you named your CSS file) like so:

<html>
  <head>
    <link rel=”stylesheet” href=”style.css”>
  </head>
  <body>
  </body>
<html>