css file. Connecting CSS

It is very important to note that HTML is not a programming language, as most people believe. inexperienced users, but only a tool for layout of web pages and nothing else! Remember this. I see a lot of ridiculous messages where people say that they are programmers and write their “programs” in HTML. I'll probably upset you, but that's not true.

HTML is just a tool for page layout, and if you do this, you are a layout designer. But if you additionally write some, in the same JavaScript or PHP, then you can talk about such a thing as a programmer. But that’s not what we’re talking about now, and when we know for sure whether HTML is a programming language or not, let’s move on to the main point of this article.

In addition to the fact that HTML acts as the layout of your web pages, there is such a thing as CSS (no, this is not a Counter-Strike: Source game, as many young webmasters might think), these are cascading style sheets. Their essence is the formation of the general style of the page or its individual element. In simple words– indents, color, font, width, height and other other parameters are configured through these styles.

There are a large variety of properties themselves, some of them are universal, and some are personal for a particular element. We won’t describe them now, but will focus on how to connect your styles to an HTML document.

Connecting an external style sheet

The external style file has the extension .css (this is prerequisite) and the file name to English. Example – main.css or style.css. After you have created such a file and filled it with the appropriate styles, upload it to your website in a folder convenient for you and connect to the HTML document.

The most common connection method external file styles are:

Or a shortened version for HTML5:

What should you pay attention to here?

1. The file is included in the HEAD section of all pages of your site. Where this file is not present, your design will be missing.
2. In part href written complete or relative link to the CSS file.
3. The final closing slash is optional, but preferred. This is how the code is obtained “according to Feng Shui”.
4. You can connect any number of style files to a page. The main thing is without fanaticism.

In addition, styles can be inlined in several other ways.

Connecting an internal style sheet

An internal style sheet means that there is no style file. The table properties in this case are inserted into the page as follows:

Or short view for HTML5:

There are no special nuances here - you can insert the structure both into the HEAD and BODY sections. Moreover, on a page, in different parts of it, there may be several such structures.

Connecting an embedded style sheet

If you have explored various sites and looked at how their layout is structured, you might have noticed how styles are written directly as follows:

This option is called “inline styles” and is applicable to all elements of a web page, be it a simple block, an image or an embedded video.

The only caveat here is that if in external or internal styles not used property " !important» – the built-in property has priority in execution. What does it mean? Let me give you a simple example:

Despite the fact that in the internal styles we have set the color of the phrase to red, it will be black, as this is indicated in the built-in styles.

In this tutorial you will learn how to connect css to html. Let's look at several options with examples. We’ll also talk about asynchronous loading of styles and hacks for different browsers.

How to connect css to html in a separate file

Now I’ll show you how to connect css to html with a separate styles file. Created separate file css. Then, using special commands, it connects to necessary documents. This type is called an external style sheet.

This method is the most preferable. It allows you to develop website styles separately from HTML documents. The styling can then be used in a single style.css file across many pages.

We write the path exactly in the head tag. It specifies all the necessary system information to display the page. It connects like this:

There are also other connection methods. Use them only as additional option.

It is worth saying that inline styles have the highest priority. Even if you connected external css, the browser will give preference to inline styles for a particular tag. In second place in priority are internal styles. They are inferior to built-in ones, but superior to external ones.

In general, as an additional option, you may find it useful to use inline or internal styles. This is very useful if you need to style some element on a certain page without affecting the main css file.

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 in general, learning HTML This is just the first step in the process of learning how to create websites; the next step is 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 website pages brighter using html, but this approach only clutters source code and does not provide any flexibility. Therefore, in modern layout for external design site pages answers CSS styling language 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 the 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.

That's why minimal knowledge You will most likely need 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, you need to learn how to connect them to an 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 is an external style sheet. The type attribute specifies 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 will look like: html code e:

...
.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 background of the page in the 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 the definition of a CSS rule, 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 action 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 content of the tag will be displayed in 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 given value id attribute, otherwise the code will not be valid.

Let's look at an example for clarity:

#textcenter(text-align: center;)

Center text

A css rule is attached to the p (paragraph) element using the id attribute, which aligns the 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 whose class attribute value is 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

Hello, dear readers of the Anatomy of Business project. Webmaster Alexander is with you! In the last article, we looked at what CSS styles are and how important they are in WEB programming.

It is quite obvious that if CSS styles have a significant impact on the display of an HTML file, then they must be connected somehow. Today we will look at four main ways to connect CSS style to HTML.

Let's not delay the matter long box and let's get started!

Including a separate CSS file!

One of the most convenient and simple ways connecting styles is connecting a separate file with styles. To do this you need to use text notepad editor++ (or any other) create a file with the extension .css and place it in the same folder as the file to which we want to place it.

Then in the HTML file between the tags post the following code:

Now let's look at what this all means:

Link # translated from English means “link”. This way we show the browser that what we are going to talk about next is a link. rel= # with this attribute we show how the CSS file relates to the HTML file. "stylesheet" # namely that the CSS file is a cascading style sheet. type="text/css" # everything is simple here: this is an indication that the file is written in text format and has the extension .css href="style.css" # this is a link to a file with CSS styles.

In my opinion, this is the most preferred way to include CSS styles.

We write styles directly in the HTML file (first method)

The next way to specify CSS styles is to write them directly in the HTML document. It looks like this:

If we look at how this HTML document will be displayed in the browser, we will see that the text between the tags turned red. And using the style attribute, we say that next we have display style parameters. Color is a selector responsible for color. Red is the value of this selector. In this way, we can highlight certain parts of the text with a certain type of display.

Placing cascading style sheets inside HTML (second method)

Another way to include CSS styles is to place cascading tables inside the HTML file itself. In my opinion, this method is not the most convenient, because using it, analyzing the site code becomes not very convenient. In order to start writing CSS styles, you just need to insert tags into the HTML file . In practice it looks like this:

Here's an example: displaying CSS styles in an HTML document

Please note that inside the tag we also write code according to CSS rules, using curly braces. In subsequent articles I will talk in more detail about the rules of syntax in CSS.

Connecting multiple CSS files to one HTML document.

HTML rules allow multiple CSS files to be included at once. Many webmasters use this: they create separate CSS files for text and images. Or separate files for the header, footer and main body of the page. Let's figure out how to implement this.

We are creating several CSS style files. Let their names be style-1.css and style-2.css. We place it, as in method number one, in the same folder with the HTML file.

Here's an example: displaying CSS styles in an HTML document

Everything is similar to the first method, only in in this case we provide links to two files at once.

Link to the CSS file inside to a file of the same type.

In addition to all the above methods, there is a method that allows you to place links to many others inside one CSS file!

This is implemented as follows:
First, we need to connect at least one CSS file to your code in the same way.

Secondly, enter the following code into the already connected file:

@import url("style-2.css");

This line connects to our file additional file CSS. If you have any difficulties connecting CSS, you can ask them in the comments.
As we learned from the previous two lessons, CSS technology is the most powerful tool, which every webmaster should master! To improve the assimilation of the material, I decided to add a training video + test to consolidate the information received at the end of each lesson.

Material fixation test:

We need to include the CSS file by placing a link to it in the HTML file. Which of the following methods is correct?

Option 1:

Option 2:

Option 3:

Option 4:

Can we place CSS cascades directly in the HTML file?

Connect CSS tables to HTML document possible in several ways.

Built-in styles

Set CSS styles you can directly in the HTML markup by adding a css rule to the desired tag using the style attribute.

Red text color

CSS styles are registered to the tag using style attribute. In this way we can apply CSS styles to any tag on HTML page. IN in this example we applied CSS color property for a paragraph, setting its meaning color:red. We can set several CSS properties at once; to do this, do not forget to separate each property-value pair with a symbol ";" .

Minus this approach is that this property will applied only to a specific p tag, other paragraphs will not see this property, which is a correspondingly big minus. In addition, such a page is simply impossible to maintain. Changing inline CSS properties must be repeated for each new page.

Third minus this approach is slow page loading speed And clutter HTML markup . We will not be able to cache CSS property data i.e. Every time the page is loaded, the browser will recalculate the properties again.

Plus this approach is that you no need to create CSS file, and you can quickly make changes in debugging mode and see their results.

Internal style sheets

The second way to connect CSS styles is to add CSS styles to the page via a tag

Now, if you can use CSS selectors to select a group of tags on a page, but the problem when creating new pages, again this method remains unsolved. Plus, you still won't be able to cache CSS styles.

Connecting external style sheets

The most in a convenient way work with CSS tables, is the use of external style sheets. They are called external because the CSS code is placed separately from the HTML markup and connected to the page using a line

Where in href attribute must be specified path to css file ( A file that contains all our CSS styles, the file extension should be .css).

Thus, we can to each new page, add a connection string to this file. And all the styles that worked in the first HTML page will also be applied to subsequent ones.

Since we now have CSS in a separate file, the browser downloads it the first time it is accessed and in the future, if the file has not been changed, then it uses it further (the file ends up in the browser cache), therefore, the page will load much faster, and if At the same time, you use minimization of css and js files, then loading will happen many times faster.

We can also put CSS code in different files. For example, for text design, the fonts.css file, and for everything else, styles.css. And connect them together to the HTML page, because... you can connect several at once CSS file ov to one HTML page.

Using the @import directive

Besides direct connection to the page using a tag link, it is possible to connect styles inside a CSS file using a directive @import.

As mentioned above, you can inside one HTML file, connect several CSS files at once using the link line. But that's not all.

If necessary (if you have a large project with many CSS files), you can import all CSS files into one common CSS file and connect it to the document, and all other CSS will be imported into it.

For import CSS files string is used

@import url("style.css");

Where inside the brackets is the path to the imported css file.