CSS Lesson 1 - Creating an external style sheet

You already know how to control styles by modiying the in-line command, and including a style section on your page. Now we are going to use external CSS sheets instead. This just means that we put the style commands in a separate document - which is then called by the webpage HTML code. Why do we do this? It is much easier it make one definition of how certain styles should look (PARAGRAPH TEXT, HEADINGS, LINKS, etc) and use it for all the webpages in a particular site.

All external style sheets will end with an extension of .css and you can edit them in a text editor - just like your .html pages

Within your head section you will be adding a section of code to call the new file.

For now let's all stay with test1 for the file name. Keep in mind that the newly created css sheet MUST live within the same folder as your html file. You can either keep it in the same directory level, or (if you have several sheets) create a sub-folder for css. For now it is easier just to put them in the same folder as the .html files

<link rel="stylesheet" href="styles.css" type="text/css">


Practice CSS one

You will create a styles.css sheet and add code to both your index.html and your lesson14.html to call the sheet.
Notice both HTML files are calling the same CSS sheet.

Edit the index.html file

Open up your index.html that you created for review.

Within the HEAD SECTION enter the code to call the CSS sheet names styles.css

Edit the lesson14.html file

Open up your lesson14.html that you created for review.

Within the HEAD SECTION enter the code to call the CSS sheet named test1.css

Create the CSS file

Use Notepad++ and create a new blank document

Save it in your folder as styles.css

Go ahead and copy the entire style section from your lesson 14 and put it in the new css page
You do NOT need to include the opening <style> and </style> tags anymore


Assignment for CSS Lesson One

  • Create a styles.css sheet
  • Link the same sheet in index.html and lesson14.html