RESULT:

Gray text color in all paragraphs of the web page

Gray text color in all paragraphs of the web page

External (linked) styles

External (related) styles are defined in a separate file with the extension css. External styles allow all pages of the site to look consistent.

To link to a file that describes styles, use the tag located in a container ... .

This tag must have two attributes set: rel="stylesheet" And href, defining the address of the styles file.

Example

Connecting styles

The rule for connecting global and external styles consists of selector And ad style.

The selector, located on the left side of the rule, determines the element(s) for which the rule is set. Next, in curly braces lists style declarations separated by semicolons. For example:

P ( text-indent: 30px; font-size: 14px; color: #666; )

Style declaration is a pair CSS property: CSS value.

For example: color: red

When connecting the style internally, the CSS rule, which is the attribute value style, consists of style declarations separated by semicolons. For example:

CSS selectors

Universal selector

A universal selector matches any element in an HTML document.

The asterisk symbol (*) is used to denote a universal selector.

It is used if you need to set the same style for all elements of a Web page. For example:

* ( margin: 0; padding: 0; )

In some cases, the asterisk (*) character may be omitted:
*.myclass And .myclass equivalents,
*#myid And #myid equivalent

Tag selectors

The selector can be any HTML tag for which styling rules are defined. For example:

H1 (color: red; text-align: center;)

If several elements have a common style, then the selectors corresponding to them can be listed in the style sheet, separated by commas. For example:

H1, h2, h3, h4 (color: red; text-align: center;)

ID selectors

HTML provides the ability to assign a unique identifier to any tag. The identifier is specified by the attribute id. For example:

The identifier value must begin with a Latin letter and can contain letters (,), numbers (), hyphens (-), and underscores (_).

All attribute values id in an html document must be unique. If they meet id with the same values, then these identifiers are ignored, and the Web page code becomes invalid.

In CSS code, an identifier selector is represented by a hash sign (#). Since the identifier id applies only to unique elements, the tag name before the hash sign (#) is usually omitted:

Div#a1 (color: green;)

similarly

#a1 (color: green;)

It is advisable to use id not for styling the element, but for accessing it through scripts or following a link.

Class selectors

Class selectors are most often used for styling. The class for a tag is specified by the attribute class. For example:

The class name must begin with a Latin letter and can contain letters (,), numbers (), hyphens (-), and underscores (_).

If attribute id is used for unique identification, then using the attribute class the tag is assigned to one group or another.

In CSS code, an identifier selector is represented by a dot (.). Different tags can be classified into the same class. In this case, the tag name before the period (.) is omitted:

I.green (color: #008000;) b.red (color: #f00;).blue (color: #00f;)

For a tag, you can specify several classes at the same time by listing them in the attribute class through a space. In this case, the styles of each of the specified classes are applied to the element.

If some of these classes contain the same style properties, but with different meanings, then the style values ​​of the class located below in the CSS code will be applied.

Attribute selectors

There are many attribute selectors that you can use to style a tag based on its attributes.

There must be no space between the tag name and the square bracket ([)!

The universal selector, tag, identifier, class, and attribute selectors, and pseudo-classes are all simple selectors.

Simple selectors can be chained into specific sequences based on the relationships of elements in the Web document tree. Such constructions are called combinators.

Context selectors

One of the most commonly used combiners is the context selector.

Context selectors or descendant selectors define multiple elements, one of which is contained within another. In a context selector, simple selectors are separated by a space.

Example

1. Pushkin A.S.
   • "Shot"
   • "Blizzard"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspector"
   • "Taras Bulba"
   • "Dead Souls"
3. Tolstoy L.N.
   • "War and Peace"
   • "Anna Karenina"
   • "Resurrection"

RESULT:

1. Pushkin A.S.
   • "Shot"
   • "Blizzard"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspector"
   • "Taras Bulba"
   • "Dead Souls"
3. Tolstoy L.N.
   • "War and Peace"
   • "Anna Karenina"
   • "Resurrection"

Child selectors

A child selector identifies an element that is inside another itself. In a child selector, simple selectors are separated by a greater than sign (>).

Example

1. Pushkin A.S.
   • "Shot"
   • "Blizzard"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspector"
   • "Taras Bulba"
   • "Dead Souls"
3. Tolstoy L.N.
   • "War and Peace"
   • "Anna Karenina"
   • "Resurrection"

RESULT:

1. Pushkin A.S.
   • "Shot"
   • "Blizzard"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspector"
   • "Taras Bulba"
   • "Dead Souls"
3. Tolstoy L.N.
   • "War and Peace"
   • "Anna Karenina"
   • "Resurrection"

Adjacent selectors

An adjacent selector specifies a plus sign (+) that separates two sequences of simple selectors. The elements represented by these sequences are contained within a single container and the second one immediately follows the first, not separated by any other tags.

Example

REFLEXOLOGY

RESULT:

REFLEXOLOGY

Adjacent selectors

An adjacent selector specifies a tilde (~) character that separates two sequences of simple selectors. The elements represented by these sequences are contained within the same container and the second one follows the first (not necessarily directly).

Example

REFLEXOLOGY

“All acts of conscious and unconscious life, according to their mode of origin, are reflexes.” THEM. Sechenov

Reflexology is the treatment of diseases through the control of reflexes. It is successfully used in complex treatment programs or as an individual technique.

RESULT:

REFLEXOLOGY

“All acts of conscious and unconscious life, according to their mode of origin, are reflexes.” THEM. Sechenov

Reflexology is the treatment of diseases through the control of reflexes. It is successfully used in complex treatment programs or as an individual technique.

A CSS style sheet, if we take the definition itself, is a language for describing the appearance of a document. That is, HTML is responsible for the structure of the page, and CSS style sheets are responsible for the entire design. I have compiled information here that will allow you to use the style sheet freely. I won’t write about how necessary it is to know it, because it’s already clear - without it you won’t be able to bring the site into a more or less normal form. If someone is just starting to learn CSS styles, then these materials will be enough to start learning CSS.

In order to gain structured knowledge and apply HTML+CSS+JS as effectively as possible for your projects and for customer projects, you need to regularly study and maintain your level.

But it's good to have a foundation. Many, learning on their own, miss many basic things and then clients suffer, and the person does not understand why they are dissatisfied.

To prevent such situations from arising, it is necessary to acquire basic skills in the correct sequence. If you are developing websites and want to grow further in this, then I recommend looking towards studying at online schools.

It doesn't take time away from your day job, but with the help of teachers you can ask questions to, you'll grow very quickly.

One of these online schools is Netology and I liked the course “ “, also, as an alternative from another Skillbox school, the educational course “ “. Be sure to study them carefully, and especially the teachers who teach this course.

1. Basic things

I'll start with the very basics. When I started this site, I wrote little tutorials on learning CSS style sheets. The lessons are well suited both for those who are just starting out and for those who already know something to refresh their knowledge. Everything is presented there in pictures and real examples.

A small digression: when I started studying the topic of website building, I learned almost everything HTML tags and they didn't inspire me much. But after I started studying the CSS style sheet and trying to apply each of the properties - I liked it so much (I wouldn't have created it if I didn't like it). I saw that you can do amazing things just with using CSS. This is not a programming language that takes months to learn. The style sheet can be mastered in one (maximum two) weeks.

Of course, you will not study absolutely all the properties and their meanings, and this is not necessary! You only need to know the basics so that you can start applying and using it in your projects. One important nuance is that you need to IMMEDIATELY apply the property that you just learned on a real example. Let it be your own website or a simple HTML website - there is no difference. The important thing is that you try to write it yourself and see the result.

I have a lot of examples on my site that use CSS. Together they contain more than 100 lessons! When you know at least the basics, then you can safely change and apply all the examples from the lessons.

My tutorials on the basics of cascading CSS styles

2. CSS and CSS3 cheat sheets

Well, you learned the basics and after a couple of days you forgot everything with “success” and, probably, you think that this is not your thing and everything is complicated. I want to cheer you up a little - I myself don’t know everyone CSS properties. But what’s stopping me from watching them on the Internet?

True, for now you will go to Yandex or Google, then you will type the request that you need. And if the search still doesn’t give you what you need. You can spend a lot of time this way and still not find what you were really looking for.

Fortunately, good people have compiled very useful cheat sheets that have helped me out more than once. It is enough to figure out where everything is and then finding the necessary properties is not difficult.

CSS and CSS3 cheat sheets

These are simply irreplaceable materials when laying out and developing a website design. The time it takes to get distracted and search the Internet for descriptions of properties is reduced many times over.

True, as you understand, the more you build websites or do design, the less you have to look at this tooltip, since all the necessary properties always remain in memory. But still, it will not be superfluous to have this set of cheat sheets on hand.

It's like at school: even if you don’t use a cheat sheet, your soul is still somehow calmer with it 😆 .

Addition to the lesson - HTML cheat sheets

In addition to CSS cheat sheets, there are also HTML cheat sheets. If you forgot any tags, you can always look them up in this HTML cheat sheet. The download link will appear after you click on one of the buttons social networks below this video.

Conclusion

If you are a beginner and just learning the basics of CSS, then my CSS tutorials are perfect for you. The material in them is presented briefly and you only need to repeat with your own hands what the lesson is about. And also more experienced webmasters will be able to refresh their knowledge by quickly viewing all the lessons. You can also download CSS and CSS3 cheat sheets, which will help you not to forget the basic properties and will always be at hand, in which case you can quickly look and remember the necessary information.

And of course, the main points of the article.

CSS- Cascading Style Sheets (cascading style sheets) are a tool that allows you to set various visual properties to HTML tags.

Official website of the developers: http://www.w3.org/TR/CSS21/cover.html.

CSS is made up of rules. Rules have a name and a meaning. They are separated by a colon (rule name: rule value). We do not put any quotation marks in the meanings of the rules! Example:

Color: red; background: #cccccc ;

But how do you link CSS to HTML? How to write document styles in html code? There are 3 solutions for this:

• Attachment(inline).
• Embedding.
• Linking.

The basis of the document is html, and css is already applied to it. Specifically for the document, css itself does not mean anything.

Nesting method (inline) CSS

The style attribute is used. It can be placed in any visually displayed element. CSS rules are written in style (rule name: rule value), several rules are separated by semicolons (; is the end of the rule in css):

Plain text

"color:red; background:#cccccc"> This paragraph has been styled using the inline method.

CSS embedding method

Used special element“style”, inside which the css rules are written. Inside style we write only the CSS language. Example:

In this example, we have written a rule for the “p” paragraph element. In the 2nd line we wrote a selector (to which tags the css rule will be applied). The rule itself is written in curly brackets “( )”.

The “style” element is placed only in the “head” element.

CSS linking method

In order not to write styling into the document each time (not to upload the document), you need to write CSS rules in one place and apply them to different documents (to an unlimited number).

To do this, we put all the css rules in a separate text file. This file is usually given the extension .css. And then you can immediately see that it contains style rules. You can't confuse it with anything.

How then can we link this separate css file to our html document? To do this, use the following code in the head section:

Those. specify the file with styles via a hyperlink to it. The browser loads the style file and applies the rules from it to the entire document. Essentially this works the same way as the “style” element, but is in a separate file. And we can put a link to a css file in any document. This is very convenient, because... I edit styles in one single file; Having downloaded the style sheet once, when you go to the next pages, the browser will no longer look for this css file, it will get it from the cache (a type of temporary storage of downloaded files). This way I save traffic and speed up page display.

Attention! The “link” element will not work with a single href attribute. Because this hyperlink is used for different purposes. This is a service hyperlink that may point to Various types files that can be used for different purposes for your pages. To let the browser know that this is a stylesheet, the rel attribute is used (rel=”stylesheet”). It specifies the type of relationship between the document being loaded and our main document. The browser now understands that the document being loaded is a style sheet.

CSS (Cascading Style Sheets), or cascading style sheets, are used to describe the appearance of a web document written in markup language. CSS sets style rules that change the appearance of elements placed on web pages, fine-tuning their details such as color, font, size, borders, background, and location in the document.

You can embed CSS code directly into a markup element as an attribute value style. This attribute is available for all HTML elements. Using CSS, you can specify a number of styling properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each declared property is separated by a semicolon (;).

This is what it looks like for an element

Ways to add CSS styles

The CSS standard offers three options for applying a style sheet to a web page:

• External style sheet - defining style sheet rules in a separate .css file, and then including this file in the HTML document using a tag
• Internal table styles - defining style sheet rules using a tag

  Example: Internal Style Sheet

  • Try it yourself "

  Heading

  Text first

  Text two

  Text three

  Heading

  Text first

  Text two

  Text three

  
  
  

  In this example, we set the background color for the element using CSS : background-color:palegreen, color and font type for headings

  : color:blue; font-family:verdana, as well as font size, color, and center text alignment for paragraphs

  : font-size:20px; color:red; text-align:center.

  Built-in style

  When you need to format a single element of an HTML page, the style description can be placed directly inside the opening tag using the already specialized style attribute. For example:

  Paragraph

  Such styles are called built-in (inline), or embedded. Rules defined directly within an element's opening tag override rules defined in the external CSS file, as well as rules defined within the element

  Heading

  Text first

  Text two

  Text three

  
  
  

  Tasks

  • Center text alignment

    Using the inline paragraph style, center the text.

  We already know that in order for the website to look beautiful and stylish, we need to work with the CSS file. And for our styles to be applied we need to combine HTML file and a CSS file.

  There are several options for performing this operation: using nested style sheets, external style sheets, and inline style.

  Today we will talk about the latter method.

  Injecting style into an HTML tag

  The essence this method is that we implement the necessary design inside the tag. A separate attribute - style. This attribute can be applied to any tag, but only within the body of the site, that is within body. The value of this attribute is the operators of those styles that need to be applied to a given element.

  For example, let's set different font sizes for two different paragraphs of text:

  < p style= "font-size:25px;" >Set this piece of text to a letter height of 25 pixels. < p style= "font-size:15px; color:#2400ff;"> And this text will have letters, 15 pixels high, and we will also tint it blue to demonstrate the use of several styles at the same time.

  Flaws

  The example perfectly demonstrates how such styling clogs the page code.

  You can also note a couple more disadvantages of using this stylization technique. The first of them is the spread of style throughout the document, which in the future of editing will complicate the process significantly.

  It will also be difficult to format large amounts of text. I think no one is happy with the prospect of specifying a font size for each paragraph, especially if there are 40 such paragraphs.

  Even when using built-in styles, it becomes impossible to use pseudo-classes, which largely ties the hands of the web designer.

  It is also worth noting the confusion that is sure to emerge in the use of the style attribute. This confusion will arise due to the use of different quotes when entering styles.

  For clarity, let's look at the example below:

  < div style= "font-family: "Roboto Condensed", sans-serif"> The entry is correct. < div style= "font-family: "Roboto Condensed", sans-serif"> That's also correct. < div style= "font-family: " Roboto Condensed ", sans-serif" >This is not a correct entry. < div style= "font-family: " Roboto Condensed ", sans-serif" >And this is also not true

  Looking at the calculations provided above, the logical conclusion suggests itself that the use of built-in styles is associated with a number of significant complications and inconveniences.

  When to Use Inline Style

  Despite all the shortcomings, the built-in style was not invented in vain. Webmasters often turn to them in case of programmatic style assignment. For example, let's look at this code

  < div id= "productRate" > < div style= "width: 40%" >

  Recording the required width for this block will be a simple operation.

  A similar situation may arise if it is necessary to replace the background image (for example) of a user with the administrator role. In this case, the img tag may not be suitable. Therefore, it is worth referring to the style attribute:

  < div style= "background:url(fon.jpg)" >

  Also, programmers often turn to built-in styles when creating pop-up windows. Often this process goes like this: the block whose design is being worked on is assigned display:block, and the remaining windows are hidden using display:none so that they do not visually interfere with the programmer’s work. Here's an example:

  < div class = "element" style= "display:block" >Pop-up window that is currently being designed

  Bottom line

  Using built-in styles is associated with a number of difficulties and inconveniences, however, in the process of designing certain elements, webmasters often turn to this method to optimize their work.