External Stylesheet 

 Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver".
A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following
links in the head section of every (X)HTML file you want to style with the CSS file. 
 <link rel="stylesheet" type="text/css" href="Path To stylesheet.css"/>

Or you can also use the @import method as shown below

 <style type="text/css">@import url(Path To stylesheet.css)</style>

Either of these methods are achieved by placing one or the other in the head section as shown in example below. 

<head>
<title><title>
<link rel="stylesheet" type="text/css"href="style.css"/>
</head>
<body>

or 

<pre> <head>
<title><title>
<style> type="text/css"> @import url(Path To stylesheet.css) </style>
</head>
<body> 
 By using an external style sheet, all of your (X)HTML files link to one CSS file in order to style the pages. This means, that if you need to alter the design
of all your pages, you only need to edit one .css file to make global changes to your entire website.

Here are a few reasons this is better.
  • Easier Maintenance
  • Reduced file size
  • Reduced Bandwidth
  • Improved Felxibilty

    • Cascading Order 

    In the previous paragraphs, I have explained how to link to a css file either internally or externally. If you understood, than I am doing a good job.
If not don't fret, there is a long way to go before we are finished. Assuming you have caught on already, you are probably asking, well can I do both?
The answer is yes. You can have both internal, external, and now wait a minute a third way? Yes inline styles also.

    Inline Styles 

    I have not mentioned them until now because in a way they defeat the purpose of using CSS in the first place. Inline styles are defined right in the 
(X)HTML file along side the element you want to style. See example below.
    <p>span style="color:red">Some red text</span></p>

    Some red text

    Inline styles will NOT allow the user to change styles of elements or text formatted this way

    You can check out the video below for some CSS basics:

    Back