This method is the most easy one for setting styles and rules to be applied for the site. Styles are stored in a separate file that can be used for any number of web pages. To link a table of related styles use the tag <LINK> in the page header (Example 1).
Example 1. Linking tables of related styles.
The path to the file with the styles can be either relative or absolute, as shown in this example.
Only one file with styles is used for any number of web pages, it is also possible to use the file with other sites.
You can change the style sheet without having to modify the web pages.
When you change the style in a single file, the style is automatically applied to all the pages that have it. Very convenient. Respectively if you specify the font size in one place, it changes in hundred or more pages on our website.
Before the page boots the file with the styles is placed into cache on the local computer, separate from the web pages, so the upload of the site is a bit faster.
The style is set in the document, and is usually located in the header of the web page. This method is less flexible than the previous one, but also allows you to put all the styles in one place. In this case, right in the body of the document. Style is set with the <STYLE> tag (Example 2).
Example 2. Using global style tables.
This example shows the change in the header style <H1>. On the Web page just specify this tag and the styles will be added automatically.
Internal styles are essentially an extension for a single type tag that is used on a web page. To set the style use the parameter style. Its attributes are specified using the style sheet language (Example 3).
Example 3. Using internal styles.
It is recommended to use internal styles for individual tags or not use them at all, since changing too many elements becomes problematic. Internal styles don't go together with the idea of a structured document (when the content and design are separated).
All of these methods can be used either separately or in combinations with each other. In any case, you must keep in mind their hierarchy. First use internal styles, then table of global styles and only then the table of related styles. Example 4, shows two methods of adding style sheets applied simultaneously.
Example 4. Combination of different methods of applying styles.
In this example, the first header is set in red with font size of 36 pixels, and the next in green and in different font-family.