We already know that in order for the website to look beautiful and stylish, we need to work with the CSS file. And for our styles to be applied we need to combine HTML file and a CSS file.

There are several options for performing this operation: using nested style sheets, external style sheets, and inline style.

Today we will talk about the latter method.

Injecting style into an HTML tag

The essence this method is that we implement the necessary design inside the tag. A separate attribute - style. This attribute can be applied to any tag, but only within the body of the site, that is within body. The value of this attribute is the operators of those styles that need to be applied to the this element.

For example, let's set different sizes font for two different paragraphs of text:

< p style= "font-size:25px;" >Set this piece of text to a letter height of 25 pixels. < p style= "font-size:15px; color:#2400ff;"> And this text will have letters, 15 pixels high, and we will also tint it blue to demonstrate the use of several styles at the same time.

Flaws

The example perfectly demonstrates how such styling clogs the page code.

You can also note a couple more disadvantages of using this stylization technique. The first of them is the spread of style throughout the document, which in the future of editing will complicate the process significantly.

It will also be difficult to design large volumes text. I think no one is happy with the prospect of specifying a font size for each paragraph, especially if there are 40 such paragraphs.

Even when using built-in styles, it becomes impossible to use pseudo-classes, which largely ties the hands of the web designer.

It is also worth noting the confusion that will certainly arise in use style attribute. This confusion will arise due to the use of different quotes when entering styles.

For clarity, let's look at the example below:

< div style= "font-family: "Roboto Condensed", sans-serif"> The entry is correct. < div style= "font-family: "Roboto Condensed", sans-serif"> That's also correct. < div style= "font-family: " Roboto Condensed ", sans-serif" >This is not a correct entry. < div style= "font-family: " Roboto Condensed ", sans-serif" >And this is also not true

Looking at the calculations provided above, the logical conclusion suggests itself that the use of built-in styles is associated with a number of significant complications and inconveniences.

When to Use Inline Style

Despite all the shortcomings, the built-in style was not invented in vain. Webmasters often turn to them in case of programmatic style assignment. For example, let's look at this code

< div id= "productRate" > < div style= "width: 40%" >

Recording the required width for this block will be a simple operation.

A similar situation may arise if it is necessary to replace the background image (for example) of a user with the administrator role. In this case img tag may not fit. Therefore, it is worth referring to the style attribute:

< div style= "background:url(fon.jpg)" >

Also, programmers often turn to built-in styles when creating pop-up windows. Often this process goes as follows: to the block, on the design of which work in progress, display:block is written, and the remaining windows are hidden using display:none so that they do not visually interfere with the programmer’s work. Here's an example:

< div class = "element" style= "display:block" >Pop-up window that is currently being designed

Bottom line

Using built-in styles is associated with a number of difficulties and inconveniences, however, in the process of designing certain elements, webmasters often turn to this method to optimize their work.

CSS (Cascading Style Sheets), or cascading style sheets, are used to describe appearance web document written in markup language. CSS sets style rules that change the appearance of elements placed on web pages, perform fine tuning their details, such as color, font, size, borders, background, and location in the document.

You can embed CSS code directly into a markup element as an attribute value style. This attribute is available for all HTML elements. WITH using CSS You can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each declared property is separated by a semicolon (;).

This is what it looks like for an element

Ways to add CSS styles

The CSS standard offers three options for applying a style sheet to a web page:

• External style sheet - Define style sheet rules in separate file.css, and then including this file in the HTML document using the tag
• Internal Style Sheet - Define style sheet rules using a tag

  Example: Internal Style Sheet

  • Try it yourself "

  Heading

  Text first

  Text two

  Text three

  Heading

  Text first

  Text two

  Text three

  IN in this example we set the background color for the element using CSS : background-color:palegreen, color and font type for headings

  : color:blue; font-family:verdana, as well as font size, color, and center text alignment for paragraphs

  : font-size:20px; color:red; text-align:center.

  Built-in style

  When to format separate element HTML pages, the style description can be placed directly inside the opening tag using the already specialized style attribute. For example:

  Paragraph

  Such styles are called built-in (inline), or embedded. Rules defined directly within an element's opening tag override rules defined in the outer CSS file, as well as the rules defined in the element

  Heading

  Text first

  Text two

  Text three

  Tasks

  • Center text alignment

    Using the inline paragraph style, center the text.

  To create the presentation of Web pages, the technology of cascading style sheets (CSS), or simply style sheets, is intended. Table css styles contains a set of rules (styles) that describe the design of the Web page itself and its individual fragments. These rules determine the color of the text and paragraph alignment, indents between graphic image and the text that wraps around it, the presence and parameters of the table’s frame, the background color of the Web page and much more.

  Each css style must be associated with a corresponding element of the web page (or the web page itself). After binding, described by the selected style css parameters begin to apply to this element. The link can be explicitwhen we ourselves specify which css style is bound to which element of the Web page, or implicit, when the css style is automatically bound to all elements of the Web page created using a specific tag.

  Table css styles can be stored directly in the HTML code of the Web page or in a separate file. The latter approach is more consistent Web concepts 2.0; As we remember from Chapter 1, it requires that the content and presentation of a Web page be separated. In addition, separate css styles can be placed directly into an HTML tag that creates a Web page element; This approach is now used quite rarely and mainly when experimenting with styles.

  CSS style sheets are written in a special language called CSS. The standard describing the first version of this language (CSS 1) appeared back in 1996. CSS 2 is currently widely supported and used, and CSS 3 is in development, a limited subset of which is already supported by many Web browsers.

  Just CSS 3 (more precisely, its subset supported modern programs) we will study.
  

  Creating CSS Styles

  Common Definition Format CSS styling Listing 7.1 illustrates.

  Here are the basic rules for creating a css style.

  A css style definition includes a selector and a list of style attributes with their values.

  - Selector used to bind a style to the element of the Web page to which it should apply its effect. In fact, the selector uniquely identifies a given style.

  Following the selector, separated by a space, is a list of css style attributes and their values, enclosed in curly braces.

  The style attribute (not to be confused with the tag attribute!) represents one of the parameters of a Web page element: font color, text alignment, indentation amount, frame thickness, etc. The value of the style attribute is indicated after it through the symbol: (colon). In some cases, the css style attribute value is enclosed in quotes.

  Couples<атрибут стиля>:<значение>separated from each other by a symbol; (semicolon).

  Between the last couple<атрибут стиля>:<значение>and a closing curly brace symbol; do not set, otherwise some Web browsers may not process the style definition correctly.

  Definitions various styles separated by spaces or line breaks.

  There should be no spaces or newlines inside selectors and style names. As for spaces and newlines placed elsewhere in the style definition, the Web browser ignores them. Therefore, we can format the CSS code to make it easier to read, just as we did with the HTML code.

  But the rules are the rules, and most importantly, practice. Let's look at a small style example:

  P (color: #0000FF)

  Let's look at it piece by piece.

  P is a selector. It represents the name of the tag

  Color is a style attribute. It sets the text color.

  - #0000FF is the value of the color style attribute. It represents the blue color code written in RGB format. (We'll talk more about RGB code and its definition in Chapter 8.)

  When the Web browser reads the described style, it will automatically apply it to all paragraphs of the Web page (tags

  ). This, by the way, is a typical example of implicit style binding.

  css style The one we looked at is called the tag override style. The selector here is the name of the HTML tag to be overridden by this style without characters< и >. Selector can be typed in both capital and lowercase letters; the author prefers capital letters.

  Let's look at a couple more of these styles.

  Here is the tag override style :

  EM ( color: #00FF00;
  font-weight: bold)

  Any text placed in a tag , The Web browser will display it in green bold font. The font-weight style attribute specifies the degree of "boldness" of the font, and its value bold specifies a semi-bold font.

  And this is the tag override style :

  BODY ( background-color: #000000;
  color: #FFFFFF )

  It sets for the entire Web page White color text (RGB code #FFFFFF) and black background color (RGB code #000000). The background-color style attribute, as we already understood, sets the background color.

  Now let's look at a completely different style:

  Redtext (color: #FF0000)

  It sets the text color to red (RGB code #FF0000). But the selector is clearly not the name of the tag - the HTML tag does not exist.

  This is a different variety CSS styling- style class. It can be attached to any tag. The selector here is the name of the style class, which uniquely identifies it. The name of the style class must consist of letters of the Latin alphabet, numbers and hyphens, and must begin with a letter. In the definition of a style class, its name is necessarily preceded by a dot symbol - this is a sign that it is a style class that is being defined.

  A style class requires an explicit tag binding. This is done using the CLASS attribute, which is supported by almost all tags. The value of this attribute is the name of the desired style class without the dot symbol:

  Attention!

  Here we have bound the newly created redtext style class to the "Attention!" paragraph. As a result, this paragraph will be typed in red font.

  

  In Listing 7.2, we created an attention style class that sets the font color to red and italic. (The font-style attribute specifies the style of the font, and its italic value makes the font italic.) We then bound it to a tag . As a result, the contents of this tag will be typed in bold, italic red font; the special importance and associated “boldness” of the text is determined by the tag , and the italic style and red color are the attention style class.

  As the value of the CLASS attribute, you can specify several names of style classes at once, separating them with spaces. In this case, the effect of style classes seems to add up. (For more information about the effect of several different styles we'll talk later.)

  

  In the example in Listing 7.3, we bound to the tag two style classes at once: attention and bigtext. As a result, the contents of this tag will be displayed in bold, italic, red font and large size. (The font-size style attribute specifies the font size, and its value large is big size, comparable to the font size used for first-level headings.)

  A named style is similar to a style class in many ways. The selector of this style is also a name that uniquely identifies it, and it is also explicitly bound to the tag. And then the differences begin.

  In the definition of a named style, a # (hash) symbol is placed in front of its name. It tells the Web browser that it is a named style.

  The binding of a named style to a tag is implemented through the ID attribute, which is also supported by almost all tags. The value of this attribute is the name of the desired named style, without the # symbol.

  The ID tag attribute value must be unique within the Web page. In other words, only one tag with a given ID attribute value can be present in the HTML code of a Web page. Therefore, named styles are used if a style should be bound to a single element of a Web page.

  In the example

  #bigtext (font-size: large)
  . . .
  

  This large text.

  The paragraph "This is large text" will be in large font.

  All the types of styles we examined had one selector, with the help of which the binding was performed. However, CSS allows you to create styles with multiple selectors - so-called combined styles. Such styles are used to bind to tags that satisfy several conditions at once. So, we can point out that combined style must be bound to a tag nested within another tag, or to a tag that has a specific style class specified.

  Rules that are established by the CSS standard when writing selectors in a combined style.

  -Selectors may be tag names, style class names, and named style names.

  Selectors are listed from left to right and indicate the nesting level of the corresponding tags, which increases as you move from left to right: tags to the right must be nested within tags to the left.

  If a tag name is combined with a style class or named style name, then that style class or named style name must be specified for that tag.

  Selectors are separated by spaces.

  The style is bound to the tag indicated by the rightmost selector.

  Tricky rules, aren't they?.. To understand them, let's look at a few examples.

  Let's start with the simplest combined style:

  P EM ( color: #0000FF )

  Tag names are used as selectors

  AND .

  Tag comes first

  Behind him is a tag . So the tag must be nested in a tag

  The style will be bound to the tag .

  This text will turn blue.

  
  

  But this one won't.

  
  

  This- Same.

  Here the words "This text" will be in blue font.

  Here is another combined css style:

  P.mini ( color: #FF0000;
  font-size: smaller)

  Tag name

  Combined with the style class name mini. This means that this css style will be applied to any tag

  For which the style class name mini is specified. (The value of the smaller font-size style attribute specifies a smaller font size.)

  Little red text.

  And the last example of a combined css style:

  P.sel (color: #FF0000)

  This style will be applied to the tag , located inside the tag

  To which the style class sel is bound.

  This the text will turn red.

  In this example, the word "This" will be highlighted in red.

  The CSS standard allows you to define several identical styles at once, listing their selectors separated by commas:

  H1, .redtext, P EM (color: #FF0000)

  Here we have created three identical styles at once: tag override style

  , style class redtext and combined style P EM. They all set the font color to red.

  All four types of CSS styles we looked at can only be present in style sheets. If you specify them in the HTML code of a Web page, they will most likely be ignored.

  The styles of the last - fifth - variety are indicated directly in the HTML code of the Web page, in the corresponding tag. These are inline styles. In a close-knit family of styles, they stand apart.

  They do not have a selector, since they are placed directly in the desired tag. The selector is simply not needed in this case.

  There are no curly braces because there is no need to separate the list of css style attributes from the selector, which is not there.

  An inline css style can only be bound to one tag - the one in which it is located.

  The inline css style definition is specified as the value of the STYLE attribute the desired tag, which is supported by almost all tags:

  Small
  -italics.

  We mentioned earlier that in some cases the attribute value css style must be enclosed in quotation marks. But the inline style definition uses apostrophes instead of quotation marks.

  Built-in CSS styles are used quite rarely now, because they violate the requirement of the Web 2.0 concept to separate the content and presentation of Web pages. They are mainly used to bind styles to a single element of a Web page (very rarely) and when experimenting with styles.

  In Chapter 14 we will look at another variety CSS styles. For now, let's finish with them and start looking at style sheets.

  Let's find out what cascading style sheets are, what they are CSS style and learn how to set it for HTML elements.

  By this article you already have a clear understanding that language hypertext markup used to describe the content of a web page. While traveling on the Internet, we notice that pages look different: colors, fonts, different line spacing, background images and even animation. Without putting it on the back burner, I want to immediately explain to you that the way these pages will look is influenced by the ones used. cascading style sheets (Cascading Style Sheets - CSS). Within HTML tutorial We will briefly look at the use of cascading style sheets, you can study them in detail after this course in the CSS tutorial section.

  What is style? The style sets the appearance of any page element, i.e. Roughly speaking, this is a rule that tells the browser how to format a certain element (for example, change the background or font color).

  Each HTML element has default style. Changing the default style of an HTML element can be done using the global style attribute. The attribute specifies built-in (inline) CSS style for the element. Inline CSS is used to apply a unique style to a single HTML element. Within learning HTML we'll only look at using inline CSS.

  Hint: This example uses the following colors: white(white), khaki(khaki), gray(grey). The font used for the text of the poem is Verdana.

  If you have difficulties completing the task, then inspect the page code by opening the example in separate window by clicking on the image.

  CSS (Cascading Style Sheets), or cascading style sheets, are used to describe the appearance of a document written in a markup language. Typically, CSS styles are used to create and change the style of web page elements and user interfaces written in HTML languages and XHTML, but can also be applied to any kind of XML document, including XML, SVG and XUL.

  Cascading style sheets describe rules for formatting elements using properties and acceptable values these properties. For each element, you can use a limited set of properties; other properties will not have any effect on it.

  A style declaration consists of two parts: the web page element − selector, and formatting commands - ad block. The selector tells the browser which element to format, and in the declaration block (code in curly braces) formatting commands are listed - properties and their values.

  
  Rice. 1. CSS style declaration structure

  Types of cascading style sheets and their specifics

  1. Types of style sheets

  1.1. External style sheet

  External style sheet represents text file with the .css extension, which contains a set of CSS styles for elements. The file is created in a code editor, just like an HTML page. The file can only contain styles, without HTML markup. An external style sheet is connected to a web page using a tag , located inside the section . These styles work for all pages of the site.

  You can attach multiple style sheets to each web page by adding multiple tags in sequence , indicating the purpose of this style sheet in the media tag attribute. rel="stylesheet" specifies the type of link (link to a style sheet).

  type attribute="text/css" is not required by the HTML5 standard, so it can be omitted. If the attribute is missing, the default value is type="text/css" .

  1.2. Internal styles

  Internal styles embedded in a section HTML document and are defined inside the tag. Internal styles take precedence over external ones, but are inferior to inline styles (specified via the style attribute).

  ...

  1.3. Built-in styles

  When we write inline styles, we write the CSS code into the HTML file, directly inside the element tag using the style attribute:

  Pay attention to this text.

  Such styles only affect the element for which they are set.

  1.4. @import rule

  @import rule Allows you to load external style sheets. For the @import directive to work, it must appear in the style sheet (external or internal) before all other rules:

  The @import rule is also used to include web fonts:

  @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

  2. Types of selectors

  Selectors represent the structure of a web page. They help create rules for formatting web page elements. Selectors can be elements, their classes and identifiers, as well as pseudo-classes and pseudo-elements.

  2.1. Universal selector

  Matches any HTML element. For example, * (margin: 0;) will reset the margins for all site elements. The selector can also be used in combination with a pseudo-class or pseudo-element: *:after (CSS styles) , *:checked (CSS styles) .

  2.2. Element selector

  Element selectors allow you to format all elements of this type on all pages of the site. For example, h1 (font-family: Lobster, cursive;) will set the overall formatting style for all h1 headings.

  2.3. Class selector

  Class selectors allow you to specify styles for one or more elements with the same class name, placed in different places on the page or on different pages site. For example, to create a title with the headline class, you need to add class attribute with the value headline in the opening tag

  and set the style for the specified class. Styles created using a class can be applied to other elements, not necessarily of that type.

  Instructions for use personal computer

  .headline ( text-transform: uppercase; color: lightblue; )

  2.4. ID selector

  The ID selector allows you to format one specific element. The id must be unique and can appear only once on one page.

  #sidebar ( width: 300px; float: left; )

  2.5. Descendant selector

  Descendant selectors apply styles to elements within a container element. For example, ul li (text-transform: uppercase;) - will select all li elements that are children of all ul elements.

  If you want to format the descendants of a particular element, you need to give that element a style class:

  p.first a (color: green;) - this style will be applied to all links descendants of the paragraph with the first class;

  p .first a (color: green;) - if you add a space, links located inside any .first class tag that is a child of the element will be styled

  First a (color: green;) - this style will be applied to any link located inside another element, designated by the class.first .

  2.6. Child selector

  A child element is a direct child of its containing element. One element can have several child elements, and each element can only have one parent. Child selector allows you to apply styles only if the child element comes immediately after the parent element and there are no other elements between them, that is, the child element is not nested within anything else.
  For example, p > strong will select all strong elements that are children of the p element.

  2.7. Sister selector

  Sisterhood occurs between elements that share a common parent. Sibling selectors allow you to select elements from a group of elements of the same level.

  h1 + p - will select all first paragraphs immediately following any tag

  without affecting the remaining paragraphs;

  h1 ~ p - will select all paragraphs that are sister to any h1 heading and immediately after it.

  2.8. Attribute selector

  Attribute selectors select elements based on the attribute name or attribute value:

  [attribute] - all elements containing the specified attribute - all elements for which the alt attribute is specified;

  selector[attribute] - elements of this type containing the specified attribute, img - only images for which the alt attribute is specified;

  selector[attribute="value"] - elements of this type containing the specified attribute with a specific value, img - all pictures whose title contains the word flower;

  selector[attribute~="value"] - elements partially containing given value, for example, if several classes are specified for an element separated by a space, p - paragraphs whose class name contains feature ;

  selector[attribute|="value"] - elements whose list of attribute values ​​begins with the specified word, p - paragraphs whose class name is feature or begins with feature ;

  selector[attribute^="value"] - elements whose attribute value begins with the specified value, a - all links starting with http://;

  selector[attribute$="value"] - elements whose attribute value ends with the specified value, img - all images in png format;

  selector[attribute*="value"] - elements whose attribute value contains the specified word anywhere, a - all links whose name contains book .

  2.9. Pseudo-class selector

  Pseudo-classes are classes that are not actually attached to HTML tags. They allow you to apply CSS rules to elements when an event occurs or obeys a specific rule. Pseudo-classes characterize elements with the following properties:

  :hover - any element over which the mouse cursor is hovered;

  :focus — interactive element, which was accessed using the keyboard or activated using the mouse;

  :active - element that was activated by the user;

  :valid - form fields whose contents have been checked in the browser for compliance with the specified data type;

  :invalid — form fields whose contents do not match the specified data type;

  :enabled - all active form fields;

  :disabled — blocked form fields, i.e., in an inactive state;

  :in-range - form fields whose values ​​are in the specified range;

  :out-of-range - form fields whose values ​​are not within the specified range;

  :lang() - elements with text in the specified language;

  :not(selector) - elements that do not contain the specified selector - class, identifier, name or form field type - :not() ;

  :target is an element with the # symbol that is referenced in the document;

  :checked — selected (user-selected) form elements.

  2.10. Structural pseudo-class selector

  Structural pseudo-classes select child elements according to the parameter specified in parentheses:

  :nth-child(odd) - odd child elements;

  :nth-child(even) - even child elements;

  :nth-child(3n) - every third element among children;

  :nth-child(3n+2) - selects every third element, starting with the second child (+2) ;

  :nth-child(n+2) - selects all elements starting from the second;

  :nth-child(3) - selects the third child element;

  :nth-last-child() - in the list of child elements, selects the element with specified location, similar to:nth-child() , but starting from the last one, in the opposite direction;

  :first-child - allows you to style only the very first child element of the tag;

  :last-child - allows you to format the last child element of the tag;

  :only-child - selects an element that is the only child element;

  :empty - selects elements that have no children;

  :root - selects the element that is the root in the document - html element.

  2.11. Structural type pseudo-class selector

  Indicates a specific type of child tag:

  :nth-of-type() - selects elements similar to :nth-child() , but only takes into account the type of the element;

  :first-of-type - selects the first child of a given type;

  :last-of-type - selects the last element of this type;

  :nth-last-of-type() - selects an element of the given type in a list of elements according to the specified location, starting from the end;

  :only-of-type - selects the only element of the specified type among the child elements of the parent element.

  2.12. Pseudo element selector

  Pseudo elements are used to add content, which is generated using the content property:

  :first-letter - selects the first letter of each paragraph, applies only to block elements;

  :first-line - selects the first line of element text, applies only to block elements;

  :before - inserts generated content before the element;

  :after - adds generated content after the element.

  3. Selector combination

  To more accurately select elements for formatting, you can use combinations of selectors:

  img:nth-of-type(even) - will select all even-numbered images whose alternative text contains the word css .

  4. Grouping selectors

  The same style can be applied to multiple elements at the same time. To do this, you need to list the required selectors on the left side of the declaration, separated by commas:

  H1, h2, p, span ( color: tomato; background: white; )

  5. Inheritance and cascade

  Inheritance and cascade are two fundamental concepts in CSS that are closely related. Inheritance is where elements inherit properties from their parent (the element containing them). The cascade manifests itself in how different types style sheets are applied to a document, and how conflicting rules override each other.

  5.1. Inheritance

  Inheritance is the mechanism by which certain properties are transmitted from an ancestor to its descendants. CSS Specification Inheritance of properties related to the text content of the page is provided, such as color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space and word-spacing. In many cases, this is convenient because you don't have to set the font size and font family for every element on the web page.

  Properties related to block formatting are not inherited. These are background , border , display , float and clear , height and width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align and z-index .

  Forced inheritance

  By using keyword inherit can force an element to inherit any property value of its parent element. This works even for properties that are not inherited by default.

  How CSS styles are set and work

  1) Styles can be inherited from the parent element (inherited properties or using the inherit value);

  2) Styles located in the style sheet below override styles located in the table above;

  3) Styles from different sources can be applied to one element. You can check which styles are applied in the browser developer mode. To do this, click on the element right click mouse and select “View code” (or something similar). The right column will list all properties that are set on this element or inherited from a parent element, along with the style files in which they are specified, and serial number lines of code.

  
  Rice. 2. Developer mode in Google browser Chrome

  4) When defining a style, you can use any combination of selectors - an element selector, an element pseudo-class, a class or an element identifier.

  div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

  5.2. Cascade

  Cascading is the mechanism that controls end result in a situation where different CSS rules are applied to one element. There are three criteria that determine the order in which properties are applied—the!important rule, specificity, and the order in which style sheets are included.

  Rule!important

  The weight of a rule can be specified using the!important keyword, which is added immediately after the property value, for example, span (font-weight: bold!important;) . The rule must be placed at the end of the declaration before the closing bracket, without a space. Such announcement will take precedence over all other rules. This rule allows you to cancel a property value and set a new one for an element from a group of elements in the case when there is no direct access to the style file.

  Specificity

  For each rule, the browser calculates selector specificity, and if an element has conflicting property declarations, the rule that has the most specificity is taken into account. The specificity value has four parts: 0, 0, 0, 0. The selector specificity is defined as follows:

  for id, 0, 1, 0, 0 is added;
  for class 0, 0, 1, 0 is added;
  for each element and pseudo-element, 0, 0, 0, 1 is added;
  for an inline style added directly to an element - 1, 0, 0, 0 ;
  A universal selector has no specificity.

  H1 (color: lightblue;) /*specificity 0, 0, 0, 1*/ em (color: silver;) /*specificity 0, 0, 0, 1*/ h1 em (color: gold;) /*specificity: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: blue;) /*specificity: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (color: grey;) /*specificity 0, 0, 1, 0 */ #sidebar (color: orange;) /*specificity 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specificity: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

  As a result, those rules that are more specific will be applied to the element. For example, if an element has two specificities with values ​​0, 0, 0, 2 and 0, 1, 0, 1, then the second rule will win.

  Order of connected tables

  You can create multiple external style sheets and connect them to one web page. If they occur in different tables different meanings properties of one element, then as a result the rule in the style sheet listed below will be applied to the element.