CSS

CSS is a separate language with its own format and rules, but it was created specifically for HTML. Using CSS, you can describe the appearance of the page and individual elements. For example, text color, font size, size and indentation of images, frames around elements, rounding in photos, and so on.

CSS stands for Cascading Style Sheets. Now we will figure out how to set styles, and where does the word "cascade".

Let's say we have this HTML:

In the territory where New York is now located, long before the Europeans appeared here, Indian tribes lived Manahattou and Canarsi.

This is all one paragraph, but I added line feeds to make the text easier to read on this page. In HTML, line feeds are not translated into actual line feeds in the final page. Instead, it will turn into a single space. Multiple line breaks will also turn into just one space. Well, a few spaces will also turn into one space. All options below will lead to one result:

In the territory where New York is now located, long before the Europeans appeared here, the Indian tribes of Manahattou and Canarsi lived.

In the territory where New York is now located, long before the Europeans appeared here, Indian tribes lived Manahattou and Canarsi.

For a real line feed, you can use a single tag
. We are distracted. So, we want to add style to our HTML. Using the CSS code below, we make sure that all p elements have red text inside and a font size of 20 pixels: p { color: red; font-size: 20px; } Here is a live example: The first part is the selector. To them we choose what to apply the style to. The set of styles is indicated after the selector in curly ({,}) brackets. A collection consists of property: value pairs. Classes and id But what if we want to apply this style not to all paragraphs, but only to some? There are classes for such tasks in HTML and CSS.

In the territory where New York is now located, long before the appearance of Europeans here, Native American Manahattou and Canarsi tribes.

This is confirmed by the finds of arrowheads and other artifacts in areas of the city that are not built up buildings such as Inwood Hill Park and Riverside Park.

European settlements appeared here in 1624.

We indicated the class in two paragraphs. Now we need to update the CSS, because now it does not take the class into account and applies styles to all paragraphs. Specify the class:

p.red {
color: red;
font-size: 20px;
}
The p.red selector means "all elements of type p with class red."

That is, if we add the red class to an element of another type, for example, Goo , then this element does not turn red: the style works strictly for p.

You can free the style of this restriction:

.red {
color: red;
font-size: 20px;
}
The .red selector means "all elements of any type with class red."

Suppose the visual style of our page has changed, and important pieces of text are now highlighted not in red with an enlarged font, but in green and italics.

.red {
color: green;
font-style: italic;
}
Great, but the class name doesn't make much sense now. It is no longer red in fact. You will have to change it to green and change the class in HTML for all the corresponding elements.

But the idea is better - initially use the semantic meaning in the names of the classes, and not the peculiarity of the implementation. For example, if in this way we highlighted more important parts of the text, then it was worth calling the important class:

.important {
color: green;
font-style: italic;
}
Now, when changing colors or any other details of this style, we do not need to worry about the name: the meaning will not change, only the specific implementation will change.

Sometimes there is an element in a document, which in meaning can be only one. For example, in articles this is often the heading: on the page of the article there can be only one heading of the article.

Another example is a site logo somewhere upstairs.

For unique "one-time" elements, use id:

History of New York City

In the territory where New York is now located, long before the appearance of Europeans here, Native American Manahattou and Canarsi tribes.

This is confirmed by the finds of arrowheads and other artifacts in areas of the city that are not built up buildings such as Inwood Hill Park and Riverside Park.

And so you can specify the style:

h1 # article-title {
font-family: Georgia, serif;
color: # 1050ff;
}
The structure and idea are the same as with classes, but instead of a period. used grill #. In this style, we set the Georgia serif font and the blue color in the HEX format. Enter "color picker" in google to work with interact