Hello dear beginning webmasters. This article begins an interesting section on CSS, at the end of which we will write.

But first, a short introduction - what CSS (styles) is, of course, for those who don’t know, the rest you can skip to this page.

Let me explain all this to you in simple words, as a builder with extensive experience, using the example of a house under construction. First, concrete carpenters appear at the construction site and make the foundation and, if any, other reinforced concrete parts of the future house. In our case, this is comparable to creating a page frame.

Then the masons come and raise the walls, followed by the roofers who install the roof. The draft version of the house is ready. In our case, this can be compared to a page written in HTML (remember index.html that we wrote in the previous course).

And then plasterers-painters, installers of windows and doors, and various other craftsmen of external and internal decoration of buildings come and make something very, or not very, beautiful out of a rough house. In our case, the functions of master finishers, all at once, will be performed by CSS.

So now we will perform all tasks related to the design of our site (changing colors and text formats, placing pictures, columns, and much more) using CSS.

A natural question arises: why then do you need to study html tags that do the same thing? The fact is that CSS was created on the basis of html, and many concepts and names also came into it from html, and you will soon understand this.

This technology is more advanced and convenient for solving problems related to design. Well, I can explain it in a simple way, again, using a comparison from my construction past.

Any good carpenter who has, say, such a chic tool as a “Shtil” chainsaw, which cuts both logs and slats with equal ease and generally allows you to do almost any carpentry work (except for planing and hammering nails), always has an ordinary hacksaw and an ax on hand, because , that a moment may always arise when it will be faster and easier to use just them.

There is one more nuance due to which it is necessary to know the html tags of previous versions. The fact is that there are a lot of resources on the Internet that were written a long time ago, and using precisely these tags.

You will certainly encounter them, and you will know what they are and what action they perform.

But in the fifth version of html, many tags used to design the appearance of the document are outdated, and their use is defined as an error.

The validator, upon detecting such a tag, strongly recommends using a CSS property instead. Yes, you yourself, having become acquainted with this wonderful programming language, will understand how much easier it is to use styles.

So let's start learning CSS technology. It will be better to do this using an editor.

In this file editor, you can write code and immediately see how the browser displays it. Very comfortably.

Turn

— How much does it cost to get to Deribasovskaya?
- Five rubles.
- What if I go with Izya?
- With Izy, without Izy... Five rubles.
- Izya, do you hear? I told you you're worthless!

The process of learning web design begins with the question of what CSS is. After all, it is this language that allows you to completely change the appearance of your documents. Offering a smart alternative to the legacy tags used in conventional hypertext language, CSS allows you to flexibly customize all significant parts of the page. The World Wide Web Consortium recommends using Cascading Style Sheets to define the design of web documents. In this article, you will learn what CSS is and where it is used.

Definition

CSS is an acronym for "cascading style sheets". As such, CSS cannot be considered a separate programming language, since it has no meaning without documents built in HTML or XHTML.

CSS styles are inextricably linked with Internet pages. The modern one would look too dull and inconspicuous without these same tables. They allow you to make unique changes and create incredible page designs using a fairly simple language. CSS was published in 1996 and has been extremely popular ever since, as there is no logical replacement for these style sheets. All files written in this language have the .css extension.

When creating cascading style sheets, developers tried to simplify the work of web designers as much as possible. The main goal was to separate the logical structure of the document, which is controlled using HTML or XHTML, and describe the appearance. Cascading style sheets allow you to change font, element position, spacing, and more.

Essence

CSS styles follow an extremely simple principle. There are no complicated rules or abstruse terms here. Simply select the desired element and assign the required property to it. That is, you can take the tag

And change the font and color of the characters that are inside it. In this case, each such document element will be assigned this property. There is no need to assign a value to all tags separately. You can use broader goals, such as assigning a property to the entire document at once by defining a property on the "body" element. Or style a separate fragment using special id identifiers or selectors.

Application

There are three ways to use cascading styles:

• At the document level. You can assign a short entry in the tag itself. This option is best used when there is no need to repeat this style.
• Inside the document. If you have a one-page site, you can easily enter cascading table rules at the top of the document. In this case, all definitions are placed in the tag

  Now I will give an example of how this works. Here's a sample code:

  Hello!

  Heading h2!

  Another way to add CSS

  There is another way to add style to a tag - specify the desired style parameters in the tag itself in the style attribute. These styles are called internal, or built-in. Essentially, these styles are an extension of one tag. Here is an example of using this style:

  H1 header without styles

  H1 header with inner style

  Subtotals

  So, we've seen three ways to add style sheets to a document.

  1. Linking is storing a CSS table in a separate file and connecting it to html documents. This method allows you to use one style sheet to format many documents. Styles from such files are called linked styles.
  2. Embedding - allows you to set all style sheet rules directly in the document header. These styles are also called global styles.
  3. Embedding in document tags - allows you to change the style parameters of specific page tags. This is also called internal or inline style.

  There is also a fourth way - importing, but we'll skip it for now.

  Now we are interested in the following question. How will the browser behave if the tag

  styles are specified in all three ways.

  There is a hierarchy in the application of styles, you need to remember this. The internal style has first priority, then the global style is applied and the associated style will be applied last.

  It is probably because of this hierarchy that style sheets are called cascading.

  Convenient way

  The most convenient way to set styles is to include a css file in the document, or tying. It is the one that is used most often, as it allows changing styles in one place to influence a large number of pages.

  Learn more about CSS syntax and terms used

  As I wrote above, a style sheet is a set of rules for formatting HTML tags. The syntax for these is as follows:

  tag (property: value)

  A CSS rule is an instruction to the browser how to display a tag.

  Any Cascading Style Sheets rule consists of two parts: a selector and a definition. That is, our syntax example can be written like this:

  selector (definition)

  A selector can be any HTML tag whose definition specifies how it should be formatted. The definition itself, in turn, also consists of two parts: properties and values, they are separated by a colon (:).

  selector (property: value)

  You can specify multiple definitions in one CSS rule, in which case they are separated by a semicolon (;), which is exactly what was done in the examples above.

  selector
  {
  property: value;
  property: value
  }

  There is no need to use a semicolon (;) after the last definition.

  Not only tags, but also classes and identifiers can act as a selector. But this is a topic for a separate article.

  CSS is case and whitespace insensitive, so line breaks, tabs, and spaces can be used as you wish to make your code easier to read.

  Heading h1

  Heading h2

  In this example, the first rule (for the selector h1 ) is written on one line, the second rule (for the selector h2 ) is written on a different line - each selector definition is written on a new line. The second version of the code is more convenient to read.

  In CSS, it is permissible to specify each property separately for one selector; here is an example of such code:

  This form of notation is not very convenient; you can easily get confused in such code, especially when you need to set many style properties for one selector. The following recording form is preferable:

  It may happen that the same style property was set twice for one selector.

  In this example, for the h1 selector, the color was first specified as blue, then red. In this case, a style property will be assigned, the rule for which is written below in the code. In our case, the h1 tag will appear in red.

  Such situations usually arise by accident, but can also occur when different style files containing the same selectors are connected to the document. This principle is useful to remember when CSS tables are not working correctly.

  The obvious thing is that each property can only have a value that corresponds to it. For the color property, this will be the color, not the size.

  CSS stands for “cascading style sheets” (from the English. Cascading Style Sheets). CSS is a set of parameters that are used to display a particular element on a web page. These parameters can be specified either in a separate file or written directly in the HTML code of the page. For example, on our web page there may be the following elements: article title, paragraphs, quotes, footnotes, pictures, videos, links. You can set a specific display style - size, color, frame thickness, etc.

  When working with a website, it is recommended to use a separate file with styles, rather than embedding code with style settings into individual pages. This will significantly reduce time - when you know the location of the style sheet, you can always quickly find a specific style and edit it. The style file has the extension .css, its name is usually style.css.

  Connecting the CSS file

  There are several ways to include a CSS file. We will talk about two methods that are most often used when creating websites:

  1. Linking. This method is used when you need to set styles for all pages of a site in one file. This method is often used when creating a website. To connect the style sheet use the command , which must be placed in the body of the tag .

  The first two properties indicate to the browser that the site uses CSS, then the address of the stylesheet file is indicated.

  2. Embedding in document tags. With this method, the style for a specific page element is set directly in the HTML code. For example:

  Here we have specified styles for the containers accordingly

  And . These styles will be applied exclusively to them.

  Let's give an example of a style sheet - create a file style.css and write the styles:

  body ( font-family: Arial, Verdana, Sans-serif; /* Font family */ font-size: 12pt; /* Main font size in points */ background-color: #f0f0f0; /* Web page background color * / color: #000000; /* Body text color */ ) h1 ( color: #a52a2a; /* Header color */ font-size: 24pt; /* Font size in points */ font-family: Georgia, Times, serif ; /* Font family */ font-weight: normal; /* Normal text weight */ )

  Here we have set styles for the page body and for the title

  . You can also set specific styles for any other page elements on your website.

  Now let's connect our style sheet to the site:

  Hello World!

  This is my first page with CSS styles

  So we figured it out what is CSS, why this technology is used, learned how to connect styles to the site. This lesson is a kind of introduction to cascading style sheets. In other lessons we will talk about CSS technology in more detail.

  Briefly explains what Cascading Style Sheets (CSS) are. With its help, you can create a simple document that you will use in subsequent sections.

  Info: What is CSS

  Cascading Style Sheets = CSS is a language that is responsible for the visual presentation of documents to the user.

  Under document we will understand the set of information about the page structure described markup language.

  A performance The presentation of a document to the user, in turn, means its transformation into a form that is easy to understand. Browsers such as Firefox, Chrome or Internet Explorer were created to display documents visually, for example on a computer screen, projector or printer output.

  Examples

  • The website page you are reading now is a document. The structure of the information you see on a page is usually described using the HTML markup language (HyperText Markup Language).
  • Dialog boxes in computer programs, also called modal windows, are usually also documents. Such windows can also be described using a markup language such as XUL (XML User Interface Language), which can be found, for example, in some Mozilla applications.

  In this guide, blocks with title More details, such as the following, contain additional information and links to resources that allow you to delve deeper into the issue that a particular section is devoted to. You can use these materials immediately or skip these blocks and come back to them later.

  More details

  A document is not the same as a file. But, nevertheless, the document can be stored in one file.

  With the page you are now reading, things are a little more complicated. When your browser requests a given page, the server accesses the database and generates a document, assembling it piece by piece from several documents, each of which, in turn, can be located in several files. However, in this tutorial you will also be able to work with documents, each of which is represented by one file.

  You will find more information about documents and markup languages ​​in other sections of this site:

  In the second part of this tutorial, you will see examples of these markup languages.

  More details

  In CSS terms, a program that displays a document to the user, the so-called user agent(UA). A browser is one of the types of UA. CSS is therefore not browser- or visual-only, but in the first part of this tutorial you'll only be working with CSS in the browser.

  Other definitions and terms related to CSS can be found in the Definitions of the CSS specification created by the World Wide Web Consortium (W3C), the international community that set open web standards.

  To action: Create a document

  1. Create a new folder on your computer for exercises.
  2. Open a text editor and create a new text file. This file will contain the document for the next few exercises.
  3. Copy and paste the HTML below and then save your file as doc1.html.

     C ascading S style S heets

  4. Open a new tab or window in your browser and open the file you just created.

     You should see a line with capital letters in bold:

     C ascading S style S heets

     What you actually see may differ slightly because the default settings of your browser and this encyclopedia will likely be different: slight differences in font, spacing, and colors are not very important.

  What's next?

  The document you created has not yet used CSS. In the next section, you'll learn how to use CSS to style your document.