Adding CSS

Style sheets can be added to a web page in three different ways, which differ in their capabilities.

Tables of related styles

The most powerful and convenient way to determine the styles and rules for the site. Styles are stored in a separate file, which can be used for any web page. To connect the linked stylesheet, use the <LINK> tag in the page header (example 1).

Example 1. Connecting a table of related styles

Valid HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Styles </ title>
<Link rel = "stylesheet" type = "text / css" href = "mysite.css">
<Link rel = "stylesheet" type = "text / css" href = "http://www.mysite.ru/main.css">
</ Head>
<Body>
<H1> Hello, world! </ H1>
</ Body>
</ Html>

The path to the file with styles can be either relative or absolute, as shown in this example.

Advantages of this method

  1. A single style file is used for any number of web pages, it is also possible to use it on other sites.
  2. You can change the stylesheet without modifying the web pages.
  3. If you change the style in one single file, the style is automatically applied to all pages where there is a link to it. Undoubtedly, it is convenient. We specify the font size in one place only, and it changes on all one hundred or more web pages of our site.
  4. The file with the style on the first boot is placed in the cache on the local computer, separate from the web pages, so the site is loaded faster.

Global Style Sheets

The style is defined in the document itself and is usually located in the title of the web page. By its flexibility and capabilities, this way of using the style is inferior to the previous one, but it also allows you to place all styles in one place. In this case, right in the body of the document. The style definition is specified by the <STYLE> tag (example 2).

Example 2. Using the Global Style Table

Valid HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Styles </ title>
<Style type = "text / css">
H1 {
Font-size: 120%; /* Font size */
Font-family: Verdana, Arial, Helvetica, sans-serif; / * Font family * /
Color: # 336; /* Text color */
}
</ Style>
</ Head>

<Body>
<H1> Hello, world! </ H1>
</ Body>
</ Html>

This example shows how to change the heading style <H1> . On the web page, it is now sufficient to specify only this tag and the styles will be added to it automatically.

Internal Styles

The internal style is essentially an extension for a single tag used on a web page. To define a style, use the style parameter, and its attributes are specified using the style sheet language (example 3).

Example 3: Using Inner Styles

Valid HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Styles </ title>
</ Head>
<Body>
<H1 style = "font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 336"> Hello, world! </ H1>
</ Body>
</ Html>

It is recommended to use the internal style for single tags or to refuse to use it at all, as changing a number of elements becomes problematic. Internal styles do not correspond to the ideology of the structural document, when the content and its design are separated.

All described methods of using CSS can be used both independently and in combination with each other. In this case, it is necessary to remember their hierarchy. The inner style is always used first, then the global stylesheet and, lastly, the linked stylesheet. In Example 4, two methods of adding style sheets to a document are used at once.

Example 4. Combining different methods for connecting styles

Valid HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Styles </ title>
<Style type = "text / css">
H1 {font-size: 120%; Font-family: Arial, Helvetica, sans-serif; Color: green; }
</ Style>
</ Head>

<Body>
<H1 style = "font-size: 36px; font-family: Times, serif; color: red;"> Hello, world! </ H1>
<H1> Hello, world! </ H1>
</ Body>
</ Html>

In the above example, the first header is set in red with a size of 36 pixels, and the next one - in green and another font.

Copyright © www.htmlbook.ru