External style sheets are much more common. You only need to connect the table to all the necessary web pages using the tag with the rel attribute (defines the relationship between the page and the included file) and the stylesheet value, which means that the included file contains a style sheet. The href attribute is the path (URL) to your .css file:

By editing just one file, you can change the style for the entire site at once, regardless of how many pages there are. This is very convenient, especially for large resources.

Lesson: creating a style sheet

Since external style sheets are the most convenient and widely used in design development, we will learn how to create them. You can download the archive with files for this lesson on this page.

In the folder you will find an HTML document with an example of a simple page and an image (to be used in the tutorial). Open the HTML document in your browser. You will see that the page looks completely normal. To give it a more attractive look, let's style it.

For now, you don't need to delve too deeply into what any given piece of code means. Now you need to understand the principle of operation. Let's get started.

Connecting CSS to HTML

To begin, open any text editor on your computer (notepad will do) and create empty file with the name style , saving it with the .css extension (you should get a style.css file). Save the file in the folder where the downloaded HTML document is located.

Open the HTML document in a text editor, as well as in a browser (to easily view changes in the appearance of the page). Add between tags the following code:

Briefly summarize what you just did. By pasting this code into your HTML document, you:

• provided a link to a font called Roboto Condensed, which will be taken from Google servers(we'll tell you more about Google fonts later);
• connected our external style sheet style.css (empty for now).

Writing CSS style

Save your changes to the HTML document and go to the empty .css file you created. Let's add some styling to the page:

Html ( padding-top: 5px; background-image: url(background.jpg); )

Save your changes. Congratulations, you have written your first rule - it concerns the tag . The first property - padding-top - will add a top padding of 5 pixels between the browser window and the web page content. With the second property, background-image , you have included an image for the background of the entire page, specifying the path to graphic file(located in the same folder as the HTML document).

Update open web page in the browser. If everything is done correctly, you will see that a background has appeared on the page, and between top part windows and text, the indentation has increased slightly.

Body ( width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; )

Save the changes to the file. Now you:

• set the area for the tag content , which is equal to 75% of the browser window width;
• provided a margin of 40 pixels from all sides of the content area;
• positioned the area in the center of the page, and also made an indent at the top and bottom of 15 pixels;
• set the background color #EBEBEB for the content area;
• rounded the corners of the rectangular area, specifying a rounding radius of 30 pixels.

Update the HTML document again. At the same time, make sure that the cache is disabled or reload the page with all files associated with it updated, using special combination keys (for example, for Chrome this is Ctrl+F5).

You will see that a rectangular area with rounded corners has been added to the center of the page. This is the result of your actions in the CSS file. You can also try making your browser window smaller and admire how the width of the rectangular area adjusts to its size. This is due to the fact that width is specified as a percentage.

Changing the font using CSS

It's time to decorate our text. Add this code to your stylesheet and save your changes:

H1 ( color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; ) h2 ( color: #E87E04; font-size: 1.7em; margin-left : 20px; font-family: "Roboto Condensed", sans-serif; ) p ( color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", sans-serif; )

Having written this, you set the font colors for the h1 , h2 , p tags, indicated their sizes, added a margin from the left edge of 20 pixels and additionally for

We indented the top by 20 pixels and set the leading to line-height ( line spacing text) 50% more than standard. In addition, you connected the Roboto Condensed font to all three tags (that’s why you had to provide a link to it in the HTML file at the very beginning).

Refresh the page in your browser and admire the result. In this tutorial we will try one more thing. Add this code to CSS:

Emphasis ( font-weight: bold; )

Save and refresh the page in your browser. You will see that in the last paragraph the font has become bold in some parts of the text. To understand what happened, go to the window text editor, where at the very beginning you opened the HTML file. Take a look at last paragraph: part of the sentence is wrapped in a tag with the emphasis class. This way you have written a style for a single line of text in a paragraph. We'll talk more about classes in the next chapter.

You should end up with a page like this:

As a practice, try changing the text size for

(let's say 1.1em), and also increase the space between

And the left edge of the content area by another 10 pixels.

conclusions

This chapter looked at CSS syntax and how to create a basic style sheet. You learned how to connect CSS to HTML page, and also learned to create simple styles. Let's highlight the main things you need to remember from this chapter:

Any CSS style consists of several elements: a selector, a style property, and the value of this property.

All properties and their values ​​are written in a declaration block between two curly braces () after specifying the selector.

You need to carefully follow the signs: two curly braces (opening at the beginning of the ad block and closing at the end). Without these brackets, CSS will not work correctly.

It is required to place a colon after the property and a semicolon after the value.

For convenience and better readability of your CSS code, write each property on a new line, and don't skimp on spaces and tabs.

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

It is quite obvious that if CSS styles have a significant impact on the display of an HTML file, then they must be connected somehow. Today we will look at four main ways to connect CSS style to HTML.

Let's not delay the matter long box and let's get started!

Including a separate CSS file!

One of the most convenient and simple ways connecting styles is connecting a separate file with styles. To do this, use the text editor notepad++ (or any other) to create a file with the .css extension 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 post the following code:

Now let's look at what this all means:

Link # translated from English means “link”. This way we show the browser that what we are going to talk about next is a link. rel= # with this attribute we show how the CSS file relates 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 preferable connection method CSS styles.

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

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 it will be displayed this HTML document 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 display style parameters. Color is a selector responsible for color. 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 method)

Another way to connect CSS styles is to place cascading tables inside the HTML file. In my opinion, this method is not the most convenient, because using it, analyzing 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

Please note that inside the tag we also write code according to CSS rules, using curly braces. In subsequent articles I will talk in more detail about the rules of syntax in CSS.

Connecting multiple CSS files to one HTML document.

HTML rules allow multiple CSS files to be included at once. Many webmasters use this: create separate CSS files for text and for pictures. Or separate files for the header, footer and main body of the page. Let's figure out how to implement this.

We are creating several CSS style files. Let their names be style-1.css and style-2.css. We place it, as in 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 in this case we provide links to two files at once.

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 inside 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, enter the following code into the already connected file:

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

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

Material fixation test:

We need to include the CSS file by placing a link to it in the HTML file. Which of the following methods is correct?

Option 1:

Option 2:

Option 3:

Option 4:

Can we place CSS cascades directly in the HTML file?

Hello dear readers of the blog site. After a block of articles devoted to HTML, I decided to introduce you to CSS, since markup tools are not enough to design documents. And generally speaking, learning HTML This is only the first stage in the process of learning how to create websites, the next steps are learning CSS. So let's find out what is CSS and why are they needed?.

If you look at pages with pure HTML, they look unattractive. Monotonous text, tables without frames, dreary black and white colors... Of course, you can make your website pages brighter using html, but this approach only clutters source and does not provide any flexibility. Therefore in modern layout Responsible for the external design of the website pages stylistic language CSS markup or just a style sheet.

Cascading Style Sheets(this is the abbreviation CSS - Cascading Style Sheets) are a set of parameters (styles) that describe the design of the web page itself and its individual elements. These settings control the page background, text color, paragraph alignment, table border options, and more.

Thus, using HTML language you form the structure of web pages, for example you set . And with the help of CSS rules, you specify how these elements of the HTML document will be displayed in the browser. That is, you set the font type and color, text alignment, background color of elements, various indents, etc. Moreover, one CSS rule can affect the visual presentation of several elements of a web page at once.

Therefore, you will most likely need minimal knowledge of the capabilities of cascading style sheets both when creating a website from scratch, and when making changes to an existing project. First of all, this knowledge will be needed when working on website design.

Adding styles or how to connect CSS to an HTML document

Before we talk about the syntax or properties of Cascading Style Sheets, we need to learn how to connect them to html document. There are three ways to connect css to html.

1. The first method is to place styles in a separate file or several files with the .css extension. In this case, to connect CSS styles, use link, which contains the path to external file styles. This meta tag is placed in the heading section of the corresponding web page between the head tags. Here is the format for writing it:

The path to the style file is recorded as the value of the href attribute. rel attribute tells the browser what the file the link tag refers to is. The value "stylesheet" indicates that this file is an external style sheet. IN type attribute indicates the MIME type of the file. For an external style sheet, the MIME type is "text/css".

This is what the line for connecting CSS styles will look like: html code e:

...
.css"/>
...

The advantage of this method is that external style sheet can be linked to several web pages at once.

2. The second way is to write so-called global styles, which are written directly in the html code of the web page. They are locked into a double room style tag and is usually placed in the head section between the head tags:

...

...

The disadvantage of this method is that CSS rules global styles are applied only to the web page in which they are registered.

3. The third method is the so-called built-in or internal styles. To do this, simply in the required html tag need to be placed Style attribute, which includes a set of CSS properties as parameters:

Paragraph with gray background and red text

Moreover, the properties specified in the style attribute apply only to one html element. Typically, this method of connecting styles is used at the stage of debugging the site design, and then the resulting CSS properties are transferred to a file with external styles.

Creating CSS styles. Cascading style sheet syntax - rules, properties, selectors.

Selector (
Property: Value;
Property: Value;
...
Property: Value
}

Those. a style rule includes a style selector and a list of style properties with their values ​​in curly braces (“(” and “)”):

• selector used to bind to elements of a web page to which it should extend its effect;
• “Property: Value” pairs are separated by a semicolon (";") and there can be as many of them as desired;
• between the last pair “Property: Value” and the closing curly brace The semicolon symbol can be omitted;
• style property represents one of the parameters of an html page element: text color, font type, indentation amount;
• spaces and line breaks when writing CSS rules are not critical, the browser ignores them, so you can format the code as you want;
• The code is also not case sensitive.

To make it clearer, let's look at a few examples.

Let's look at this CSS rule:

• body is a selector that represents the name of the tag ;
• background — style property that is used to set the background parameters;
• #0000FF is the value of the background style property, which is a color code in RGB format.

As a result, this style will be applied to the body element web pages and colors the page background in specified color. The style in question is called tag override style, because the selector is a tag name without characters< и >.

Let's look at another example:

h1 (
font-size: 24px;
color: green;
}

This style indicates that the browser will display any text placed in tags

green and will give it a font size of 24 pixels.

As a tag selector, in addition to the tag name, you can specify Class:

Yellowtext (color:yellow)

The class name must consist of letters of the Latin alphabet, numbers and hyphens and must begin with a letter. And in CSS definition rules there must be a dot before the class name, meaning that a style class is being defined. This style will be applied to all tags that have the specified class attribute and its value will be equal style class name without a dot:

This paragraph has orange text

In the example, we bound to the tag

Css rule using class name yellowtext. As a result, the text in this paragraph will be displayed in orange.

You can specify multiple style class names as the value of the clsss attribute, separated by spaces. In this case, the effect of the style classes will be:

Cursivetext (font-style: italic)

yellow italic text

In this example, to the tag

We attached two classes at once: yellowtext and cursivtext. As a result, the contents of the tag will be displayed yellow and italic font.

In addition to classes, css rules can be used as a selector identifier, which specifies a unique name for the element. Everything here is the same as in the case of style classes, only there are a few differences:

• in the CSS rule selector, the name of the identifier is also specified, but instead of a dot in front of its name, a hash symbol “#” is placed;
• binding to html element carried out through id attribute, the value of which is set to the name of the style without the hash sign;
• the value of the id attribute must be unique within the page, that is, in the html code there can only be one element with a given value of the id attribute, otherwise the code will not be valid.

Let's look at an example for clarity:

#textcenter(text-align: center;)

Center text

A css rule is attached to the p (paragraph) element using the id attribute, which aligns the text to the center of the page. It is no longer allowed to create elements on the page with this id attribute value, otherwise the html code will not be valid.

In addition to the considered methods of describing styles, css allows you to create combined styles and set several identical styles at once. Let's see an example:

h1.redtext, p strong (color: red)

In the example, two selectors are specified, separated by commas: “h1.redtext” and “p strong”. The first selector says that in all h1 elements with the value class attribute will be equivalent to redtext, the text will be displayed in red. In the second selector, the same thing will happen for all strong elements that are nested within the p tag:

This title appears in red

plain text, red text

Connecting CSS occurs in several ways, which are used depending on the situation. Now we will look at these methods in more detail. There will be quite a lot of information, so don’t even try to memorize it, but be sure to try to figure out what’s what.

Yes, and one more point that was already touched upon in the previous lesson, but I will repeat it again. Often many beginners are afraid of the phrase “Cascading style sheets” or simply “style sheets”, so when they encounter such expressions in the text, it subconsciously seems to them that they do not understand what is being said. So, in fact, there are no tables in the form that you are used to - no. And these words describe only one thing - everything that relates to CSS, that is, various CSS rules, properties, values, and so on. In general, everything that we will study in this textbook. By the way, this can also include simply the words “CSS” and “styles”.

Built-in styles

Connecting built-in styles (inline) involves using style attribute to a specific tag on the page. In this case, the attribute value is one or more (separated by semicolons) with the corresponding values. As a rule, this method is used in cases where it is necessary to change the characteristics of a specific element on one specific page.

General syntax

<тег style="свойство:значение; свойство:значение; ...">...

An example of connecting inline styles to CSS

Paragraph 1

Paragraph 2

Result in browser

Paragraph 1

Paragraph 2

Internal styles

Internal styles are indicated in the header of the document and are connected using the tag. In this case, the CSS no longer affects one element, but all the elements specified in the styles that are present on this page. Typically, this method is used when it is necessary to change the styles of several identical elements within one HTML page.

Connection example in CSS internal styles

Paragraph 1

Paragraph 2

Result in browser

Paragraph 1

Paragraph 2

External styles

External styles are included in a separate file using the . In this case, all styles are located in the usual text file with the .css extension and affect the elements of all pages to which this file is connected. Usually, the creation of site styles begins with this method, since only with its help all the advantages of CSS are felt, because by changing the data in just one file you can control the display immediately large number pages. And already in the process of working on the site, internal or built-in styles are added, if necessary.

When using external styles, authors act in completely different ways. Some store all site styles in one file, others - in several. For example, one file contains styles for the entire site and is present on all pages, another is additionally connected only to certain sections, a third - to certain subsections, etc. What you do is up to you to decide.

Example connection in CSS external styles

Paragraph 1

Paragraph 2

Contents of the style.css file

Body ( background: #ccccff; /* page background color */ ) p ( color: red; /* paragraph text color */ font-family: Helvetica, sans-serif; /* paragraph font */ font-size: 150 %; /* font size */ text-align: center; /* centered text */ border: 5px green double; /* border styles */ )

Result in browser

Paragraph 1

Paragraph 2

As you can see, everything is very simple. In general, by the names of almost all CSS properties you can already understand what changes they make, of course, if you know at least a little English.

In most examples of this CSS tutorial I will use inner styles since they are the most visual for demonstration. For further study, it’s better for you to immediately create a file of external styles and get used to using them. For example, make a style subfolder, create a style.css file in it and include it in your HTML page.

Including CSS via the @import rule

Another way to connect styles located in separate files is to use the rule . This rule is used to combine several style sheets into one, which is sometimes quite convenient. The connection occurs in external or internal style sheets; for this, after the rule name, the url() construction is written, where the address of the CSS file is indicated in quotes (" "). Or url() is not written at all, but quotes and the file address immediately appear. The general syntax is as follows.

In an external style sheet

@import url("file address"); @import "file address"; ...

In the inner

Let's look at the use of this rule in external tables styles, for this I will give you two examples for comparison.

Example 1: normal connection external styles

Page content.

Example 2: connecting external styles together with the @import CSS rule

Page content.

Contents of the style1.css file

@import url("style/style2.css"); @import url("style/style3.css"); Below here additionally can go regular styles with properties, values, etc.

To rule worked correctly, it must be specified at the very beginning of the style sheet. The only exception is the rule here , which always comes first, although in practice it is used extremely rarely.

I don't recommend that you use all this variety of CSS methods right away - concentrate on regular external style sheets, as this is the main option. If you want, you can, of course, experiment, but nothing more. In general, you can always decide how to connect CSS, the main thing would be what to connect. :)

Custom Styles

Many browsers have the ability for users to include a CSS file so they can change appearance the sites you view, as they say, “to suit you.” For example, change the font size and typeface, the color of the text and background of some elements, etc. Naturally, in this case, styles are created by the user himself. Let's say in Internet Explorer You can connect custom styles by going to: Tools → Internet Options → General → Appearance.