Good day to all. Alexey Gulynin is in touch. In this first article on CSS, I would like to talk about CSS in general, and how . CSS is Cascading Style Sheets(or simply can be called styles), which are responsible for how to display elements on your html page. If you simply add elements to an HTML page without attributes, then they will all be placed from top to bottom and will be aligned to the left side of the browser. It's boring and monotonous.

HTML elements are the framework of our page, i.e. html is responsible for WHAT to display on the page. CSS, in turn, answers HOW to display all these elements. You can create the same HTML page and come up with thousands of design options for it. And all this will look like different sites. You can surf the Internet and see how many beautiful sites there are on its expanses.

On this moment, you should have realized that if you want to create Beautiful design, then without knowledge of CSS, you will not be able to do this. Therefore, go ahead to comprehend this science called CSS.

Let's connect the CSS style file to the html page. This is done in the document header, between the tags .. :

Let's figure out what we wrote here. Style files are connected using the link tag. The href attribute, already familiar to us, points to the path to the style file. Here you can specify both absolute and relative paths. IN in this case it is assumed that our style.css file is located in the same directory as the file in which we include styles. The type="type/css" attribute indicates that the document type is css, the rel="stylesheet" attribute tells the browser that we are including styles (rel from English "relationship" - relationships).

You can also style elements in other ways. Let's create an html page with the following content:

First paragraph

First paragraph

First paragraph

First paragraph

In addition to creating a style file, we can write styles in the document head using the tag

First paragraph

Second paragraph

Third paragraph

Fourth paragraph

Styles can also be set directly in the element using the style attribute (this is the so-called inline style). Let's make the second paragraph green and right aligned. To do this you need to add the following construction:

Second paragraph

Now we see that the paragraph has turned green and is aligned to the right.

There is another way to add styles to an HTML page. This imported styles. They are set in the page header, but from a file, not directly:

When adding styles to a page, you may encounter conflict situations. For example, in a style file we can set the text color of all paragraphs (p tag) to red, and apply an inline style to one of them. How can the browser tell which color to use? Let's define the priorities that are used by the browser:

1) Styles from file (have the lowest priority)
2) Imported styles
3) Embedded styles
4) inline styles (have the highest priority, i.e. the browser will execute them first).

In this article you learned how you can connect CSS to html page and how you can apply these styles.

Alexey Gulynin was in touch, leave your comments, see you in the next articles.

Create css file just as easy as html. Just go to any text editor, for example Notepad, and there create a file with css extension. Let's give it a standard name - style.css.

Congratulations! Your file is ready. It is empty for now, but later it can be filled with relevant content. Below we will look at the basics - ways to connect css.

External style sheets

Perhaps external CSS- this is the most correct and optimal solution for site. It is enough to indicate on the page just link tag(created to include other files) with a link to the style sheet and styles are connected!

Attention

On line with tag link It is assumed that style.css is located in the same directory (folder) as this file.

The line with the link tag assumes that style.css is in the same directory (folder) as our file (for example, index.html). If the location of the css file has changed, then the href attribute must be modified accordingly. For example, it often happens that CSS is used to create separate folder(which is convenient and logical). But then the href attribute will look different:

Internal style sheets

Sometimes you can see another css construct that is inserted directly into html tag

Text of blue color, size 14 pixels

The advantage is that you can immediately set styles in the same file. A significant disadvantage is that the specified properties will only be assigned specific element, in this case a paragraph. So all the benefits remote connection properties are lost.

Built-in style sheets

There is an easier way CSS inserts. If you don't want to create a separate CSS file, but only need to use a couple of properties, then this option is suitable. Let's start right away with an example

First level header

Second level header, blue

Third level heading

From the example you can see that we wrote the styles right before the closing head tag inside the opening and closing tags style. Actually tag style can also be written in body, but if you want your posts to look structured, and so that the person who sees this code after you doesn’t grab his head, then it’s better to write styles in one place.

The disadvantage of the built-in style sheet is also obvious - such entries will have to be made for each page separately.

Good day to all.

So, in one of the previous articles we got acquainted with.

But we haven't looked at one very much important question. Namely - how to bind CSS styles to HTML code pages of our website.

This question is actually very important. After all if we bind css styles incorrectly to the pages of our site, then we will not be able to use these styles. The browser will simply ignore them and we will not see the result that the use of certain styles gives.

You can bind CSS styles to page code different ways and today we will try to consider them all.

Let's start.

By the nature of connecting CSS cascading style sheets to HTML document they distinguish external and internal style sheets.

1. Internal CSS style sheets.

Internal style sheets are located right inside our web page. Yes, yes... Right inside the HTML code of each individual page.

This is, of course, a little inconvenient, but still such a possibility exists and I cannot help but say about it.

So, the first way to link CSS styles to the page code is to use the tag, apply to the entire content of the HTML document. There can be as many of them as you like, even all styles for the entire site. But this is a little wrong. I’ll talk about this a little later when I look at external style sheets.

Sometimes you have to write CSS styles inside HTML code.

For example, when you post something advertising banner on your website - you insert the code of this banner into the page code.

In order for this banner to be displayed correctly (not to go beyond the boundaries allocated to it, perhaps it needs a frame, etc.), sometimes you need to attach several CSS instructions to it.

But at the same time making changes to general table styles make no sense. The banner is a temporary phenomenon. Today one, tomorrow another. Therefore, it is easier to write styles for it directly inside the code of this banner.

That is, we need to connect CSS styles only to specific element pages. This is done very simply - using the style attribute.

Styles written in this way only affect the element in whose tag they are placed. In this case, only for this paragraph (tag

). And no other!

2. External style sheets.

Called external CSS tables styles means that they are written not in the body of the HTML document, but in a separate special file. These files have the extension .css

So, as promised, I’ll tell you why it’s better to use external style sheets.

The fact is that this allows the pages of your site to load a little faster. Maybe for a fraction of a second, but faster. This reduces the load on your site and more convenient for your visitors - they have to wait less for pages to load.

Why is this happening.

If the CSS styles for your site are in separate file, then the user's browser does not need to load these styles every time it loads new page. He downloaded them once, placed them in the cache (memory area on the visitor's computer) and when downloading next page takes styles from there.

There are two ways to attach CSS stylesheet files to a web page.

The first method, the most common, is to use the tag with attributes: rel = "stylesheet" type = "text/css" href = "style file.css" inside the page header code (tag ).

For example:

1 2 3 4

<head > ..... <link rel = "stylesheet" type = "text/css" href = "style.css" > </head>

The example data is attached to CSS page styles written in the style.css file. They are valid throughout the entire document.

There is another way attach external style sheets to HTML document. This is using the @import directive. It allows you to import the contents of a CSS file into the current style sheet.

You can use it both to add some style sheets to others, and to attach a style sheet file to an HTML document. To do this, you need to write it inside the tag

Below is an example of implementing CSS based on the above syntax:

Title

Paragraph.

We get the following result:

Attributes

Inline CSS - style attribute

You can use the attribute on any HTML element to define style rules. These rules will only apply to this element. Here's the general syntax:

<элемент style = "...правила стиля...">

Attributes

Example

Below is an example of inline CSS based on the above syntax:

Inline CSS

We get the following result:

External CSS styles - element

Element can be used to connect external CSS file ov into your HTML document.

An external CSS style sheet is a separate text file with the extension .css. You define all the style rules in this text file, and then you can include the CSS file in any HTML document using the element .

Here's the general syntax for including an external CSS file:

Attributes

Attributes are associated with elements or rules defined in any external file style sheets.

Any rule defined in tags, overrides rules defined in any external CSS file.

Any rule defined in an external stylesheet file has the lowest priority in CSS, and rules defined in that file will only apply when the two preceding rules do not apply.

Handling by older browsers

There are many older browsers that don't support CSS. Therefore, we must take care of writing inline CSS in our HTML document. The following code snippet shows how comment tags can be used to hide CSS from older browsers:

There are at least three ways to bind css styles to website page. The article describes these binding methods in detail and provides comprehensive explanations.

First, you should explain why you need to bind anything to a website page at all, and why css styles are placed in a separate file.

Since the advent of web page content style sets (CSS), a very useful rule has been postulated among web developers: “separate content from its presentation!”

That is, the web page contains a blank html code, and all the design is placed in separate sets css rules and preferably outside of this web page. This killed two birds with one stone.

Firstly, the html code remained clean. It only contained content and markup. Which significantly lightened the weight of the page.

And, secondly, this division made it possible to more efficiently edit design styles without affecting the web page itself.

There were even entire galleries with examples of sites where it was enough to simply replace one CSS style file with another, and the site would instantly be completely transformed in terms of design and structure of block placement.