The simplicity of the CSS concept allows you to connect style rules from an external file, from a page tag, through a style attribute on a tag, or through JavaScript code. There is nothing complicated in the preparation and use of CSS rules, but for its proper use it is necessary to understand its place, the logic of work and the place in the design of the web page.
HTML document elements and flow
How the web page was created doesn’t matter. The main thing is that it is received from the server by the visitor’s browser. The browser builds the page object tree (DOM) based on the HTML and CSS syntax. Using the JavaScript language, you can fill the page elements with functionality.
The ideal option is that the browser receives the headers and body of the page, starts communication with the server using AJAX technology, and the desired content is filled in as required in the current session, and changes depending on the actions of the visitor.
The classic version - the browser receives HTML, CSS, JS files and works as prescribed by them. The order of the HTML tags matters, but CSS rules can change their actual position in the browser window. The correct combination of the writing order of HTML tags and CSS rules allows you to display information correctly and provide the required functionality of the page.
In all cases, simple rules apply:
- there is a data stream that is recognized as prescribed by the appropriate syntax (HTML, CSS, JS);
- the number of spaces does not matter, one space is important;
- line feeds, tabs, and other similar characters do not matter;
- Comments cannot be nested.
The syntax of a CSS rule hosted in tag style takes precedence. Styles specified in the style tag and connected from an external file are equivalent. Tags cannot affect styles. JavaScript code can read / write tag styles, create new tags and styles.
To increase readability, lowercase and uppercase letters can be combined. The CSS rule syntax is case-sensitive, but it doesn't matter when applied.
CSS Design Example
The basic requirements for the styles are the same: the name of the object to which the rule belongs, and the list of rules in curly brackets.
An object can be a tag name (body, p, h1, div, img ...), an identifier, or a class name. The name line of an object can contain several names, and a pseudo-element or pseudo-class can be attached to each of them.
List of rules - a sequence of lines through the symbol ";". Each rule contains a name - a CSS syntax element and (through the ":" symbol) a string of values. In most rules, a string of values is one value, but as you can see from this example, many values can be specified.
Working version of the file
CSS syntax does not set whether or not to align rules. How to write - in one line or in several - a matter of taste of the developer. You can make several rules in a row for one tag, or you can put all the rules in one container "{" ... "}".
This "mess" is characteristic of modern site management systems (CMS), which make up sets of unchangeable (standard for them) styles into one unreadable file, which is faster to read and understand by the browser.
All styles that CMS considers relevant to the developer are recorded in a classic style that can be easily viewed and changed.
Perfect CSS syntax
An ideal system is one that does not exist, and its function is performed. It's common to use CSS files: they are easy to attach to an HTML document and can be quickly changed. HTML and CSS syntax highlighting is provided by all modern code editors.
For example, PhpStorm makes working with a variety of formats ideal. First of all, it is very convenient to work in. But most importantly, it checks the combination of HTML file code with CSS descriptions. Everything is highlighted and interconnected. This product also tests files for professional suitability, and with regard to CSS syntax and classes - this is a great version of the tool.
Rules for simple descriptions of complex systems - this applies to CSS. Over the past five years, HTML and CSS have "mutually beneficial" evolved and achieved "perfection." But this perfection is ghostly, tough and continues to require the work of a qualified developer (usually a team) to create a professional web resource.
This example creates a style sheet description string. As usual, CSS syntax is used, with one exception: instead of links to images, the content of the image is inserted. These are the costs of this style formation method. This problem is being solved, a completely different one - the style is formed on the fly.
First, a description is created - a string of characters. Then the StyleLL element is created as a style tag, then the type of this tag is indicated and the contents are inserted into it. Finally, a new object is implanted into the document body, which immediately starts working.
HTML and CSS on the fly
A rare area of application and not every web resource should be displayed immediately in full. It’s just customary to immediately write the whole page, style and compose event handlers. The site on the modern CMS there are no other options.
The development of a handmade site provides significantly greater freedom of action, but carries with it a lot of manual labor. CMS has ready-made sets of templates and styles. Not much needs to be done to develop a new site.
An example of creating a style on the fly is not the CSS file syntax in its usual meaning, but the result is absolutely equivalent. The data stream that the browser receives from the server can be built differently. In the classic version, a set of HTML, CSS and JS files is created. If you do not create it, but develop the logic of flow formation on the fly:
- Create a set of HTML tags as needed
- creating a set of CSS styles for each created tag;
- providing a mechanism for exchanging information on AJAX technology.
In this embodiment, when the site is first loaded into the browser, a small amount of data will fly away, which initiates the process of forming the page and the styles it needs. Depending on the visitor’s actions, the data stream from the server will change its content, but not in the context of the transfer of pages or tags, but in the sense that it is exactly where and how to create it.
Transition from rigidity to mobility
In the normal case, everything is static or relatively dynamic. When forming on the fly, when creating tags, styles appear, and the creation logic is programmed.
In the usual version, the page on the server is programmed, the JS code of the handlers in the browser is developed, a well-structured structure of interrelated rules is created. If you need to change something, the process repeats.
When programming the process of creating a page on the fly, not HTML + CSS is created, but the process of their formation. The process of creating something is the ability to envision situations and perform branching depending on the situation.
Programming the process of creating the page and its serving files makes the site more dynamic and mobile, more developed.