CSS connection

There are several ways of adding the styles to the web-page, which differ by their abilities and purpose. The ways of CSS connection are described below.

  1. Associated style sheet

When using the associated style sheet, the description of selectors and their properties is in the separate file with CSS extension , as a rule, and tag <link> is used to join the document with this file. This tag is put into package <HEAD>, as it is shown in the example 2.1.

Example 2.1. The connection of the associated style sheet.

1
2
3
4
5
6
7
8
9
10
11
12
<!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="style.css">
 </head>
 <body>
  <h1>Title</h1>
  <p>Text</p>
 </body>
</html>

The meaning of the tag parameters <LINK> - rel and type remain unchanged, as it was given in this example. Href parameter defines the way to CSS file, it can be set both relatively and absolutely. The stylesheet, which is on the other site, can be enabled this way.

You may see the content of the file mysite.css in the example 2.2.

Example 2.2. File with a style.

1
2
3
4
5
6
7
8
9
10
H1 {
 color: navy;
 font-size: 200%;
 font-family: Arial, Verdana, sans-serif;
 text-align: center;
}
 
P {
 padding-left: 20px;
}

As we see from this example, the file does not hold any data except CSS syntax. HTML-document also contains only link to the file with style, and in this way the approach of division of the content and design of the site is realized.  That is why the use of joined cascading style sheet is the most multipurpose and convenient way to add the style to the site.

Global stylesheet

When using global style sheet, CSS characteristics are described in the document and located in the title of the web-page usually. This way of style adding also allows location of all the styles in one place.  In this case it is done in the body of the document with the help of the package <STYLE>, as it is shown in example 2.3.

Example 2.3. The use of global style sheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>Global styles</title>
  <style type="text/css">
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #336;
   }
  </style>
 </head>
 <body>
  <h1>Hello, world!</h1>
 </body>
</html>

In this example the tag style <H1>, which later can be used in this web-page, was defined.

Note

The global stylesheet can be located not only inside of the package <HEAD>, but also in any place of the HTML-document code.

Inner styles

The inner style in its essence is the extension for the single tag that is used on the web-page. For the style definition the tag parameter style is used, and its attributes are indicated with the help of the stylesheet language (the example 2.4).

Example 2.4. The use of inner styles.

1
2
3
4
5
6
7
8
9
10
11
<!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>Inner styles</title>
 </head>
 <body>
  <h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; 
  color: #336">Title</h1>
 </body>
</html>

In this example, the style of the tag <H1> is set with the help of the parameter style, in which the style attributes are enumerated by the way of the semicolon.

Note

It is recommended to use the inner style on the site restrictedly or just to refuse to use them at all. The matter is that the adding of such styles increases the general file volume, that increases the time of their downloading in the browser, moreover complicates editing of the documents for developers.

All the methods of theCSS use, which were described, can be used both independently and in aggregate to each other. In this case it is necessary to remember about the hierarchy of all methods! The inner style is used first, than the global style sheet and the associated style sheet is used last of all.  Two methods of style sheet adding to the document used in the example 2.5.

Example 2.5. Combining of different ways of styles’ connection.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>Style connection</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">Headline
  1</h1>
  <h1>Title 2</h1>
 </body>
</html>

In this example the first headline is set in red color with 36 pixels size with the help of the inner style, and the next headline – in green color through the global style sheet.

CSS import

The content of CSS file can be imported to the current style sheet with the help of command @import. This approach can be used with the joined style sheet or global style sheet, but not with embedded styles.

Syntax:

@import url ("file name") media types;
@import ("file name") media types;

After the key-word @import the way to the style file is indicated with the help of two methods given – with the help of the direction url and without it. The example 2.6 shows, in what way it is possible to import the style from the inner file to the global style sheet.

Example 2.6. CSS import to the global style sheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>Import</title>
  <style type="text/css">
   @import url("/style/header.css");
    H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; 
   }
  </style>
 </head> 
 <body>
  <h1>Title 1</h1>
  <h2>Title 2</h2>
 </body>
</html>

In this example the connection of the file header.css, which is located in the folder style,  is shown.
Similarly the import takes place in the file with the style, which later connects to the document (the example 2.7).
Example 2.7. Import in the joined style sheet

1
2
3
4
5
6
7
8
@import "/style/print.css" print;
@import "/style/palm.css" handheld; 
BODY {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 background: white;
 color: black;
}

The example shows the contents of the file mysite.css, which is add to the documents in the way it is necessary.