Statically connecting CSS styles to an HTML page is a simple task. The prevailing traditions offer three main options: directly on the tag, in a special style tag, and through connecting an external css file. Using the server language allows you to add dynamics to these methods, but using the JavaScript browser language opens up completely different possibilities.
HTML tags and CSS styles
A web page is a formalized presentation of information. Each text or graphic element is displayed “as is” by default in the browser or can be described by CSS rules and displayed as the designer intended and implemented by the programmer.
Any CSS rule is a name and meaning. The development of cascading style sheets has led to multivariance in names and meanings. Pseudo-classes and pseudo-elements appeared. The use of CSS classes and identifiers has become closely intertwined with HTML tags. The task of connecting CSS to a specific tag has received a wide range of feasible solutions.
Basically, there are three options for connecting a CSS rule to the desired tag:
- directly through the style attribute of the tag;
- through a special tyle tag;
- through connecting an external stylesheet.
Any inaccuracy or error in the description and connection of the style will be ignored. HTML is a language of rigid constructions; introducing dynamics into it through a server language is permissible only within certain limits.
Using the AJAX mechanism expands the boundaries of the possible. But in any case, the solution to the problem of how to connect a CSS rule to an HTML tag is static: the rule is written down and it is indicated what it refers to.
Wireframe HTML Page Styles
The example shows how to connect an external stylesheet sci-index.css (1), and how to do it through a special style (2) tag: here the background color for the body page tag is changed. How to connect a CSS rule directly on a tag twice (through an identifier; through a style attribute) is described in (3). Here, the identifier scWelcomeLabel defines the style (set of rules) from the external stylesheet, and the style attribute specifies only one rule: top - the coordinate along the Y axis from the top edge of the block in which this tag is located.
Using the server-side language PHP (4) to create a form imposes another level of “rigidity” on the framework of styles.
In essence, the task of creating a web page is the procedure for accurately determining the sequence of tags that place content (information) in the right way thanks to CSS rules. If the page is formed by PHP code, then the rigid structure of tags and their relationships with CSS rules is “enhanced” by PHP code.
In fact, the task of connecting CSS to HTML when using PHP is a double level of rigidity. If the design changes and you need to change the CSS rule, you will need to make changes to the CSS / HTML codes and the PHP code.
Simple CSS rule dynamics
There is no problem finding any tag with the getElementById () function and assigning it a new style or changing a separate style rule. In the example below, the heading, content, and footer tags are found, then their coordinates are changed. This logic allows you to write a scfChange function and assign it to an event - resizing the browser window.
Result: the visitor can change the size of the browser window, and the site will automatically adjust the position of the header, content and footer for it.
The real dynamics of CSS styles
HTML is closely related to CSS, and there is no problem for it to create a special style tag in real time and use the new (changed) rules. There is no need to solve the problem of how to include a CSS file: the necessary content can be generated dynamically.
Here CSS style is formed and connected in dynamics. This can be done several times. First, a StyleText character string is created, in which the “verbatim” description of the desired set of CSS rules is placed.
The background-image rule here is indicated through the "text" of the desired picture: production costs - the picture is inside the style, but this does not require an external file for this picture.
After the description of the desired set of rules is formed as a string of characters, a style tag is created, its type text / css is indicated, and the contents of the style tag are filled with the necessary content. The task of connecting CSS along the way, in the process of working as a site visitor, has been solved!
Adding a new tag to the document body automatically makes all the styles described in it available. Connecting CSS in dynamics is simple, practical, and reliable.