27 Cascading Style Sheets (CSS) II - Inline/External Styles

External Style Sheets

When designing a web site with many pages it is often desirable to maintain the same look and feel from
one page to another. CSS makes that an easy task by allowing an HTML page to call up style sheets
saved in separate files.  

The first step is to save the style rules (everything normally found between < style > and </ style > ) into a text
file. The .css extension is normally used but is not required. The < style > tag pair themselves are
not included in the file.  Then, place the following code into the < head > section of a web page ( this code
assumes the filename is 'mystyle.css' ) :

  < link rel = "stylesheet" href = "mystyle.css" >

The contents of the 'mystyle.css' file will now apply as though the style sheet were embedded within the HTML
page.  The same file can be accessed by any number of pages, such as every page on a web site that is to
have the same style applied to its content.

There is a second way to include an external file of style rules in an HTML page, by using the @ import rule,
as shown in this example :

< style >
@ import "mystyle.css" ;
p { color : green }
</ style >

The @ import rule causes the content of the external file to inserted into the < style > tag, in addition to
whatever rules are otherwise contained in the < style > tag pair.  When used, the @ import rule must be the
first rule in the < style > tag pair or it will be ignored by the browser.

Inline Style Sheets
Most HTML tags also support the style attribute as a means of appying style rules to an individual tag.
In this case the style rules are placed within the starting tag of a tag pair, as shown in the next example :

< p style = "color : red ; font-weight : bold" >

Including the style rules within the tag doesn 't allow you to apply the style rules to other tags, but does
avoid the need to use class or ID definition where a simpler HTML code is preferred.

Most HTML tags have a side effect with their use - such as the < p > tag which added white space
immediately after its use.  

Two tags often used with inline styles are the < span > and < div > tags, neither of which create any
formatting on their own.