You get a bonus - 1 coin for daily activity. Now you have 1 coin

Ways to add styles to a page in CSS

Lecture



There are several ways to add styles to a web page, which differ in their capabilities and purpose. Next, we consider them in more detail.

Related styles

When using linked styles, the description of selectors and their values ​​is located in a separate file, usually with the css extension, and a <link> tag is used to associate a document with this file. This tag is placed in the <head> container, as shown in Example 3.1.

Example 3.1. Connecting related styles

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Стили</title> <link rel="stylesheet" href="http://htmlbook.ru/mysite.css"> <link rel="stylesheet" href="http://www.htmlbook.ru/main.css"> </head> <body> <h1>Заголовок</h1> <p>Текст</p> </body> </html> 

The value of the <link> tag attribute - rel remains unchanged regardless of the code, as shown in this example. The href value sets the path to the CSS file, it can be set both relatively and absolutely. Note that this way you can connect a style sheet that is located on another site.

The contents of the mysite.css file connected via the <link> tag are given in Example 3.2.

Example 3.2. Style file

 H1 { color: #000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; } P { padding-left: 20px; } 

As you can see from this example, the file with the style does not store any data, except for CSS syntax. In turn, the HTML document contains only a link to a file with a style, i.e., the principle of code separation and site design is fully implemented in this way. Therefore, the use of linked styles is the most versatile and convenient method of adding style to a site. After all, styles are stored in one file, and in HTML documents only the link to it is indicated.

Global styles

When using global styles, CSS properties are described in the document itself and are located in the header of the web page. By its flexibility and capabilities, this method of adding a style is inferior to the previous one, but also allows you to store styles in one place, in this case right on the same page using the <style> container, as shown in Example 3.3.

Example 3.3. Using global style

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Глобальные стили</title> <style> H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; } </style> </head> <body> <h1>Hello, world!</h1> </body> </html> 

In this example, the style of the <h1> tag is given, which can then be universally used on this web page (Fig. 3.1).

  Ways to add styles to a page in CSS

Fig. 3.1. View header styled

Inner styles

The internal or inline style is essentially an extension to the single tag used on the current web page. To define a style, the style attribute is used, and its value is a set of style rules (Example 3.4).

Example 3.4. Use of internal style

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Внутренние стили</title> </head> <body> <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p> </body> </html> 

In this example, the style of the <p> tag is set using the style attribute, in which style properties are listed separated by a semicolon (Fig. 3.2).

  Ways to add styles to a page in CSS

Fig. 3.2. Using internal styles to change the appearance of text

Internal styles are recommended to be used on the website with limited or no use at all. The fact is that the addition of such styles increases the total size of files, which leads to an increase in the time of their loading in the browser, and complicates the editing of documents for developers.

All described methods of using CSS can be applied both independently and in combination with each other. In this case, it is necessary to remember about their hierarchy. The first is the internal style that takes precedence, then the global style and the last associated style. In Example 3.5, two methods are immediately used to add a style to the document.

Example 3.5. Combination of different methods

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Подключение стиля</title> <style> 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">Заголовок 1</h1> <h1>Заголовок 2</h1> </body> </html> 

In this example, the first heading is set in red with a size of 36 pixels using the internal style, and the next one is set in green through the global stylesheet (Fig. 3.3).

  Ways to add styles to a page in CSS

Fig. 3.3. Result of applying styles

CSS import

You can import the contents of a CSS file into the current style sheet using the @import command. This method can be used in conjunction with related or global styles, but not with internal styles. The general syntax is as follows.

 @import url("имя файла") типы носителей; @import "имя файла" типы носителей; 

After the @import keyword, the path to the style file is specified in one of two ways, with or without a url. Example 3.6 shows how you can import a style from an external file into the global style sheet.

Example 3.6. CSS import

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Импорт</title> <style> @import url("style/header.css"); H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> <body> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> </body> </html> 

This example shows the connection of the file header.css, which is located in the style folder.

Similarly, import occurs in the file with the style, which is then connected to the document (Example 3.7).

Example 3.7. Import in a table of related styles

 @import "/style/print.css"; @import "/style/palm.css"; BODY { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 90%; background: white; color: black; } 

This example shows the contents of the mysite.css file, which is added to the desired documents in the manner shown in Example 3.1, namely using the <link> tag.

Questions to check

1. The site has more than one hundred HTML documents that have the same style. What is the best way to connect CSS?

  1. Related styles.
  2. Global styles.
  3. Block styles.
  4. Inner styles.
  5. Export style.

2. In this example, what color will the text have on the web page?

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Цвет текста</title> <style> HTML { color: black; } BODY { color: red; } P { color: green; } </style> </head> <body> <p style="color: blue;"><span style="color: olive;">Текст</span></p> </body> </html> 

  1. The black
  2. Red
  3. Green
  4. Blue
  5. Olive

3. What HTML code is used to connect an external CSS file?

  1. <style> mystyle.css </ style>
  2. <style> @ mystyle.css </ style>
  3. <link rel = "stylesheet" href = "http://htmlbook.ru/mystyle.css">
  4. <link> @import url (mystyle.css) </ link>
  5. <stylesheet> mystyle.css </ stylesheet>

4. What attribute is used to define the internal style?

  1. style
  2. class
  3. styles
  4. font
  5. link

Answers

1. Related styles.

2. Olive.

3. <link rel = "stylesheet" href = "http://htmlbook.ru/mystyle.css">

4. style

created: 2014-10-19
updated: 2021-03-13
132652



Rating 9 of 10. count vote: 2
Are you satisfied?:



Comments


To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Cascading CSS / CSS3 Style Sheets

Terms: Cascading CSS / CSS3 Style Sheets