There are at least three ways to bind css styles to a website page. The article describes these binding methods in detail and provides comprehensive explanations.

First, you should explain why you need to bind anything to a website page at all, and why css styles are placed in a separate file.

Since the advent of web page content style sets (CSS), a very useful rule has been postulated among web developers: “separate content from its presentation!”

That is, the web page contains a blank html code, and all registration is submitted to separate sets css rules and preferably outside of this web page. This killed two birds with one stone.

Firstly, the html code remained clean. It only contained content and markup. Which significantly lightened the weight of the page.

And, secondly, this division made it possible to more efficiently edit design styles without affecting the web page itself.

There were even entire galleries with examples of sites where it was enough to simply replace one CSS style file with another, and the site would instantly be completely transformed in terms of design and structure of block placement.

Exists four ways to connect styles to your HTML document. The most commonly used methods are inline CSS and external CSS.

Inline CSS in HTML element

Below is an example CSS implementation based on the above syntax:

Heading

Paragraph.

We get the following result:

Attributes

Inline CSS - style attribute

You can use the attribute on any HTML element to define style rules. These rules will only apply to this element. Here's the general syntax:

<элемент style = "...правила стиля...">

Attributes

Example

Below is an example of inline CSS based on the above syntax:

Inline CSS

We get the following result:

External CSS styles - element

Element can be used to connect external CSS files into your HTML document.

An external CSS style sheet is a separate text file with extension .css. You define all the style rules in this text file and then you can connect CSS file to any HTML document using the element .

Here is the general connection syntax external file CSS:

Attributes

Attributes are associated with elements or rules defined in any external stylesheet file.

Any rule defined in tags, overrides rules defined in any external CSS file.

Any rule defined in an external stylesheet file has the lowest priority in CSS, and rules defined in that file will only apply when the two preceding rules do not apply.

Handling by older browsers

There are many older browsers that don't support CSS. Therefore, we must take care of writing inline CSS in our HTML document. The following code snippet shows how comment tags can be used to hide CSS from older browsers:

Hello dear readers of the blog site. After a block of articles devoted to HTML, I decided to introduce you to CSS, since markup tools are not enough to design documents. And generally speaking, learning HTML This is only the first stage in the process of learning how to create websites, the next steps are learning CSS. So let's find out what is CSS and why are they needed?.

If you look at pages with pure HTML, they look unattractive. Monotonous text, tables without frames, dreary black and white colors... Of course, you can make your website pages brighter using html, but this approach only clutters source and does not provide any flexibility. Therefore in modern layout Responsible for the external design of the website pages stylistic language CSS markup or just a style sheet.

Cascading Style Sheets(this is the abbreviation CSS - Cascading Style Sheets) are a set of parameters (styles) that describe the design of the web page itself and its individual elements. These settings control the page background, text color, paragraph alignment, table border options, and more.

Thus, using HTML language you form the structure of web pages, for example you set . And with the help of CSS rules, you specify how these elements of the HTML document will be displayed in the browser. That is, you set the font type and color, text alignment, background color of elements, various indents, etc. Moreover, one CSS rule can affect the visual presentation of several elements of a web page at once.

Therefore, you will most likely need minimal knowledge of the capabilities of cascading style sheets both when creating a website from scratch, and when making changes to an existing project. First of all, this knowledge will be needed when working on website design.

Adding styles or how to connect CSS to an HTML document

Before we talk about the syntax or properties of Cascading Style Sheets, we need to learn how to connect them to html document. There are three ways to connect css to html.

1. The first method is to place styles in a separate file or several files with the .css extension. In this case, to connect CSS styles, use link, which contains the path to the external styles file. This meta tag is placed in the heading section of the corresponding web page between the head tags. Here is the format for writing it:

The path to the style file is recorded as the value of the href attribute. rel attribute tells the browser what the file the link tag refers to is. The value "stylesheet" indicates that this file external table styles. IN type attribute indicates the MIME type of the file. For an external style sheet, the MIME type is "text/css".

This is what the line for connecting CSS styles in html code will look like:

...
.css"/>
...

The advantage of this method is that external style sheet can be linked to several web pages at once.

2. The second way is to write so-called global styles, which are written directly in the html code of the web page. They are locked into a double room style tag and is usually placed in the head section between the head tags:

...

...

The disadvantage of this method is that the CSS rules of global styles are applied only to the web page in which they are written.

3. The third method is the so-called built-in or internal styles. To do this, you simply need to place in the required html tag Style attribute, which includes a set of CSS properties as parameters:

Paragraph with gray background and red text

Moreover, the properties specified in the style attribute apply only to one html element. Typically, this method of connecting styles is used at the stage of debugging the site design, and then transferring the resulting CSS properties to a file with external styles.

Creating CSS styles. Cascading style sheet syntax - rules, properties, selectors.

Selector (
Property: Value;
Property: Value;
...
Property: Value
}

Those. a style rule includes a style selector and a list of style properties with their values ​​in curly braces (“(” and “)”):

• selector used to bind to elements of a web page to which it should extend its effect;
• “Property: Value” pairs are separated by a semicolon (";") and there can be as many of them as desired;
• between the last pair “Property: Value” and the closing curly brace The semicolon symbol can be omitted;
• style property represents one of the parameters of an html page element: text color, font type, indentation amount;
• spaces and line breaks when writing CSS rules are not critical, the browser ignores them, so you can format the code as you want;
• The code is also not case sensitive.

To make it clearer, let's look at a few examples.

Let's look at this CSS rule:

• body is a selector that represents the name of the tag ;
• background — style property that is used to set the background parameters;
• #0000FF is the value of the background style property, which is a color code in RGB format.

As a result, this style will be applied to the body element web pages and colors the page background in specified color. The style in question is called tag override style, because the selector is a tag name without characters< и >.

Let's look at another example:

h1 (
font-size: 24px;
color: green;
}

This style indicates that the browser will display any text placed in tags

green and will give it a font size of 24 pixels.

As a tag selector, in addition to the tag name, you can specify Class:

Yellowtext (color:yellow)

The class name must consist of letters of the Latin alphabet, numbers and hyphens and must begin with a letter. And in CSS definition rules there must be a dot before the class name, meaning that a style class is being defined. This style will be applied to all tags that have the specified class attribute and its value will be equal style class name without a dot:

This paragraph has orange text

In the example, we bound to the tag

Css rule using class name yellowtext. As a result, the text in this paragraph will be displayed in orange.

You can specify multiple style class names as the value of the clsss attribute, separated by spaces. In this case, the effect of the style classes will be:

Cursivetext (font-style: italic)

yellow italic text

In this example, to the tag

We attached two classes at once: yellowtext and cursivtext. As a result, the contents of the tag will be displayed yellow and italic font.

In addition to classes, css rules can be used as a selector identifier, which specifies a unique name for the element. Everything here is the same as in the case of style classes, only there are a few differences:

• in the CSS rule selector, the name of the identifier is also specified, but instead of a dot in front of its name, a hash symbol “#” is placed;
• binding to html element carried out through id attribute, the value of which is set to the name of the style without the hash sign;
• the value of the id attribute must be unique within the page, that is, in the html code there can only be one element with a given value of the id attribute, otherwise the code will not be valid.

Let's look at an example for clarity:

#textcenter(text-align: center;)

Center text

Binds to the p element (paragraph) using the id attribute css rule, which aligns text to the center of the page. It is no longer allowed to create elements on the page with this id attribute value, otherwise the html code will not be valid.

In addition to the considered methods of describing styles, css allows you to create combined styles and set several identical styles at once. Let's see an example:

h1.redtext, p strong (color: red)

In the example, two selectors are specified, separated by commas: “h1.redtext” and “p strong”. The first selector says that in all h1 elements with the value class attribute will be equivalent to redtext, the text will be displayed in red. In the second selector, the same thing will happen for all strong elements that are nested within the p tag:

This title appears in red

plain text, red text

Good afternoon! In this article I will show various methods to include CSS in HTML. I will also explain various subtleties and nuances different ways connecting styles.

Internal connection

An internal style sheet is a set of styles, a part of a web page's code that should always appear between the opening and closing tags HTML code in the body of a web page tag. Example:

Yellow text with Verdana font

Heading

In this example I showed changing the header style

. Now on this web page you just need to specify the tag

and the styles will be added to it automatically.

Internal styles.

CSS connection method - No. 3

Method No. 3 is used in rare cases. An inline style is used to change a single tag on a web page. To connect a style, use the parameter style.

Example of connecting a CSS table:

Heading

Combined method of connecting styles.

CSS connection method - No. 4

This method uses several styles at once, which we used above (method No. 1 - No. 3).

Example of connecting a CSS table:

Heading

Heading

As a result, following the example, we will get the first heading in red with a size of 50 pixels, and the next one in green and with a size of 90 pixels.

I repeat that all the described methods of using CSS can be used independently, or can be combined with each other. This can be seen in method No. 4.