Basics of HTML

  1. Terms and Definitions
  2. Principles of WEB 2.0
  3. The structure of the HTML-document
  4. Main metatags
  5. Formatting Text HTML
  6. Lists html-page
  7. Text fixed format
  8. Selected text html-page
  9. Change font options
  10. Graphics html-page
  11. Tables html-page
  12. Hyperlinks
  14. Frames


  1. What is CSS
  2. CSS syntax
  3. Style classes
  4. Combined styles
  5. CSS table
  6. CSS cascading rules
  7. Recommendations applying styles
  8. Font options
  9. Line breaks, vertical alignment
  10. Background settings
  11. Parameters of the paragraph
  12. List options
  13. The parameters of the cursor
  14. Options indentation
  15. Parameters frame
  16. Parameters selection
  17. Display options
  18. Containers


Style classes CSS

In the previous lesson was considered a style override tag. Consider a different style:

.warning {
	font-family: "Arial";
	font-size: 12px;	
	color: Red;
	font-style: italic

The principal difference of this example is that the selector is used as "arbitrary word" not-html tag. This kind of CSS style is called stylistic class .

The style class is not tied to any particular tag, it can be used in any tag. Name of style class is preceded by the symbol of a point, followed by a class name. Name of style class must begin with a letter, and can contain Latin letters, numbers, hyphen.

To bind a style class to a specific html-tag is the attribute of the CLASS , which is supported by the tags, which can be applied style. The value of the attribute CLASS is the name of a style class without dot character which is enclosed in quotes.


<P CLASS="warning">Be careful!<P>

The paragraph style is applied to the class that "warning", will be displayed in red italic Arial font size of 12 pixels.

As an attribute CLASS can specify multiple names style classes, with names separated by a space, and the action is summed up style classes.


<P CLASS="style-1 style-2 style-3">...<P>

Named styles

Named styles as style class that is clearly tied to the html-tag, but has some differences:


#warning {
	font-family: "Arial";
	font-size: 12px;	
	color: Red;
	font-style: italic

<P ID="warning">...<P>