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) is a formal language for describing the appearance of a document written using a markup language.

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

The purpose of creating CSS

CSS is used by the creators of web pages to specify colors, fonts, location of individual blocks, and other aspects of representing 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 made using the formal CSS language). This separation can increase the availability of the document, provide greater flexibility and the ability to manage its presentation, and also reduce complexity and repeatability in structural content. In addition, CSS allows you to represent the same document in different styles or output methods, such as a screen view, a printed presentation, a voice reading (a special voice browser or screen reader), or output by devices using Braille.

Ways to connect CSS to a 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 placed both in the web document itself, the appearance of which they describe, and in individual files that have the CSS format. (In fact, the CSS format is a plain text file.The .css file contains nothing but a list of CSS rules and comments to them.)

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

+ When the stylesheet is in a separate file, it can be connected to the web document via the <link> tag 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 the rules of this table are valid throughout the document;

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

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

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

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

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

+ When a stylesheet is described in the document itself, it can reside in it in the body of a particular tag (through its style attribute) of this document. All the rules in this table apply only to the contents 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, it is said that external stylesheets are applied to the document, and in the second two cases - internal style sheets.

To add CSS to an XML document, the latter must contain a special link to the stylesheet. For example:

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

Hierarchy of elements within a document

As you know, HTML documents are built on the basis of the hierarchy of elements, which can be visually represented in a tree-like form. HTML elements for each other can be parent, child, ancestor, descendant, sister .

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 the ancestor of another element, if in the hierarchical structure of the document it is somewhere above this element.

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

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

CSS building rules

In the first three cases of connecting a CSS table to a document (see above), each CSS rule from the style sheet has two main parts - a selector and an ad unit. The selector on the left 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 a ";". Each declaration is a combination of a CSS property and a value separated by a ":". Selectors can be grouped in one line, separated by a comma. 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 acts) is a list of ads (the "CSS property: value" ), separated by a ";" .