Layout quickly separated from hypertext in a separate direction. But not only in the field of Internet programming, it became natural to distinguish an interface from a working program code. This is a consistent way of developing information technology.
Indeed, in designing any program, and for web resources this is doubly relevant, specialists who are completely far from programming are participating. It is unproductive for programmers to think about the appearance of buttons, menus, and visualizing a dialog with a user.
Everyone has their own sphere of competence, and today CSS is a powerful development direction, not inferior in importance to HTML itself.
Classic HTML / CSS Interaction Logic
A web page is a collection of elements that also includes styles and algorithms. By tradition, all files that belong to one page are merged into a common stream by their value when forming its DOM tree in the browser.
What applies to CSS is styles, but JavaScript is related to scripts. Insertions and HTML tag description files are the page itself. There are also many other formats and files that are sometimes required for a page to function properly.
Usually the task "how to connect a CSS file to an HTML page" is extremely simple.
In the head section, the link tag is used, which indicates that you need to connect an external .css file located in a certain place along the absolute or relative path on the site.
Connecting CSS to HTML is simple. In addition, external .css files are convenient to use for different pages of the same site, if you give them an identical design. This method also makes it possible to use the best practices for CSS rules and properties for other sites.
Depending on the hosting settings, CSS files may be cached, unlike styles embedded in the HTML page itself. This fact has already lost relevance, but in some cases it matters.
Styles within the page: static
Using the style element as the ability to insert .css constructions directly into an HTML page, you can achieve more and combine visualization, hypertext and code into a single whole. This is not very convenient when developing large sites, but for simple page options, you don’t have to wonder about how to connect CSS to HTML, but simply combine everything into one file.
Nothing prevents connecting the style directly to a specific page or element and to be absolutely sure that the style will never be "lost".
This is a “style-writing” option for a typical content management system.
This solution is how to connect the CSS style to the html element without changing the external file. The procedure is in demand. In this case, there is a cell in the table of prices for services, in general, it makes no sense to paint all the cells and create dozens of the same styles, in which only the coordinates of the cells differ.
A reasonable solution would be an algorithm that forms such a table, but with a small number of cells, it makes no sense.
Disadvantages of external styles and descriptions of HTML elements
An external .css file is convenient in conjunction with the refinement of details on a specific HTML element. This allows you to transfer the accumulated experience to other pages and sites.
In some cases, it is enough to change the style description without altering the algorithms and / or pages and the site will look different. In fact, the problem is not how to connect the CSS file to the HTML file, but that it is static no less than the descriptions on a specific element.
Almost any modernization of a web resource will require adequate changes in both files. Changes should always be compatible. Styles painted directly on elements are much more difficult to change than the rules contained in the .css file - this is a real problem for large sites (you can simply forget about the descriptions).
Almost all modern site management systems generate several .css files, some of which are created in an unreadable format. This indicates that the basic rules are formed in the form of a spectrum of classes and identifiers, which can be specified in small user .css files.
Dividing CSS-statics into two parts, almost always the constant styles and styles of the current web resource, you can simplify the work on the site and its subsequent modernization. But when designing a .css file, the question: “How to connect CSS to HTML?” Should be considered in the context of the convenience of subsequent changes and additions.
Styles inside the page: dynamic option
The browser language allows you to create styles of elements dynamically. During the execution of the script, it may be necessary to determine the style. The following example shows how to connect CSS to HTML in dynamics.
This example is relatively dynamic because it is designed as an extension for the browser in a situation where the solution should be represented by a single file. There are simply no options to connect any external files.
Here, all the styles are known, unchanged, but they need to be formed when the extension becomes active in the browser environment when loading completely different web content, another site.
However, this decision shows that the style is text, which means that it can be formed in the process of visiting the page as necessary and creating new elements, changing existing ones.
Optimal combination of HTML and CSS
There is no doubt that the visual presentation of information and the presentation of information + its processing algorithm are completely different niches.
But information visualization is absolutely not necessary to form statically. Currently, the equipment fleet on which the browser runs is so vast that it is very difficult to write a perfect solution both in terms of CSS and HTML. There is always a device that will knock down the picture.
If you reconsider the idea of combining HTML and CSS from the perspective of a visitor, that is, a consumer of a web resource’s functionality through its visual presentation, then just like visiting a page its functionality changes, you can change the style of its presentation.
The basic and fundamental CSS rules can be described statically and connected in the usual way, and dynamic elements can be described by algorithms for the formation of the desired style at a certain point in time.