This page has been robot translated, sorry for typos if any. Original content here.

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

CSS (English Cascading Style Sheets - Cascading Style Sheets) is a formal language describing the appearance of a document written using a markup language.

It is mainly used as a means of describing, shaping the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, for example, SVG or XUL.

The purpose of creating CSS

CSS is used by the creators of web pages to specify colors, fonts, the location of individual blocks and other aspects of the presentation of the appearance of these web pages. The main purpose of CSS development was to separate the description of the logical structure of a web page (which is produced using HTML or other markup languages) from the description of the appearance of this web page (which is now produced using the formal CSS language). This separation can increase the availability of a document, provide greater flexibility and control over its presentation, as well as reduce complexity and repeatability in structural content. In addition, CSS allows you to present the same document in different styles or output methods, such as screen presentation, print presentation, voice reading (with a special voice browser or screen reader), or when outputted with devices using Braille.

Ways to connect CSS to the document

CSS rules are written in the formal CSS language and are located in style sheets, that is, style sheets contain CSS rules. These style sheets can be located both in the web document itself, the appearance of which they describe, and in separate files that have a CSS format. (Essentially, the CSS format is a plain text file. The .css file contains nothing but a list of CSS rules and comments for them.)

That is, these style sheets can be connected, embedded in the web document they describe in four different ways:

+ When a style sheet is in a separate file, it can be connected to a web document using the <link> tag, which is located in this document between the <head> and </ head> tags. (The <link> tag will have an href attribute that has the value of the address of this style sheet). All rules of this table are valid throughout the document;

  <! DOCTYPE html>
  <html>
  <head>
  .....
  <link rel = "stylesheet" href = "style.css">
  </ head>
  <body>
  .....
  </ body>
  </ html>
 

+ When a style sheet is in a separate file, it can be connected to a web document using the @import directive, which is located in this document between <style> and </ style> tags (which, in turn, are located in this document between < head> and </ head>) immediately after the <style> tag, which also indicates (in its brackets, after the word url) the address of this style sheet. All rules of this table are valid throughout the document;

  <! DOCTYPE html>
  <html>
  <head>
  .....
  <style media = "all">
  @import url (style.css);
  </ style>
  </ head>
  </ html>
 

+ when the style sheet is described in the document itself, it can be located in it between the <style> and </ style> tags (which, in turn, are located in this document between the <head> and </ head> tags). All rules of this table are valid throughout the document;

  <! DOCTYPE html>
  <html>
  <head>
  .....
  <style>
  body {
  color: red;
  }
  </ style>
  </ head>
  <body>
  .....
  </ body>
  </ html>
 

+ when the style sheet is described in the document itself, it can be located in it in the body of some particular tag (through its style attribute) of this document. All the rules of this table affect only the content of this tag.

  <! DOCTYPE>
  <html>
  <head>
  .....
  </ head>
  <body>
  <p style = "font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
  .....
  </ p>
  </ body>
  </ html>
 

In the first two cases they say that external style sheets are applied to the document, and in the second two cases internal style sheets are applied.

To add CSS to an XML document, the latter must contain a special reference to the style sheet. For example:

  <? xml-stylesheet type = "text / css" href = "style.css"?> 

The hierarchy of elements within the document

As you know, HTML documents are built on the basis of a hierarchy of elements, which can be clearly represented in a tree form. HTML elements for each other can be parents, children, ancestor elements, descendants, sister elements .

An element is the parent of another element if it is immediately in the hierarchical structure of the document, directly above this element. An element is an ancestor of another element if it is somewhere above this element in the hierarchical structure of a document.

Let, for example, in the document there are two paragraphs p , including the font in bold b . Then elements b will be children of their parent elements p and descendants of their ancestors body . In turn, for p elements, the body element will be only the parent. And besides, these two elements of p will be sister elements, as having the same parent - body .

In CSS, not only single elements, but also elements that are descendants, children or sister elements of other elements (see the subsection “types of selectors”) can be specified using selectors.

CSS construction rules

In the first three cases of connecting the CSS table to the document (see above), each CSS rule from the style sheet has two main parts - a selector and a block of declarations. The selector located on the left side of the rule determines which parts of the document the rule applies to. The ad block is located on the right side of the rule. It is placed in braces, and, in turn, consists of one or more declarations separated by the “;” sign. Each ad is a combination of CSS properties and values ​​separated by a ":". Selectors can be grouped in one line separated by commas. In this case, the property is applied to each of them.

  selector, selector {
  property: value;
  property: value;
  property: value;
  }
 

In the fourth case of connecting a CSS table to a document (see list), the CSS rule (which is the value of the style attribute of the tag on which it operates) is a list of declarations ( “CSS property: value” ) separated by “;” .