CSS is an abbreviation for words – Cascading Style Sheets, which in English means Cascading Style Sheets. These tables are a special program code with which web programmers can design their HTML-pages as they want, namely: change the colors of various elements, starting from borders and ending with text, setting their own fonts, positioning elements, loading background pictures for blocks or lists and much, much more.
CSS instructions can be written, as well as JavaScript code in plain text files in a regular notepad, but it’s better to use some special editor that will highlight the various style elements. The convenience of such a separate record is that then you can load the created style files in any HTML or PHP document.
So what is the main sense of CSS and what was the division for separate styles, separate content? The most important task of CSS is to customize the appearance in accordance with the requirements of the user while leaving the basic layout of the site untouched, that is, to separate the logic and structure of the web page itself (which is set with different markup languages) from the actual description of the appearance of this page (all this is done using CSS)
That is, HTML or PHP files themselves should not contain markup elements with styles inside them, but only, if necessary, attributes of type class or id. And all appearance of elements of a marking and its contents should be defined directly in cascading style sheets.
The use of CSS allows not only to improve the availability of HTML documents for different types of devices: the screen of a monitor or mobile device, the output of a document for printing, output to a device that allows reading blind (Braille), and even voice reading, but also reduces the complexity and multiple uses of one and the same styles in different places of the document!
HOW TO CONNECT CASCADING STYLE SHEETS?
Such files are usually connected with the following construction:
<head > ..... <link rel = "stylesheet" href = "base.css" type = "text / css" / > </ head >
Where the <link> tag is necessarily located between the <head> and </ head> tags, and the <link> tag itself has the required parameter “href”, which points to the location of the style file base.css
But there is also such a method of connection as:
<head > ..... <style type = "text / css" media = "all" > @import url (base.css); </ style > </ head >
Here, the stylesheet is loaded with the @import directive, which is located between the <style> tags and contains the required URL parameter, which specifies the path to the style file itself
Also, CSS constructs can be written directly in the HTML file, by enclosing styles in the <style> tags … </ style>
<head > ..... <style type = "text / css" > html { color : # ff000 ; } </ style > </ head >
But it’s better not to do this, but upload it as a separate file, because when you first load a site or a document – the style file is cached by the browser, and in the future, it will not be loaded, which saves time when loading pages.
WHY CASCADING STYLE SHEETS?
We already know that there are several ways to connect or set styles. All these methods have different priorities
- Inline-styles are the same styles that were commonly used before and added to different elements using the “style” attribute directly in the layout of the document. Such styles have the highest priority when the page is generated by the browser; these styles will be applied almost always, even if there is a conflict of properties with the external styles specified for the current element, except for the! Important – this will be in one of the following articles on CSS;
- Embedded styles are styles that are listed in the <style> tag, directly in the document header. These styles will have a lower priority than the previous method of connection, and in case of conflict with inline-styles, will not be applied;
- Imported styles are styles from the externally loaded .css file, which are connected to the HTML document using the @import directive. This kind of connection is even less priority than the previous ones and the styles will be applied only if there are no similar constructions in two other ways (built-in and embedded);
- Related styles are the most common styles that are attached to the HTML file as a <link> tag. This method has the lowest possible priority, and the styles will be applied to the last place after the browser does not find similar rules in the remaining ways of connection
Therefore, knowing exactly how and in what order the browser analyzes all existing ways of connecting styles, you can set one global stylesheet for all HTML pages and flexibly manage various elements of the site or document. It is with this CSS feature that the word “cascading” is associated in the CSS abbreviation (cascading style sheets) – several tables with styles that are attached to the HTML file in various ways and processed by the browser in the order of their hierarchy and priority.
