CSS (Cascading Style Sheets) is a style sheet language that allows styling (such as fonts and color) to be attached to structured documents (such as HTML documents and XML applications). Typically, CSS styles are used to create and change the style of web page elements and user interfaces written in HTML and XHTML, but can also be applied to any kind of XML document, including XML, SVG, and XUL. By separating the presentation style of documents from the content of documents, CSS makes it easy to create web pages and maintain sites.
CSS supports media-specific style sheets so authors can tailor the presentation of their documents to visual browsers, hearing aids, printers, braille devices, handheld devices, etc.
Cascading style sheets describe how elements are formatted using properties and the valid values for those properties. For each element, you can use a limited set of properties, other properties will not have any effect on it.
The style declaration has two parts: selector and ads. In HTML, element names are case insensitive, so "h1" works the same way as "H1". The declaration consists of two parts: the name of the property (for example, color) and the value of the property (grey). The selector tells the browser which element to format, and the declaration block (the code in curly braces) lists formatting commands - properties and their values.
Rice. 1. Ad Structure Although the above example only attempts to affect a couple of properties required to render an HTML document, it qualifies as a style sheet on its own. When combined with other style sheets (one fundamental feature of CSS is that style sheets are combined), the rule will determine the final presentation of the document.
Types of cascading style sheets and their specifics
1. Kinds of style sheets
1.1. External style sheet
External style sheet represents text file with the .css extension, which contains a set of CSS styles for elements. The file is created in the code editor, just like an HTML page. The file can contain only styles, no HTML markup. An external style sheet is attached to a web page using a tag located inside the section
. These styles work for all pages of the site.You can attach multiple style sheets to each web page by adding multiple tags in sequence , specifying the purpose of this style sheet in the media tag attribute. rel="stylesheet" indicates the type of link (link to stylesheet).
The type="text/css" attribute is not required by the HTML5 standard, so it can be omitted. If the attribute is missing, it defaults to type="text/css" .
1.2. Internal styles
Internal styles embedded in section
HTML document and are defined inside the tag. Internal styles take precedence over external styles, but override inline styles (specified via the style attribute)....
1.3. Inline Styles
When we write inline styles, we write the CSS code to the HTML file, directly inside the element tag using the style attribute:
Pay attention to this text.
Such styles affect only the element for which they are set.
1.4. @import rule
@import rule allows you to load external style sheets. For the @import directive to work, it must be placed in the style sheet (external or internal) before all other rules:
The @import rule is also used to include web fonts:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Types of selectors
Selectors represent the structure of a web page. They are used to create rules for formatting web page elements. Selectors can be elements, their classes and identifiers, as well as pseudo-classes and pseudo-elements.
2.1. Universal selector
Matches any HTML element. For example, * (margin: 0;) will nullify margins for all site elements. A selector can also be used in combination with a pseudo-class or pseudo-element: *:after (CSS styles) , *:checked (CSS styles) .
2.2. Element selector
Element selectors allow you to format all elements of this type on all pages of the site. For example, h1 (font-family: Lobster, cursive;) will set the general formatting style for all h1 headings.
2.3. class selector
Class selectors allow you to style one or more elements with the same class name placed in different places pages or on different pages of the site. For example, to create a heading with the headline class, add the class attribute with the value headline to the opening tag
and set the style for the specified class. Styles created with a class can be applied to other elements, not necessarily of that type.
.headline ( text-transform: uppercase; color: lightblue; )
If an element has multiple class attributes, their values are concatenated with spaces.
Instructions for using a personal computer
2.4. ID selector
ID selector allows formatting one specific element. The id value must be unique, it can occur only once on one page, and it must contain at least one character. The value must not contain spaces.
There are no other restrictions on what form an id can take, in particular, identifiers can only be digits, start with a digit, start with an underscore, only punctuation, etc.
An element's unique identifier can be used for a variety of purposes, including as a way to refer to specific parts of a document using fragment identifiers, as a way to target an element in scripting, and as a way to style a specific element from CSS.
#sidebar ( width: 300px; float: left; )
2.5. Descendant selector
Descendant selectors apply styles to elements located inside a container element. For example, ul li (text-transform: uppercase;) will select all li elements that are children of all ul elements.
If you want to format the children of a particular element, you need to give that element a style class:
p.first a (color: green;) - given style will be applied to all links, descendants of the paragraph with the class first ;
p .first a (color: green;) - if you add a space, then links located inside any .first class tag that is a child of the element will be styled
First a (color: green;) - this style will be applied to any link located inside another element, denoted by the .first class.
2.6. Child selector
A child element is a direct child of its containing element. One element can have several child elements, and each element can have only one parent element. The child selector allows styles to be applied only if the child element comes immediately after the parent element and there are no other elements in between, i.e. the child element is not nested in anything else.
For example, p > strong will select all strong elements that are children of the p element.
2.7. Sister selector
Sibling relationships occur between elements that have a common parent. Sibling element selectors allow you to select elements from a group of sibling elements.
h1 + p - selects all first paragraphs immediately following any tag
without affecting the rest of the paragraphs;
h1 ~ p will select all paragraphs that are siblings of any h1 heading and immediately after it.
2.8. Attribute selector
Attribute selectors select elements based on the attribute name or attribute value:
[attribute] - all elements containing the specified attribute, - all elements for which the alt attribute is set;
selector[attribute] - elements of this type that contain the specified attribute, img - only pictures for which the alt attribute is set;
selector[attribute="value"] — elements of this type that contain the specified attribute with a specific value, img — all pictures whose names contain the word flower ;
selector[attribute~="value"] - elements partially containing the given value, for example, if an element has several classes separated by a space, p - paragraphs whose class name contains feature ;
selector[attribute|="value"] - elements whose list of attribute values begins with the specified word, p - paragraphs whose class name feature or begins with feature ;
selector[attribute^="value"] - elements whose attribute value starts with the specified value, a - all links starting with http:// ;
selector[attribute$="value"] - elements whose attribute value ends with the specified value, img - all images in png format;
selector[attribute*="value"] - elements whose attribute value contains the specified word anywhere, a - all links whose name contains book .
2.9. Pseudo-class selector
Pseudo-classes are classes not actually attached to HTML tags. They allow you to apply CSS rules to elements when an event occurs or obeys a certain rule. Pseudo-classes characterize elements with the following properties:
:hover - any element that is hovered over with the mouse cursor;
:focus - an interactive element that was navigated to with the keyboard or activated with the mouse;
:active - the element that was activated by the user;
:valid - form fields whose content has been validated in the browser for compliance with the specified data type;
:invalid - form fields whose content does not match the specified data type;
:enabled - all active form fields;
:disabled - disabled form fields, i.e., in an inactive state;
:in-range - form fields whose values are in the specified range;
:out-of-range - form fields whose values are not included in the set range;
:lang() - elements with text in the specified language;
:not(selector) - elements that do not contain the specified selector - class, identifier, name or form field type - :not() ;
:target is the # element that is referenced in the document;
:checked - selected (user-selected) form elements.
2.10. Structural Pseudo-Class Selector
Structural pseudo-classes select child elements according to the parameter specified in parentheses:
:nth-child(odd) - odd child elements;
:nth-child(even) - even child elements;
:nth-child(3n) - every third element among children;
:nth-child(3n+2) - selects every third element, starting from the second child element (+2) ;
:nth-child(n+2) - selects all elements, starting from the second;
:nth-child(3) - selects the third child element;
:nth-last-child() - in the list of child elements, selects the element with the specified location, similar to :nth-child() , but starting from the last one, in the opposite direction;
:first-child - allows you to style only the very first child element of the tag;
:last-child - allows you to format the last child element of the tag;
:only-child - selects an element that is the only child;
:empty - selects elements that have no children;
:root - selects the element that is the root of the document - the html element.
2.11. Structural type pseudo-class selector
Point to a specific type of child tag:
:nth-of-type() - selects elements by analogy with :nth-child() , while taking into account only the type of the element;
:first-of-type - selects the first child of the given type;
:last-of-type - selects the last element of the given type;
:nth-last-of-type() - selects an element of the given type in the list of elements according to the specified location, starting from the end;
:only-of-type - selects the only element of the specified type among the children of the parent element.
2.12. Pseudo element selector
Pseudo-elements are used to add content that is generated using the content property:
:first-letter - selects the first letter of each paragraph, applies only to block elements;
:first-line - selects the first line of the element's text, applies only to block elements;
:before - inserts generated content before the element;
:after - Adds generated content after the element.
3. Combination of selectors
For a more precise selection of elements for formatting, you can use combinations of selectors:
img:nth-of-type(even) - will select all even images whose alternative text contains the word css .
4. Grouping selectors
The same style can be applied to multiple elements at the same time. To do this, on the left side of the declaration, list the necessary selectors separated by commas:
H1, h2, p, span ( color: tomato; background: white; )
5. Inheritance and cascade
Inheritance and cascading are two fundamental concepts in CSS that are closely related. Inheritance means that elements inherit properties from their parent (the element that contains them). The cascade shows up in how different kinds of style sheets are applied to a document, and how conflicting rules override each other.
5.1. Inheritance
Inheritance is the mechanism by which certain properties are passed from an ancestor to its descendants. The CSS specification provides for the inheritance of properties related to the text content of a page, such as color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space , and word- spacing. In many cases, this is convenient because you don't have to set the font size and font family for every element on the web page.
Block formatting properties are not inherited. These are background , border , display , float and clear , height and width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align and z-index .
Forced inheritance
Via keyword inherit can force an element to inherit any property value of its parent element. This works even for properties that are not inherited by default.
How CSS styles are set and work
1) Styles can be inherited from the parent element (inherited properties or using the inherit value);
2) Styles in the stylesheet below override styles in the stylesheet above;
3) Styles from different sources can be applied to one element. You can check which styles are being applied in the browser's developer mode. To do this, right-click on the element and select View Code (or something similar). The right column will list all the properties that are set for this element or inherited from the parent element, as well as the style files in which they are specified, and the serial number of the line of code.
Rice. 2. Developer mode in Google browser Chrome 4) When defining a style, you can use any combination of selectors - an element selector, an element pseudo-class, a class, or an element identifier.
div (border: 1px solid #eee;) #wrap (width: 500px;) .box (float: left;) .clear (clear: both;)
5.2. Cascade
Cascading is a mechanism that controls the end result in a situation where different CSS rules are applied to the same element. There are three criteria that determine the order in which properties are applied - the !important rule, the specificity, and the order in which the style sheets are included.
Rule!important
The weight of a rule can be specified using the !important keyword, which is added immediately after the property value, for example, span (font-weight: bold!important;) . The rule must be placed at the end of the declaration before the closing bracket, without a space. Such a declaration will take precedence over all other rules. This rule allows you to cancel the value of a property and set a new one for an element from a group of elements in the case when there is no direct access to the style file.
Specificity
For each rule, the browser calculates selector specificity, and if the element has conflicting property declarations, the rule with the highest specificity is taken into account. The specificity value has four parts: 0, 0, 0, 0 . Selector specificity is defined as follows:
0, 1, 0, 0 is added for id;
for class 0, 0, 1, 0 is added;
0, 0, 0, 1 is added for each element and pseudo-element;
for an inline style added directly to an element, 1, 0, 0, 0 ;
the universal selector has no specificity.
H1 (color: lightblue;) /*specificity 0, 0, 0, 1*/ em (color: silver;) /*specificity 0, 0, 0, 1*/ h1 em (color: gold;) /*specificity: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: blue;) /*specificity: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (color: grey;) /*specificity 0, 0, 1, 0 */ #sidebar (color: orange;) /*specificity 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specificity: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
As a result, those rules, the specificity of which is greater, will be applied to the element. For example, if an element has two specificities with values 0, 0, 0, 2 and 0, 1, 0, 1 , then the second rule will win.
Order of connected tables
You can create multiple external style sheets and link them to the same web page. If different tables contain different values of the properties of one element, then as a result, the rule will be applied to the element, which is in the style sheet in the list below.
As you remember, HTML is a markup language, but its creators wanted to improve the life of site builders so much that they added elements and parameters to it that are responsible for the appearance of the page: tags
,
,
,
But at some point, the page code became so cumbersome and unreadable that it became clear that this path leads "to nowhere". Then it was decided to separate the page markup (HTML) and its visual design (CSS). Together, HTML and CSS can do wonders, and you will soon see this.
What is CSS
CSS (Cascading Style Sheets) - cascading style sheets.Style- a set of parameters that defines the external representation of the object. For example, let's say we want all first-level headings (tags
) on one page would be red, size 24, and italic, and on the other page would be blue, size 12. Our title is the object, and the color, size, and style are the options. It's just that the parameters of our object are different for different pages, i.e. they differ in style.
Each element on the page can have its own style (paragraphs, headings, lines, text...). The style set of all elements is called style sheet.
If multiple styles are specified for the same element (as in the example with headings), then the cascading, which determines the priority of one or another style.
Benefits of CSS
- CSS allows you to significantly reduce the size of the code and make it readable.
- CSS allows you to set options that cannot be set with HTML alone. For example, remove the underline from links.
- CSS makes it easy to change the look of pages. Imagine you have made a website of 50 pages, on which all the headings are blue. After a while, you wanted to change blue color to green. You will have to go through all 50 pages and change the color in the corresponding attribute. With CSS, you only have to do this once, in the style sheet.
- The so-called block layout of the site is associated with CSS.
Or if you are familiar with HTML and have learned the necessary knowledge from other sources, then it is time to take up the study of CSS.
CSS (Cascading Style Sheets)- Cascading style sheets are a set of style descriptions of various HTML tags (hereinafter referred to as HTML elements), which can be applied both to a separate tag - element, and simultaneously to all identical elements on all pages of the site. CSS is essentially a kind of addition to HTML, which greatly expands its capabilities.
So what? You ask .. Why do I need this notorious CSS? I did pretty well with HTML in its purest form!
I will give a number of arguments in favor of CSS usage:
HTML in its pure form has a very limited set of tools that does not allow you to solve certain design and functional ideas of the webmaster. Well, at least, for example, take the sore point of all novice web artisans "How to remove the underlining of a link?" or "How can I make it change color and highlight when hovering over this very link with the cursor?" There is no way to do this with just HTML!! And how many more such "sick questions"? - darkness .. This is where CSS comes to the rescue, which solves most of the problems related to website design.
Suppose you wrote a site with 100 pages in it.. a good site, informative, people go to it.. And suddenly for some reason you needed to change its design, I don’t know, the fashion has changed, you found a better one design decision, the customer did not like it .. but you never know why .. How much time and effort will it take you to completely redo all 100 pages of the site? CSS offers a reasonable solution to this problem. But what if one time in a separate file completely describe the entire design of the site? Let's say: all headers
make paragraphs red
write in italics, links
don't underline :) fill the background on all pages with green, etc. ... and then just make these 100 pages of HTML refer to the CSS file and draw the necessary information from it? Now, when you want to, for example, recolor all headings from red to green, you do not need to open all 100 pages to find tags in them
and indicate in each that you are now not red but green! You just need to open the description file and change the color of the element in it
green and everything! All headings on all pages of the site will turn green as if by magic.
Due to the fact that CSS allows you to put repetitive style descriptions of the same elements into one file, there is a significant "unloading" of HTML documents, and this saves volume, traffic, time, money .. HTML code becomes light, easy to read and edit.
Well, how? Intrigued? If yes, then I recommend moving on to the direct study of CSS. In the chapters of this tutorial, you will learn how to implement cascading style sheets on the pages of your site, get acquainted with the basic style properties of elements using the example of creating a site using CSS, delve into the subtleties and tricks of the matter. If you are already familiar with cascading style sheets and you are only interested in reference information, then I suggest you take a look at the CSS reference, where CSS properties and their possible values \u200b\u200bare collected and briefly described.
Hello. It's time to write something on the topic. From the title it is clear what this post is about, but I would like to be a little clear.
I will not make a textbook on the basics of languages from my blog, I will not talk about what a class, selector, quotes and dots are. So much material has already been chewed on the Web that it simply makes no sense for me to repeat it. I don’t want to keep my blog on the path of rewriting articles of other sites in my own words (as most of the “bloggers” do).
But I will be happy to share interesting tricks, tricks and, in general, useful tricks that I use in my work!
Get to the point
I take definitions from Wikipedia:
HTML(from the English HyperText Markup Language - “hypertext markup language”;) - the standard markup language for documents in world wide web. Most web pages are created using HTML (or XHTML). The HTML language is interpreted by browsers and rendered as a document in a human-readable form.
css(English Cascading Style Sheets - cascading style sheets) - a formal description language appearance a document written using a markup language. It is mainly used as a means of describing the appearance of web pages written using the HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
It seems to be so clear what is html and css but I'll say it anyway.
HTML is a kind of building material for web pages. By reading special tags (commands, words that have a special meaning for the browser), the browser builds a page with content text, pictures, and so on in its window.
CSS is the cladding material that makes all the beauty.
Roughly speaking, HTML is what should be on the site, and CSS is responsible for how it should look. It is thanks to CSS that we see various effects, animations and other goodies on sites.
A bit of my history
What I will write now is already on the page, but I will write again and add it anyway :)
I created my first website in 2008. It works on the Ucoz system. I don't remember exactly how, but one of my classmates told me about Ucoz and how easy it is to make a website there. I became interested. I don’t know why, but it was kind of “fun” to make your site. That's when I learned about HTML. But it was I who learned, but did not learn :) It seems that it was the 9th grade of the school. Applying basic knowledge Photoshop and Ucoz, I was still able to make a website.
Rock site. On the main news feed and a cozy forum) I'm ashamed to show it now, but I think in the future I'll have the courage.
The second mention of tags in my life was in my first year in computer science. Yes, there were many absurd tasks on this subject and it would be better if we studied AutoCAD instead of MS Access (city planners, after all), but I am still grateful for the task to make a website from a couple of HTML pages. At first I really spat on this, but I liked it when I sat down to do it.
I took the lecture notes and began to write the structure of the page according to the tags that I copied from the board, but ... I realized that I couldn’t do anything that I came up with and started reading more about html on the Internet (I didn’t even know about css then). As a result, my work was the best in the group, but alas, almost no one appreciated this, since they gave grades for the presence of work, but if there was a rating for the work ...
Well, okay, I was still pleased with myself. Before me was the task of placing the elements on the page the way I want, and not the way it turned out according to the lecture notes. The problem is that there is no functionality in HTML that allows you to place an element 20 pixels from the right edge of the browser window. And then I thought ... what if I put the necessary element in a table, which I put in a cell of the main table, the edge of which is not visible, but which occupies the entire page and setting the sizes of the cells, I can place that element with an indent of 20px from the right edge ??… I tried it - it worked!
The fact that this was a common practice before the advent of CSS, I only learned when I began to seriously engage in web technologies. No, not that I praise myself, but it was cool - to move the convolutions and get to the point that people use in their work.
What is needed for this?
In October 2011, I began to seriously study the whole thing, which smoothly flowed into the main activity of my life. I wanted to make websites. I knew it needed HTML. Then I came across mentions of CSS. I decided to understand a bit more about what it is and ... it was very tight! Those sites that I came across seemed to give basic knowledge, but there was no moment that would bring a complete teapot from ignorance to basic points. And then I accidentally stumbled upon free videos lessons from Evgeny Popov. At first, I was confused by the need to enter my email and name in order to get a free video course. Well, damn it, they will spam me, or even hack my mail, I don’t want to! But I decided anyway.)
But ... nothing came to my mailbox (there should have been a link to download free HTML and CSS courses). That's why I went to ex.ua and downloaded them there :) Thinking heroically, I thought that I don't need a course on HTML, I seem to know it a little, but I'll take a look at CSS. I looked at the first lesson - I realized that I need to watch and learn HTML first.
What can I say guys...it's better than all the tutorial sites put together. Everywhere the author writes as simply as possible, as he sees it, but still this is not enough for a teapot. It’s just that the author can’t even think that “it” can not be known. And E.Popov not only explains how for the little and stupid, but also shows his every step and this is exactly what you need if you want to learn HTML / CSS!
There is no benefit to me from the fact that I offer you this course, but Evgeny most likely will. And I'm not sorry. Thanks to him, it was easier for me to plunge into web development.
But there is one small "But". In his CSS course, he didn't say a word about CSS3, the basis of all modern effects. But believe me, knowing and understanding what CSS is, it will be very easy to find information about CSS3 on the Internet. Well, various techniques (as I said above) I will describe in my blog.
After studying those courses, I created my first real website (in terms of personal hosting, etc.). Yes, I had no idea about PHP and MySQL and WordPress, etc…
BUT that's a completely different story...
There are many useful sites with lessons on the Internet, but when you need a really good solution to your question, it's best to look at habrahabr.ru.
In the beginning, I often used cheat sheets: one and two.
Perhaps I will add some useful links here, or I will release the second part of this article, so I recommend subscribing to the news in the form below.
Hello, dear readers of the blog site. Today I want to start talking about CSS in detail (materials will be accumulated in the corresponding one).
It's time to move on to it after learning Html. The style markup language is responsible for the external design of the site pages and without understanding it, it will be very difficult to correct, move or align something.
Of course, Css looks much more complicated than Html, but this is when it comes to cross-browser layout, but when it comes to fixing some little thing in the design of your own site, then you don’t need much mind. In general, we will try to analyze its basics in detail, and the nuances of their filigree use will remain for optional study (optional). But all webmasters need to know the basic concepts.
What is the CSS language and what is it for?
The abbreviation CSS stands for Cascading Style Sheets or, in Russian translation, as Cascading Style Sheets. What is it and why was this language invented at one time?
So, based on what we studied a little earlier, we can say that the markup of a web document is carried out using the tags of this language. Those. With the help of HTML, we create the structure of our documents (web pages). For example, in pure Html, we can set other elements of the document structure, and even give them the look we need in the browser.
But time dictated the need to use more and more visual design attributes in HTML, which greatly littered source. In this regard, another, more promising development option was proposed - creating a separate style markup language CSS. And this option had a number of advantages over simply increasing the number of design attributes.
Why? Do you remember how you can set the color of a text fragment in pure Html? That's right, with . And if you want to color in the desired color several paragraphs in your text at once?
Then, inside each of them (the P paragraph tag is a block tag, which means it cannot be placed inside an inline Font element), insert Font tags with desired value colors in the Color attribute.
All this will terribly clutter up the source code, which is very, very undesirable, because the site loading speed will suffer, and an unnecessary load will be created on the Internet communication equipment. The developers could not “go” for this.
Therefore, they came up with the following way out of this situation. The W3C developers decided to style all visual representations of a web document in a special style markup language called Cascading Style Sheets, or simply CSS (pronounced CES). What is the essence of technology?
And the bottom line is this - by connecting the style markup language to any documents (pages), we can set the visual representation of all those elements ( generated Html tags) that will appear in this document.
There is a resource on the Internet that helps to see very clearly how a web page can change its appearance just because another cascading style sheet file is included in it. In my opinion, this would be the best answer to the question: what is CSS and why is it needed.
You can see the basic view of the document (web page) by clicking on this link:
Nothing special, but if you click on the "View All Designs" link from the left menu, you can see dozens or even hundreds of design options for the same web page by including a different style design (another style sheet file).
Please note that the original Html code remains exactly the same, and only CSS styling changes. Striking, isn't it?!
CSS is not a markup language in the same sense as, for example, Html. This is a style markup language - it has its own syntax, its own internal content, and in many ways it will be very different from the previously studied one.
Also, compared to Html, the style markup language is much more complex. It has a lot of nuances that you will need to know besides the basic concepts. There were no special nuances in HTML - you studied all the elements and you can safely work with the code. It seems to me that CSS can be compared to chess - it’s not enough to know how all the pieces move, you also need to be able to play.
So, what is it and what does it consist of? This alleged language can devide into two parts:
- Rules that tell the browser how an element should look on the screen.
- Selectors are labels that allow the browser to understand exactly which elements of the HTML code it will need to apply these rules to.
Now let's take a look at how the styling defined in the styles is connected to the source code of the web page. There are three main ways using css with html:
- Nesting - CSS code is written directly in the desired element tag using the Style attribute
- Embedding - all style code for a web document is written in its header (inside the Head tags) using the Style element
- Linking - all CSS code is placed (rendered) in a separate external file, which is connected to the document using the Link element in its header
Well, you see how we have already learned a lot about the style markup language. Now is the time to talk about it syntax. In general, it is quite simple:
One rule in the CSS code consists of two elements - a property (in our example it is ) and its value (in our example it is red and #CCCCCC). The prerequisite is separating a property from its value with a colon.
Further. One rule is separated from another without fail semicolon. After the last rule, it will be possible to no longer put a semicolon, but in order to avoid excesses, it is best to make it a rule to always put it. in the CSS code they have no meaning and you can set them at your discretion.
Using Style to Connect Css to Html Code
Well, now let's look at examples of all those ways of applying style rules to our document that exist and which were described in general terms just above.
The first method is called the method css embedding in html using the Style attribute:
Let's see how we can use this method to set the color and background of a paragraph:
What is nesting method
As you can see, in one easy move, we've colored the text of the paragraph red (color:red) and at the same time put a gray background underneath it (background:#cccccc). Style is one of those six that can be used with absolutely any tag (they are listed at the bottom of the screenshot):
In Css, we will also actively use universal ones, but we will talk about this in subsequent articles, but for now we have considered the possibility of using Style to connect styling rules to certain elements html code. It allows you to use as its value a set of these same rules (in an unlimited number).
The nesting method using the Style attribute is very simple to implement in practice, but nevertheless it is in real layout used very rarely. But on the other hand, with the help of it, you can very simply try something and experiment, and only then transfer all these rules to separate file with CSS style sheets.
The next way to connect the style markup language is called the method embedding css in html. This method is fundamentally different from the previously considered nesting method.
Instead of including the Style attribute containing the rules of the style language in every tag on the page, we will now write all the CSS rules we need for this web document inside one single Style tag, which in turn will be placed in the header of this document (between the Head elements).
Do you remember what Head is and where it is written in the structure of a web document? If you do not remember, then look at this flowchart:
Those. in code it could look like this:
... ...
Not quite clear? Well, now I will try to illustrate it:
In order for the browser not to accept style rules as hypertext markup language, the required attribute will need to be written in the Style element Type with value ”text/css”(media content header for cascading style sheets). That. the code enclosed within this element will be interpreted by the browser as CSS.
Let's take a look at the example above. As you can see, the style rules enclosed in braces , and the so-called selector in the form of the Latin letter “P” is written in front of them. Why is this selector needed?
How else can we tell the browser that these CSS rules will need to be applied only to paragraph tags (selector P) of this web document and nothing else.
Here we again touched on the issue of syntax. When using the embedding and nesting methods, all style markup language rules must be enclosed in curly braces and preceded by be sure to stand or multiple selectors:
CSS Selector (Property: Value; Property: Value)
When using the nesting method, we did not use the selector and curly braces, because it was already clear to the browser that these CSS rules should be applied exactly to the tag, inside which the Style attribute is registered.
When using the embedding or nesting method, the situation with determining who these style rules are addressed to became more complicated and required the use of curly braces and selectors. That. we indicate to the browser that this set of CSS rules (enclosed in curly braces) you kindly apply to all paragraphs, and this set is for something else.
In the simplest case, you can use the name of a tag as a selector, to which the rules of the CSS language must be applied, enclosed in curly braces that open immediately after the name of the selector. In our example, the name of the paragraph tag "P" is used as the selector. We will talk in more detail about selectors in the style markup language in the next article (see the link above).
To sum up for the method of embedding CSS code in an Html document - all the style rules needed for this document will be described in one single Style tag, and not in many different elements, as would be the case with using the nesting method described just above.
Moving CSS stylesheets to a separate file using Link
The final way to integrate style code into a web document is called binding method. The easiest way to illustrate this method is:
Its main difference from the methods discussed just above (nestings and embeddings) is that when using the linking method, all the rules of the CSS language placed in a separate external file. It will again be text (like any Html document) and it is usually given .css extensions so that it can be opened on a local computer under Windows control could be assigned special program ().
When using an external CSS file, special Link tag, which is written again between the opening and closing Head elements in the header of the web page. Link belongs to the category not visible in the browser.
The browser in this case will find the specified style sheet file (before it is specified in the Href attribute of the Link tag), load it and apply the CSS language rules specified in it for the external design of the current Html document.
In general, linking is very similar to the use of the Style tag described a little earlier, but it allows you to significantly speed up the loading of site pages and reduce the load on Internet communication equipment.
When using the Style element (embedding method), the browser will each time have to load, along with the HTML code of the document, the CSS rules and selectors wired into it, and in the case of using an external style sheet file, the browser only needs to load Style.css once and only then take it from your own cache (an area on the user's computer hard drive) when designing other pages on your site.
The type=”text/css” attribute of the Link tag means that this media content will be nothing more than a style markup language. But also when linking a CSS file and an Html document, it is used the Rel attribute with the Stylesheet value. The matter is that Link (a service hyperlink) can be used for absolutely different purposes.
If you look at the source code for this page in a browser, you'll see that the Head area has a bunch of different Link tags:
And the purpose of each of these service hyperlinks is determined by the value Rel attribute. For example, rel="shortcut icon" is used to indicate the path to a file, and rel="alternate" can be used to indicate an alternative version of a page (an example of an alternative representation of an Html document would be ).
Well, in the case of using the rel="stylesheet" attribute in the Link, we ask the browser path to stylesheet file(in the Href attribute, this path can be specified in absolute or relative form). Those. using the Rel attribute, we tell the browser what the file will look like, the path to which is specified in the Href (stylesheet - with CSS).
On sites the bind method is almost always used CSS and Html (external style sheet file). Style attributes and tags are usually used only for testing, although there may be such specific tasks when their use is justified (for example, when decorating). But in real work on sites, it is external files that are used, i.e. linking method.
For this I will allow myself to take my leave and swear to promise you that the continuation will follow in the very near future. Once again, learning CSS is usually much more difficult than learning HTML, so I will try to be as detailed and descriptive as possible.
Good luck to you! See you soon on the blog pages site
You may be interested
List style (type, image, position) - Css rules for customizing the appearance of lists in Html code 
Display (block, none, inline) in CSS - set the display type Html elements on the web page 
What is CSS for, how to connect cascading style sheets to html document and basic syntax of this language 
Background in CSS (color, position, image, repeat, attachment) - all for setting background or background color html pictures elements 
Priorities in Css and their increase due to Important, combination and grouping of selectors, user and author styles 
Height, width and overflow - CSS rules for describing the content area in block layout 
Size Units (Pixels, Em and Ex) and Rule Inheritance in CSS Different styling for internal and external links via CSS 
Pseudo-class and pseudo-element selectors in CSS (hover, first-child, first-line and others), relationships between Html tags code 
Float and clear in CSS - block layout tools
