Lesson 7. Text and background color in HTML.

Date: 2008-12-05

How to set the background and text color on a web page?

By default, the color of text and, in general, any font on web pages is always black (#000000 ). But we can always set absolutely any color that we like and looks decent or more suitable for the design of a particular site.

Set the text color

In HTML, the color of text, font, background, and other elements can be set in two ways:

1. Method 1. In pair tags attribute is written with the name of the desired color. The name of the color is indicated in English. For example, the title color on our web page can be set in this way:

Comments on this article (lesson):

Andrey! What a wonderful site you have! I have been using it regularly for the second week now: I have been studying your lessons and video tutorials; I read your literature and download programs; I'm taking my first steps in web programming! And, most importantly, I can do it!!! And I'm not a physicist at all, but a lyricist! And anyone who visits my literary site can be convinced of this: "POEMS BY OLEG GUZ" My details: e-mail: [email protected] website: http://sites.google.com/site/stihiolegguz/

check the code carefully

I've tried changing the background color and it doesn't work! How to change the background color?

Good day to everyone who wants to learn and learn something new! Have you ever paid attention to the appearance, during the development of which the creators were too lazy to decorate the background of the pages? And I turned. This looks bad. Often, due to the lack of divisions between different types of information that we are used to, it is mixed up and there is simply no desire to look further at such a web resource.

So that such a disaster does not happen to me, I decided to write an article on the topic: "How to make a page background in html." After reading the publication, you will learn what tools you can use to set the background design, how to make the background fixed or changing, and much more that will help make your site attractive. And now let's start!

Basic tools for setting the background of web pages

To set a background image, web language designers provided the background attribute. It is available in both , and css.

In the markup language, this is an attribute of the body tag, and in style sheets, it is a universal property that allows you to set up to 5 background characteristics at the same time. Background is a fairly flexible element that can be used to set the background in the form of a single color, a colored image, or even an animation.

So, to set the background image via the html unit just write this code: ...

and instead of the words "file address" insert the path to the picture.

However, notice! If you want to see a one-color canvas as a background, specified by a value from the color palette, then this is done using the bgcolor attribute.

For example, ...

, we have set a black background for our site.

Colors in css and html are specified either by an English word (for example, red) or a special code that consists of the # sign and six characters after it (for example, #FFDAB9).

When typing the second option in specialized software products for developers, the palette will automatically appear in front of you. If you have just started to study these web languages, then you can peep the color code on the Internet.

Background as a property in cascading style sheets

It is set either in a separate file with css styles, or in an element

On this note, we can summarize our work. Join the ranks of my loyal subscribers, ask questions if something is not clear, and do not be greedy for a link to my blog, but share it with your friends. I wish you a pleasant learning. Bye bye!

Sincerely, Roman Chueshov

From the author: I welcome everyone. Background colors and images in web design play a huge role, as they allow you to more attractively design any element. How to make a background in html, we will look today.

Is it possible to get by with html when setting the background?

I'll tell you right now that it's not. In general, html is not designed to design web pages. It's just very inconvenient. For example, there is a bgcolor attribute that can be used to set the background color, but this is very inconvenient.

Accordingly, we will use cascading style sheets (css). There are many more options for setting the background. Today we will analyze the most basic ones.

How to set background with css?

So, first of all, you need to decide which element you want to set the background to. That is, we need to find the selector to which we will write the rule. For example, if you need to set the background for the entire page as a whole, then you can do this through the body selector, for all blocks through the div selector. Well, etc. The background can and should be attached to any other selectors: style classes, identifiers, etc.

After you have decided on the selector, you need to write the name of the property itself. To set the background color (namely, a solid color, not a gradient and not an image), the background-color property is used. After it, you need to put a colon and write the color itself. This can be done in different ways. For example, using keywords, hex code, rgb, rgba, hsl formats. Any method will do.

The most commonly used method is the hexadecimal code. To select colors, you can use a program in which you can see the color code. For example photoshop, paint or some online tool. Accordingly, for example, I will prescribe a common background for the entire web page.

body( background-color: #D4E6B3; )

This code needs to be inserted in the head section. It is important that the files are in the same folder.

Picture as background

For the picture, I will use a small html language icon:

Let's create an empty block with an ID:

< div id = "bg" > < / div >

Let's give it explicit dimensions and a background:

#bg( width: 400px; height: 250px; background-image: url(html.png); )

#bg( width : 400px height: 250px background-image : url (html . png ) ;

From this code, you can see that I have used a new property called background-image. It is intended just for inserting an image as a background to an html element. Let's see what happened:

To specify an image, you must write the keyword url after the colon, and then specify the path to the file in parentheses. In this case, the path is specified based on the fact that the image is in the same folder as the html document. You also need to specify the image format.

If you have done this, and the background is still not displayed in the block, check again if you wrote the name of the image correctly, if the path and extension are set correctly. These are the most common reasons why the background is simply not displayed, because the browser cannot find the image.

But did you notice one feature? The browser took and multiplied the picture throughout the block. So, just so you know, this is the default behavior of background images - they repeat vertically and horizontally as long as they can fit into the block. By this behavior you can easily manage. To do this, use the background-repeat property, which has 4 main values:

Repeat - the default value, the image is repeated on both sides;

Repeat-x - repeats only on axis x;

Repeat-y - repeats only along the y axis;

No-repeat - does not repeat at all;

You can write each value and see what happens. I will write like this:

background-repeat: repeat-x;

background - repeat : repeat - x ;

Now repeat only horizontally. If you write no-repeat, then there would be only one picture.

Great, we can finish with this, since these are the basic features of working with the background, but I will show you 2 more properties that allow you to get more control options.

With repetition, coders used to achieve the point of creating background textures and gradients using one tiny image. It could be 30 by 10 pixels or even smaller. Or maybe a little more. The image was such that when it was repeated on one or even on both sides, no transitions were visible, so that in the end a single solid background was obtained. By the way, this approach is worth using now if you want to use a seamless texture on your site as a background. The gradient today can already be implemented using css3 methods, we will definitely talk about this later.

Background position

By default, the background image, if it is not set to repeat, will be in the upper left corner of its block. But the position can be easily changed with the background-position property.

You can ask it in different ways. One option is to simply specify the sides in which the image should be:

background-position: right top;

background - position : right top ;

That is, everything remained the same vertically: the background image is located on top, but horizontally we changed the side to right, that is, the right one. Another way to set the position is as a percentage. In this case, the countdown starts in any case from the upper left corner. 100% - the whole block. Thus, to place the image exactly in the center, we write it like this:

background-position: 50% 50%;

background-position: 50% 50%;

One important thing to remember about positioning is that the first parameter is always the horizontal position, and the second parameter is the vertical position. So, if you see a value of 80% 20%, then you can immediately conclude that the background image will be strongly shifted to the right, but it will not go down much.

And finally, you can specify the position in pixels. Everything is the same, only instead of % there will be px. In some cases, such positioning may also be necessary.

Abbreviated notation

Agree that the code turns out to be quite cumbersome if everything is set the way we did it. It turns out that the path to the picture needs to be set, and the repetition, and the position. Of course, repetition and position is not always necessary, but in any case, it would be more correct to use the property shorthand. She looks like this:

background: #333 url(bg.jpg) no-repeat 50% 50%;

background : #333 url(bg.jpg) no-repeat 50% 50%;

That is, the first step is to record the overall solid background color, if necessary. Then the path to the image, repetition and position. If some parameter is not needed, then simply omit it. Agree, this is much faster and more convenient, and we also significantly reduce our code. In general, I advise you to write abbreviated always, even if you need to specify only a color or a picture.

Controlling the size of the background image

Our current image doesn't lend itself very well to the next trick, so I'll take a different one. In size, let it be like a block or larger than it. So, imagine that you are faced with the task of making a background image so that it does not completely fill its block. And the picture, for example, is even larger than the size of the block.

What can be done in such a case? Of course, the simplest and most reasonable option would be to simply reduce the image, but it is not always possible to do this. Let's say it lies on the server and at the moment there is no time and opportunity to reduce it. The problem can be solved with the help of the background-size property, which can be called relatively new and which allows you to manipulate the size of the background image, and indeed any background.

So, my image now takes up all the space in the block, but I will give it a background size:

background-size: 80% 50%;

background-size: 80% 50%;

Again, the first parameter is the horizontal size, the second is the vertical size. We see that everything has been applied correctly - the photo has become 80% of the block width in width and half in height. Here you only need to make one clarification - by setting the size as a percentage, you can affect the proportions of the picture. So be careful if you want not to break the proportions.

As you might guess, the background size can also be specified in pixels. There are also two value keywords that can also be used:

Cover - the image will be scaled so that at least one side of it completely fills the block.

Contain - scales so that the image fits completely into the block at its maximum size.

The advantage of these values ​​is that they do not change the proportions of the picture, leaving them the same.

Also, you should understand that stretching the picture can lead to a deterioration in its quality. I can give an example from the life and real practice of layout designers. Everyone knows and understands that when designing for desktops, you need to adapt the site to the main monitor widths: 1280, 1366, 1920. If you take a background image sized, say, 1280 by 200, and do not set background-size for it, then screens with a width larger than an empty space appears, the picture will not fill the width completely.

In 99% of cases, this does not suit the web developer, so he sets background-size: cover so that the image always stretches to the maximum width of the window. This is a good trick to use, but now you will run into the problem that users with a screen width of 1920 pixels may see a sub-optimal image quality.

I remind you that it will stretch to the maximum width. Accordingly, the quality will automatically deteriorate. The only correct solution here would be to initially use a larger image - 1920 pixels wide. Then on the widest screens it will be in its natural size, and on others it will simply be cut off slowly, but at the same time, with a competent selection of the background image, this will not affect the appearance of the site.

All in all, this is just 1 example of how to apply the knowledge you have gained in this article to real-life layouts.

translucent background with css

Another feature that can be implemented using css is a translucent background. That is, through this background it will be possible to see what is behind it.

As an example, I'll set the background of the entire page to the image we used earlier in the examples. For the block with the bg identifier, on which we conduct all our experiments, we will set the background using the rgba color setting format.

As I said earlier, there are many formats in css for setting colors. One of them is rgb, a fairly well-known format for those who work in graphic editors. It is written like this: rgb(17, 255, 34);

The first value in brackets is the saturation of red, then green, then blue. The value can be numeric from 0 to 255. Accordingly, the rgba format is no different, only one more parameter is added - the alpha channel. The value can be from 0 to 1, where 0 is full transparency.

In the previous chapters, we compiled the main template of HTML documents, decided what HTML tags are, learned how to save and edit html files, and in this chapter we Let's get acquainted with tag attributes and change the color of the text and background of the page.

Let's open our index.html, for editing: I managed!!!

And let's change it a little, add attributes: text="#000000" bgcolor="#ffffff"> I did it!!!

Attribute is a tag parameter that is inserted into the tag as a "pair" (parameter name + parameter value).
Tag attribute values ​​are inserted:
1) text=#000000 without quotes;
2) text="#000000" in single quotes;
3) text="#000000" in double quotes.
Any of these options are correct, but if you care about code ethics, it's better to use double quotes, as in my example above.

Attribute "text" controls the color of the text on the entire page, and "bgcolor" controls the background color of the page.

Now I propose to talk about colors for HTML documents. The color is set:
1) text="gold"- words in English, for example: gold (gold), red (red), green (green) and so on ...
But the color can only consist of one word, for example "red", but if you write "green-red", then the browser will not understand this and will simply ignore it.
2) text="#000000"- RBG (red green blue) color scheme. "#" this character says that it is a color number, the first two characters (zero in my example) say how much we took the "red" color, the second green and the last two blue.
Each color is set from 00 to FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), for example #000000-black, #ffffff-white , #ff0000-red , #00ff00- green #0000ff-blue

As a bonus from the site, I suggest you download the color palette (2kB), which is shown in the picture above. You need to unzip the archive to run the file color.html, then on a large field, put the mouse pointer on the color you need, which will be shown in a small window, and if you click the mouse at this time, the color code will appear in a small window on the right.

Now back to our file index.html and save it as tsvet.html, now let's see what happened. What was it like and what is it like? And you're absolutely right, as white is for the background and black for the text is the default color. To notice the difference, let's change the attribute values:

text=gold" bgcolor="#0900b8"> I did it!!!

Save and Watch (opens in a new tab)

There are other ways to set text in html files, but these two are considered the main ones.

In the next chapter, we will learn how to manage text with BR tags, how to wrap text on another line.

With help CSS color and background you can set almost any element of the web page, freely control the background image, its repetition horizontally and vertically. In addition, using CSS, you can place the background image anywhere on the screen using positioning. Let's not run far yet, let's go in order.

COLOR property

This property sets the color of the element, more specifically, the color of the text inside the element. The value is given in one of the possible forms:

• color name (GREEN, BLACK, RED...);
• hexadecimal color code (008000, 000000, FF0000...);
• decimal color code in RGB (color:rgb (40, 175, 250));

The COLOR property is inherited, and if a value is not set for any element, the value will be inherited from its ancestor. But it may happen that it is not set for the ancestor either - then the browser's style sheet will be applied using the default values. The color of the element in this case is likely to be black.

As I already mentioned, you can set a color for almost all elements, it can be (H1... H6), (strong, em) and even whole (p) and even table borders, but more on that later.

Here is an example of setting text color using CSS:

h1 (color : Blue )

In this example, all first-level headings of the web page will be blue:

strong (color : red )

In this case, everything that is in the text of the page will be highlighted with the tag strong, will turn red.

It can be written like this:

h1, p, strong (color : green )

Then the headings of the first level, all paragraphs and everything that is highlighted with a tag will be green.

When it becomes necessary to highlight headings in different colors, class selectors are used. An attribute is used to define a class in HTML class A that can be applied to any element. In the HTML code, you will need to write:

class="blue"> The color of the titles of this class will be blue

In the CSS style sheet, in this case, we write a rule where the H1 element will be the selector, and through the dot ( . ) class name:

h1.Blue (color : blue )

In HTML documents, selectors by identifier are also used, they are defined by the attribute id. An identifier is a more significant or priority attribute than a class. And if both the class and the identifier are specified in the HTML code for the element, then the style of the identifier will be applied. The identifier is denoted by a pound sign ( # ). To use the identifier in the HTML code, you will need to write:

id="blue"> The color of the titles of this identifier will be blue

In the stylesheet in turn:

h1#Blue (color : blue )

BACKGROUND-COLOR property

This property allows you to set the background color for the page as a whole, paragraph, link, in general for any HTML element. To do this, the color or value is specified in the property value. transparent(transparent). The code for the page background is written:

body (background-color : aqua )

In this case, the background of the page will be turquoise, and to give the background to the title, we write:

h1 (background-color : yellow )

We get the yellow background of the headings of the first level.

Color and background in CSS

BACKGROUND-REPEAT property

This property is used when set to determine whether it will repeat horizontally and vertically. Valid values:

• repeat- the image is repeated vertically and horizontally;
• repeat x- the image is repeated only horizontally;
• repeat-y- the image is repeated only vertically;
• no-repeat- the image is not repeated.

The code is written like this:

p(
background-image : url( image file address) ;
background-repeat : repeat-x
}

The text of this paragraph will be on top of the background image, which will be positioned horizontally.

BACKGROUND-ATTACHMENT property

This property is used to tell the browser whether the page's background image should scroll with text ( scroll) or stay still ( fixed).

body (
background-image : url( image file address) ;
background-repeat : repeat-x ;
background-attachment : fixed
}

In this case, the background image will remain fixed.

BACKGROUND-POSITION property

This property is used to position the image relative to . Values ​​are set in percentage (%), in units of length (cm, px), with keywords:

• Vertically:
• top- the top of the image is aligned with the top edge of the page or block;
• center
• bottom- the bottom of the image is aligned with the bottom edge of the page or block.
• Horizontally:
• left- the left edge of the image is aligned with the left edge of the page or block;
• center- the center of the image is aligned to the center of the page or block;
• right- the right edge of the image is aligned with the right edge of the page or block.

We write a code example in percentages, units of length and keywords:

body (
background-image : url( image file address) ;
background-position : 0% 0%
}

Body(
background-image : url( image file address) ;
background-position : 10px 25cm
}

Body(
background-image : url( image file address) ;
background-position : top center
}