What is css code and where is it. CSS - what is it. To action: Create a document

The abbreviation CSS stands for Cascading Style Sheets. If you believe (and in such matters they should be believed), CSS is a mechanism for adding style to a web document. Styles are the rules that define appearance, document design - managing fonts, colors on the page, arrangement of elements.

Let's figure out what kind of tables these are, what are they for, and why are they suddenly “cascading”?

Why do you need to separate content from design?

The classic principle of “divide and conquer” has been known since the times of Ancient Rome. He repeatedly allowed figures of different eras to achieve success in military-political games. He will help us too.

HTML was originally used to structure text (here is a heading, here is a paragraph, and this is a list). The display of specific elements was determined by their attributes and was largely left to the browser's discretion. Since I still wanted to control the appearance, design tags began to appear, such as or . As a result, the contents of the document and its design are closely intertwined. The code has become cumbersome, inflexible, and difficult to read. For example, like this:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

---

Obvious disadvantages:

• a lot of unnecessary structures not directly related to content markup - large size file, traffic and loading time increases;
• It is difficult to change the design. For example, if you need to change the color, you will have to search for all attributes;
• significant limitations on formatting options. Many tags simply cannot be configured properly using attributes alone;
• there is no possibility to adjust the design to suit various types display devices (PC monitor, printer, PDA screen, voice browser etc.);
• the code loses its logical markup (semantics), and as a result:
  • poorly indexed search robots, because they have to process a bunch of “garbage”;
  • Accessibility for users using non-visual browsers is significantly reduced.

Separating all the rules for registration into a separate block (file) allows us to solve these problems. The code becomes simpler and much easier to work with. HTML itself becomes what it was intended to be - a language for semantic document markup:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Pros of using CSS:

• The code is divided into content and design. We get easier and more understandable code;
• the design file is downloaded only once and cached - reducing traffic, download time and server load;
• simplicity itself CSS language+ the principle of separating design from content - reducing the time for developing and maintaining the site;
• One CSS controls the rendering of multiple HTML pages. Design changes are made faster;
• CSS provides additional features formatting that you couldn’t even dream of when using only attributes;
• implemented a mechanism for connecting different CSS for different types display devices;
• increased compatibility with different platforms through the use of web standards.

Cascading Style Sheets

So, CSS is a generally recognized international standard. CSS is a powerful tool, one of the main components of almost any web page, without which it is impossible to imagine modern web development.

Style sheets can be either internal (within HTML file) and external ones. External tables are the most convenient and are files with the css extension. These issues will be discussed in more detail in one of the following articles.

A style sheet consists of a set of rules that determine how a particular element will be displayed, i.e. what styles will be applied to it.

Example CSS snippet:

There can be many rules, each consisting of two parts (one can imagine that they are columns): what we apply styles to (selector) and what styles we actually apply (definition block). Therefore, the entire structure was called “table”. So "style sheet". But why suddenly “cascade”?

Cascading inheritance

The fact is that CSS uses inheritance from parent to child, which allows you to define styles based on those already described earlier for parents. In this case, a situation arises when properties from several rules are suitable for an element at the same time. The CSS standard defines the priority order in which style rules are applied, making the results predictable. This model is called a “cascade”.

Bottom line

CSS is a powerful technology that allows you to describe rules HTML design document, separate them from the content. One of the key requirements that the modern labor market puts forward for a layout designer is a thorough knowledge of CSS. However, CSS is quite easy to learn. In order to help with this, ours exists.

Greetings, dear friends! In this lesson you will learn what it is CSS, what it is needed for and how to use it correctly. This basic lesson from the series "For the little ones", in which I will try to explain the most in clear language basics of document styling using CSS - Cascading Style Sheets ( C ascading S style S heets).

Cool

Stammer

Part 1: CSS Basics

This lesson is a logical continuation of the lesson "HTML Basics for Beginners", in which I explained in detail what the HTML markup language is, how it works and works, basic tags and layout rules. In this lesson we will touch on the styling of a document created using a markup language, i.e. giving a certain shape, a certain color, sequence, sizes of various elements and text on the page, consider the most effective techniques for working with cascading style sheets. Once you understand the basics, you can style HTML documents correctly and effectively on your own.

Please note that in this tutorial we will only consider CSS in the context of use with HTML documents in a web browser. WITH using CSS You can also style other documents using different markup languages. For example, style the XML as Android applications, SVG or various Desktop Environments on Unix-like operating systems.

In general, CSS is a fairly elementary formal language that was invented to describe the appearance of documents. This suggests that it is quite simple and consists of original primitive structures that are not so difficult to study. The most difficult thing is not the syntax, not the rules for writing constructs, but the huge number of CSS properties to remember that perform various tasks. Fortunately, all the rules are in English with the corresponding semantic load. A simple translation into our language gives an idea of ​​what this rule does and vice versa - when translating what we want to achieve with a certain property into English language, there is a high probability that we will get the correct property. This makes it much easier to remember CSS rules intuitively. For example, if you need to set background color it is enough to translate into English, as a result of which we get background-color(individual words in CSS are written with a hyphen).

1.1 Using CSS in HTML documents

CSS is quite easy to use in HTML documents. It can be:

As I said earlier, CSS has a fairly simple syntax. Let's break it down.

The ad rules are so simple that they can be described in one sentence. First it is written selector which selects a specific element on the page, after curly braces are written properties with values after the colon, and the properties themselves are separated from each other semicolon. This is all.

Simple, isn't it?

The most difficult thing about a CSS declaration is the selector. You can learn more about how selectors are formed and how they are used in the lesson All CSS selectors in one lesson - this is a very important topic, since all the magic of selecting elements on a page is revealed here. I recommend watching this lesson without fail for all beginners.

Briefly CSS selector- (from the word select- select) is a construction with which each ad block begins and which serves to select an element or elements of the same type on the page for further styling. Most often, a certain one is used as a selector Class tag, for example:

//HTML:

//CSS: .my-class ( background-color: #999; )

Here the selector is the class my-class of the div tag, which receives the necessary design in the CSS file. In this case, the background color is gray. Accordingly, if there are several tags on the page (not just div) with the class my-class, all these elements will receive the same design - a gray background of color #999.

1.3 Cascading, inheritance and priority

The principle of cascading is not difficult to understand. Let's look at an example:

//HTML

//CSS .parent .children ( color: #666; ) .parent ( padding: 10px; color: #999; )

From the example we see that a cascade is written in CSS, in which the class .parent comes first, after which the child class is indicated separated by a space .children, which is responsible for styling only the child element. The child tag must be nested within a tag with a class .parent. If in an HTML document we add the tag .children from div tag with class .parent, it will lose its design, since the cascade will no longer work, the structure is broken.

What do we get as a result of our example? The tag with the class .children will receive text color #666, since it has a longer cascade, and .parent will be colored with color #999. The parent class will have 10px padding, while the child class will not have this padding, since the padding property does not apply to child elements. However, if we remove color: #666; at the selector .parent .children, then its text will be colored in the color of the parent color: #999;

Cascading and inheritance allow you to style specific elements on a page and prioritize which styles are applied. Let's look at the hierarchy of priorities.

1. Properties that have a construction at the end of their declaration have the highest priority !important. It doesn’t matter what kind of nesting the selector has, how styles are used - inline or by connecting an external file, they will have the highest priority. I highly recommend not using !important when styling, since in the process of support or even in the development process in the future, confusion will certainly arise, which can only be saved by refactoring styles. As practice shows, There's always a way not to use!important.
   Example of using!important: .my-class ( background-color: #999!important; )
2. The next most important priority is given to inline styles, written in the tag itself through the attribute style which we looked at earlier:
3. Styles specified in the style tag in the document itself have lower priority;
4. Styles connected to the document as an external CSS file via a tag have even lower priority.
5. The lowest priority, besides standard browser styles, is the styles of parent selectors before child ones, for example:
   //HTML

   Far, far beyond the word mountains.

   //CSS .my-class ( margin: 10px; ) will have lower priority for the child p than: .my-class p ( margin: 15px; ) The resulting tag

   Located in a tag with a class.my-class will receive the value of the margin property: 15px.

It's also worth noting that the number of classes or identifiers, as well as the presence of additional pseudo-classes and constructs in the selector, increases the priority for styling:

My-class.class-2 ( margin: 10px; ) will take precedence over: .my-class ( margin: 15px; )

Etc. along a logical chain.

And finally, regarding priorities, it is important to note that styles that appear in subsequent declarations further down the document also have the highest priority. For example:

My-class ( margin: 10px; ) will have lower priority than the exact same selector coming after it: .my-class ( margin: 15px; )

As a result, the last selector in the document flow will receive the property value margin: 15px, since it has the highest priority. However, if the selector of the first declaration were longer, its property values ​​would undoubtedly prevail.

As for inheritance, everything is simple. All child elements inherit some properties of the parent. You will have to find out which properties are inherited in the process of studying various properties and applying them in practice. For example, text color is always inherited by children, but padding is not.

Part 2. CSS Properties

I think there is no point in listing all CSS properties, since there are a lot of them and it is more practical to refer to the directory of all CSS properties. I recommend studying CSS properties in the HTMLBook reference.

However, let's look at the 10 most used CSS properties in layout. I took 10 large CSS files from my projects and sorted the properties by frequency of use.

CSS Property	Frequency of use	Description
color	960 times	Element text color:
background-color	755 times	Element background color:
font-size	524 times	Font size:
opacity	435 times	Element transparency level:
padding	372 times	Margin size inside element:
width	356 times	Width of a block element, not including borders and margins:
margin	311 times	Element margins:
height	305 times	Height of a block element, not including borders and margins:
font-weight	280 times	Font weight:
text-align	245 times	Horizontal text alignment:

Part 3: Media Queries

Media Queries in CSS is the basis for creating responsive layout, allowing you to style elements depending on the size of the screen or device on which the website is displayed. Technically Media query- it's simple logical expression, which can be either true or false. The conditions for such an expression are either the parameters of the device on which the web page is displayed or the screen size in pixels.

In this guide, we will look at the basic capabilities of media queries, which are necessary for adaptive website layout and are practically useful.

The media query is written in the style file itself or in the body of the document (style tag) and begins with a rule declaration @media. The structure of a media query is quite simple:

The condition can be either a device - all (all devices), screen, print, tv, etc., or media functions that set the device parameters or the screen resolution on which the document is displayed.

The most commonly used media functions determine the maximum and minimum screen resolution of the device:

Here are devices with a maximum screen resolution of 480px or a minimum resolution of 320px will display the tag text with the class.my-class grayed out. I gave this condition as an example; it is practically useless. Most often you need to specify either only maximum resolution, or only the minimum within which the property will apply.

Among other things, as we see from the example, functions can contain conditions and, not (NOT) And only (For older browsers that do not support media queries). No logical operator or (OR), its role is played by a comma. Media functions, as we see, are enclosed in regular parentheses.

Placing properties in a media query does not give any precedence, so it makes more sense to place media queries in end of CSS document, or upload with the tag link external CSS file with media queries after loading the main site styles to correctly override the latter at different resolutions or on different devices.

1. Try to use only external included CSS files. Use internal styling only if it is necessary for the correct functioning of the website;
2. Try to stylize only classes. Do not style identifiers (set using id="hash" and written using #hash). Try to stylize tags without classes less. For example, if you style an h3 tag, and later the SEO specialist decides that the title is not appropriate, a regular div should have the same properties with the title class and be displayed the same way. Alternatively, you can make duplicate HTML tags into classes, for example, .h1, .h2, .h3, .footer, .header, .aside and style them accordingly;
3. Try to style elements as independently as possible, reduce the cascade chain to one block so that there are fewer dependencies on parent elements. This is necessary for the most efficient reuse of blocks on the page and their modification in other places in the layout. But without fanaticism. You should not assign separate classes to each tag in a block unless it is intended to be used independently. If you move the block to another location on the page, it should still appear and be independent of its parent. Using some kind of class naming methodology will help you with this. It doesn’t matter whether it’s a BEM, methodology, or developed based on your personal experience or simple rules, proposed by me - this is better than naming classes at random and building illogical and long chains of classes;
4. Try to name tag classes based on what function the block performs, and not on what content it will contain. For example, if you have a section with reviews in the form of a carousel, you should not name the selectors using the words reviews, otzivy etc. It's better to call carousel-once, if you plan to display one carousel item per page. In the future, perhaps you will use this carousel not only to display reviews, but will use this code, for example, to display a list of company colleagues. In this case, the class name reviews will be somewhat inappropriate;
5. Use CSS preprocessors, there is nothing complicated about it. My choice fell on the Sass preprocessor for quite some time and I recommend it for use. We have a good tutorial in which I tell you how easy it is to use the preprocessor and how it simplifies your life: ;
6. Use browser default style reset or normalization, which brings standard styles to a common denominator across all browsers. I use it in my projects Normalize.css, which is part of the Bootstrap CSS framework;
7. When you feel that you are doing too much repetitive work during the layout process, switch to using some CSS framework or develop your own with the most frequently used elements, this will speed up your work. I only use at work Bootstrap grid without stylistic design of buttons, panels and other elements. This is quite enough for effective work. Good adaptability Bootstrap grids the default is also pleasing;
8. Experiment with the properties yourself. Open the CSS reference book and try it out. This is the only way to gain experience, remember which property does what, and bring the writing of document styles to automaticity.

Hello, dear readers of the blog site. Today I want to start talking in detail about CSS (materials will be accumulated in the corresponding section).

It's time to move on to it after studying HTML. The style markup language is responsible for the external design of website pages, and without understanding it it will be very difficult to correct, move or align something.

Of course, Css looks much more complex compared to Html, but this is when it comes to the issue of cross-browser layout, but when it comes to correcting some small detail in the design of your own website, then you don’t need much intelligence. In general, we will try to analyze its basics in detail, and the nuances of their filigree use will be left for optional study (optional). But all webmasters need to know the basic concepts.

What is 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 tags of this language. Those. Using HTML we create the structure of our documents (web pages). For example, in pure HTML we can specify other elements of the document structure, and even give them the appearance we need in the browser.

But time dictated the need to use more and more visual design attributes in HTML, which heavily cluttered the source code. In this regard, another, more promising development option was proposed - creation of 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 the help of . What if you want to color several paragraphs in your text at once in the desired color?

Then inside each of them (paragraph tag P is block-level, which means it cannot be placed inside an inline Font element) insert Font tags with the desired color value in the Color attribute.

All this will terribly clutter the source code, which is very, very undesirable, because the loading speed of the site will suffer, and an excessive load will be created on the Internet communication equipment. The developers could not do this.

Therefore, they came up with the following way out of the current situation. Developers from W3C decided to design all visual representations of a web document in the form of a special style markup language, which they called cascading style sheets or simply CSS (read as CSS). What is the essence of technology?

And the point is this: by connecting a style markup language to any documents (pages), we will be able to set a visual representation of all those elements (created by Html tags) that will appear in this document.

There is a resource on the Internet that helps you very clearly see how a web page can change its appearance just because another cascading style sheet file is connected to 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 following 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 connecting another stylesheet (another stylesheet file).

Please note that the source HTML code remains exactly the same, and only changes CSS styling . Amazing, isn't it?!

CSS is not a markup language in the same sense as, for example, Html. This is a stylistic markup language - it has its own syntax, its own internal content, and in many ways it will be very different from what has already been studied previously.

In addition, compared to HTML, the style markup language is much more complex. There are a lot of nuances in it that you will need to know in addition to basic concepts. There were no special nuances in HTML - you studied all the elements and you can easily 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 supposed language can be split into two parts:

1. Rules that tell the browser what an element should look like on the screen.
2. Selectors are labels that allow the browser to understand which elements of HTML code will need to apply these rules.

Now let's see how the design specified in the styles is connected to the source code of the web page. There are three main ways using CSS with HTML:

1. Attachment - CSS code is written directly into the desired element tag using the Style attribute
2. Embedding - all the style code for a web document is written in its header (inside the Head tags) using the Style element
3. Linking - all CSS code is placed (extracted) 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 style markup language. Now is the time to talk about it syntax. In general, it is quite simple:

One rule in CSS code consists of two elements - a property (in our example it is ) and its value (in our example it is red and #CCCCCC). A prerequisite is separating a property from its value with a colon.

Next. One rule is necessarily separated from another semicolon. After the last rule, you can no longer use a semicolon, but to avoid excesses, it is best to make it a rule to always use it. they have no meaning in the CSS code and you can set them at your own 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 are general outline were described just above.

The first method is called the method CSS embeddings in Html using the Style attribute:

Let's see how you can use this method to set the color and background of a paragraph:

What is the nesting method

As you can see, in one easy move we colored the paragraph text red (color:red) and at the same time placed a gray background underneath it (background:#cccccc). Style refers to those six that can be used in conjunction with absolutely any tags (they are listed at the bottom of the screenshot):

In Css we will also actively use universal ones, but this will be discussed in subsequent articles, but for now we have considered the possibility of using Style to connect style design rules to certain elements HTML code. It allows you to use a set of these same rules (in unlimited quantities) as your value.

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 with the help of it you can very easily try and experiment with something, and only then transfer all these rules to a separate file with CSS style sheets.

The next way to connect a style markup language is called the method embedding CSS in Html. This method is fundamentally different from the previously discussed investment method.

Instead of including in each tag on the page the Style attribute containing the rules of the style language, we will now write all the CSS rules we need for this web document inside one single tag Style, 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 don't remember, look it up in this block diagram:

Those. in code it might look like this:

... ...

Not entirely clear? Well, now I'll try to illustrate it:

To prevent the browser from mistaking style rules for hypertext markup language, a required attribute will need to be specified in the Style element Type with value ”text/css”(media content header for cascading style sheets). That. The code contained within this element will be interpreted by the browser as CSS.

Let's look further at the example given just above. As you can see, the style rules enclosed in curly braces, and in front of them is written the so-called selector in the form of the Latin letter “P”. Why is this selector needed?

How else can we indicate to the browser that these CSS rules will need to be applied only to paragraph tags (P selector) of a given web document and to nothing else.

Here we again touched upon the issue of syntax. When using the embedding and nesting methods, all markup language rules must be enclosed in curly braces and preceded by be sure to stand or several selectors:

CSS Selector (Property: Value; Property: Value)

When using the nesting method, we did not use a selector and curly braces, because it was already clear to the browser that these CSS rules needed to be applied precisely to the tag within which the Style attribute was written.

When using the embedding or nesting method, the situation with determining who these style rules are addressed to became more complicated and the use of curly braces and selectors was required. That. we indicate to the browser that you should kindly apply this set of CSS rules (enclosed in curly braces) to all paragraphs, and this set - 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 should be applied, enclosed in curly braces that open immediately after the selector name. In our example, the paragraph tag name “P” is used as the selector. We will talk in more detail about selectors in style markup language in the next article (see link above).

Let's summarize 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 if using the embedding method described just above.

Exporting CSS style sheets to a separate file using Link

The last way to integrate style code into a web document is called bonding method. The easiest way to illustrate this method is:

Its main difference from the methods discussed above (nesting and embedding) is that when using the linking method, all the rules of the CSS language are transferred to a separate external file. It will again be text (like any Html document) and it is usually assigned .css extensions so that it can be opened on the local computer under Windows control could be appointed special program ().

When using an external CSS file used special Link tag, which is written again between the opening and closing Head elements in the header of the web page. Link is classified as invisible in the browser.

In this case, the browser will find specified file stylesheet (preceded by it is indicated in the Href attribute of the Link tag), will 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 can significantly speed up the loading of site pages and reduce the load on Internet communication equipment.

When using the Style element (embedded method), each time the browser will have to load, along with the HTML code of the document, the CSS rules and selectors embedded in 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’s hard drive) when designing other pages of 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 Rel attribute with Stylesheet value. The fact is that Link (service hyperlink) can be used for completely different purposes.

If you look at the source code of this page in a browser, you will see that in the Head area there is a whole scattering of different Link tags:

And the purpose of each of these service hyperlinks is determined by the value of the Rel attribute. For example, rel="shortcut icon" is used to indicate the path to the file, and rel="alternate" can be used to indicate alternative version pages (an example of an alternative representation of an Html document would be).

Well, in the case of using the rel="stylesheet" attribute in Link, we set 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 the sites the binding method is almost always used CSS and Html (external style sheet file). Attributes and Style tags are usually used only for testing, although there may be specific tasks when their use is justified (for example, when designing ). But in real work on websites they use external files, i.e. binding method.

With this, let me take my leave and swear to promise you that a continuation will follow in the very near future. I repeat once again that learning CSS is usually much more difficult than learning HTML, so I will try to be as detailed and clear as possible.

Good luck to you! See you soon on the pages of the blog site

You might 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 type HTML display elements on a web page
What is CSS for, how to connect cascading style sheets to HTML document and the basic syntax of this language
Background in CSS (color, position, image, repeat, attachment) - everything for setting the background color or background image HTML 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 when block layout
Dimension units (pixels, Em and Ex) and inheritance rules in CSS Different styling for internal and external links via CSS
Selectors of pseudo-classes and pseudo-elements in CSS (hover, first-child, first-line and others), relationships between Html code tags
Float and clear in CSS - block layout tools

CSS stands for “cascading style sheets” (from the English. Cascading Style Sheets). CSS is a set of parameters that are used to display a particular element on a web page. These parameters can be specified as in separate file, and be written directly in the HTML code of the page. For example, on our web page there may be the following elements: article title, paragraphs, quotes, footnotes, pictures, videos, links. You can set a specific display style - size, color, frame thickness, etc.

When working with a website, it is recommended to use a separate file with styles, rather than embedding code with style settings in individual pages. This will significantly reduce time - when you know the location of the style sheet, you can always quickly find a specific style and edit it. The style file has the extension .css, its name is usually style.css.

Connecting the CSS file

For CSS connections there are several ways to file. We will talk about two methods that are most often used when creating websites:

1. Linking. This method is used when you need to set styles for all pages of a site in one file. This method often used when creating a website. To connect the style sheet use the command , which must be placed in the body of the tag .

The first two properties indicate to the browser that the site uses CSS, then the address of the stylesheet file is indicated.

2. Embedding in document tags. With this method, the style for a specific page element is set directly in the HTML code. For example:

Here we have specified styles for the containers accordingly