Let's give an example of a stylesheet - create a file style.css and add the styles:

body (font-family: Arial, Verdana, Sans-serif; / * Font family * / font-size: 12pt; / * Base font size in points * / background-color: # f0f0f0; / * Web page background color * / color: # 000000; / * Body text color * /) h1 (color: # a52a2a; / * Heading color * / font-size: 24pt; / * Font size in points * / font-family: Georgia, Times, serif ; / * Font family * / font-weight: normal; / * Normal text style * /)

Here we have styled the body of the page. and for the title

... You can also set specific styles for any other elements on your website page.

Now let's connect our stylesheet to the site:

Hello World!

This is my first page with CSS styles

So we figured out what is CSS, why this technology is used, learned how to connect styles to the site. This tutorial is kind of an introduction to Cascading Style Sheets. In other tutorials, we will talk about CSS technology in more detail.

This section of the site is entirely devoted to two languages ​​for creating a site, namely HTML and CSS. Here you can learn languages ​​step by step, learn everything from the basics to the most difficult moments.

This section is built on the principle of a step-by-step study of the material, therefore, before each title of a lesson in HTML and CSS, there is a number corresponding to the ordinal number of the lesson. This is natural in case you want to learn everything from the very basics and not make yourself a mess in your head. If you already know something about the HTML and CSS languages, then you can also find the knowledge you are missing here, or deepen what you have already learned.

This section contains lessons on the HTML5 and CSS3 language standards, respectively, if there are any newer versions of these languages, they will also be reflected in the new lessons of this section, and you will definitely find out.

Probably, every person who at least once in his life has come across the creation of a site, of course, heard about such a bunch of html and css, I can say with confidence that if you want to make sites on your own, then you can’t do without the knowledge of these two of things.

After you got a general idea of ​​what html is in your head, there is clearly an ambiguous picture, and I think this is not surprising. It's time to go directly to practice and create your first html document.

Like html, CSS has its own characteristics, rules and structure. In this lesson, I will tell you about the basic concepts of the CSS language, its structure, structure, and we will make with you the first CSS style sheet and learn how to connect the style sheet to an html document.

Selectors in CSS are the basis of the language itself and it is very important to study and understand them, so in this lesson I will tell you about several more types of selectors and describe their capabilities.

A very important point in creating a site is working with text, and as you understand, you also need to be able to work with text in html, and know what tags are there and how they can be used.

After you have learned all the html tags for working with text, now it's time to go directly to CSS working with text, which will significantly expand your knowledge and capabilities.

There is a huge number of all kinds of convenient and qualitatively changing properties in CSS, and we continue to study CSS working with text and in this lesson, we will delve into the topic of working with text and consider the new properties of text.

Working with images when creating from a site is one of the key points, both when creating a design, as well as in simple layout or writing any materials for your site.

CSS greatly expands the possibilities of working with any html objects, in this lesson I would like to tell you in detail about those parameters that can be applied to images.

Hello dear readers of the Anatomy of Business project. Webmaster Alexander with you! In the last article, we sorted out what CSS styles are and how important they are in WEB programming.

Obviously, if CSS styles have a significant impact on the rendering of an HTML file, then they must be related in some way. Today we're going to take a look at four main ways to connect CSS styling to HTML.

Let's not postpone the matter indefinitely and let's get started!

Including a separate CSS file!

One of the most convenient and simple ways to connect styles is to connect a separate file with styles. To do this, you need to create a file with the .css extension using the notepad ++ text editor (or any other) and place it in the same folder as the file to which we want to place it.

Then in the HTML file between the tags place the following code:

Now let's take a look at what all this means:

Link # in translation from English means "link". Thus, we show the browser that further we will talk about the link. rel = # with this attribute we show how the CSS file is related to the HTML file. "stylesheet" # namely that the CSS file is a cascading style sheet. type = "text / css" # everything is simple here: this is an indication that the file is written in text format and has the extension .css href = "style.css" # this is a link to a file with CSS styles.

In my opinion, this is the most preferred way to include CSS styles.

We write the styles directly in the HTML file (the first way)

The next way to specify CSS styles is to write them directly in the HTML document. It looks like this:

If we look at how this HTML document will be displayed in the browser, we will see that the text between the tags turned red. And using the style attribute, we say that next we have the display style parameters. Color Is a color selector. Red Is the value of this selector. In this way, we can highlight certain parts of the text with a certain type of display.

Placing cascading style sheets inside HTML (second way)

Another way to include CSS styles is to place the cascading tables inside the HTML file itself. In my opinion, this method is not the most convenient, because using it, the analysis of the site code becomes not very convenient. In order to start writing CSS styles, you just need to insert tags into the HTML file ... In practice, it looks like this:

Here's an example: displaying CSS styles in an HTML document

Note that inside the tag, we also write the code according to CSS rules, using curly braces. In subsequent articles, I will go into more detail about the syntax rules in CSS.

Connecting multiple CSS files to one HTML document.

HTML rules allow multiple CSS files to be included. Many webmasters use this by creating separate CSS files for text and images. Or separate files for the header, footer, and main body of the page. Let's see how to implement this.

We are creating several CSS styling files. Let their names be style-1.css and style-2.css. We place, as in the method number one, in the same folder with the HTML file.

Here's an example: displaying CSS styles in an HTML document

Everything is similar to the first method, only in this case we indicate links to two at once in the file.

A link to the CSS file inside to a file of the same type.

In addition to all the above methods, there is a method that allows you to place links to many others within one CSS file!

This is implemented as follows:
First, we need to connect at least one CSS file to your code in the same way.

Secondly, we enter the following code into the already connected file:

@import url ("style-2.css");

This line connects an additional CSS file to our file. If you have any difficulties when connecting CSS, you can ask them in the comments.
As we learned from the previous two lessons, CSS technology is a powerful tool that every webmaster should master! To improve the assimilation of the material, I decided to add a training video + a test to consolidate the information received at the end of each lesson.

Material fixing test:

We need to include the CSS file by linking to it in the HTML file. Which method is correct?

Option 1:

Option 2:

Option 3:

Option 4:

Can we place the CSS cascades directly in the HTML file?