Learning Styles, background, text and font in CSS

There are several sites that users can regularly use to get the answers to their questions, each of which has different appearances, which is what makes them attractive to different users, such as the virtual world where the user chooses a store, out of hundreds of shops, due to the attractiveness of  the shop design, as a site owner, to  create an attractive design for your site, you need to increase your level of CSS knowledge and learn the ways of choosing an attractive background for different pages, or you can use a readable and appropriate font to  increase your site traffic, but before that, we need to give you a brief and general explanation about CSS itself.

What is CSS?

CSS stands for  Cascading Style Sheets  which, by being added to HTML through different methods, causes websites to be displayed in the best possible way, and there are three ways to do this:

- External CSS:

By using this method, you can change a site's appearance in the shortest time. It should be noted that it is enough to change one of the files, which we will give you an example of it in the following.

- Internal CSS:

This method should be used when a page has its unique style to not make a big change to it. In this case, you can easily apply the desired changes through this method.

- Inline CSS:

In this method, adding the style attribute to the relevant element is also necessary.

CSS background:

Background in CSS  has various features, which are as follows: background-color, background-size, background-position, background-clip, background-image, background-size, background-repeat, background-origin, background-attachment, all of which will be explained briefly in the following.

- Background-color:

As its name implies, you can adjust the background colors with the help of this item. It is necessary to be careful while choosing the right color, so you shouldn't choose the color that makes the users not be able to use the website properly after a while, due to the fact their eyes will get tired of it.

body {background-color: white;}

- Background-size:

To adjust this item, you must specify the width and height. It is also possible to use the word "auto" to determine the size automatically. In addition, it is possible to use one of the items such as width and allow the length to be automatically determined.

- Background-position:

As its name shows, it is used to set the background-position. You must use it to determine where the background should start, so you can use some words such as left top, left center, left bottom, center top, etc., or use percentages, pixels, and so on, to determine the position of the background, there is an example of setting the background-position for you.

- Background-image:

You have to use this item to set different photos in one element.

- Background-origin:

The background-position area can be specified through this item.

Text:

The text in content is important for the user who visits your website. In CSS, the text is placed inside the element's content box, and this box should contain the desired text. Also, if you want to cut one of the lines, you need to use the
element. Texts have the following characteristics:

- Font styles:

This feature is used to apply different properties to the font. For example, you may want to make the text lighter, smaller, etc., and you have to use some properties to achieve your goal.

- Text layout styles:

This feature is used to determine the distance between lines, words, etc., and sets all these items in the content box.

CSS font:

The font is also so important in  designing a site. For instance, you can use a different font for a more important text to notice its importance as soon as they see it. Toaster this section, you must know font style, font-variant, font-weight, font-family, font-size, etc. We will explain a number of them in the following.

- font-style:

This item has different types: normal, italic, oblique, initial, and inherit.

- font-variant:

This feature determines that the text should be written in uppercase or lowercase and their size.

- font-weight:

The size of different characters in the text is determined with the help of this item, and this case has various properties that can be shown in the text with the help of the following values.

Normal:

It is used to specify normal characters in the text.

Bold:

It is used to indicate bold characters.

Lighter:

It defines lighter characters.

100-900:

The numbers 100 to 900 are used to determine whether the characters are faint or bold. When a small number is used, it will be fainter, and the closer the number is to 900, the bolder it will be.

- Font-size:

This item is used to determine the font size, which can be adjusted differently. For this setting, the following values must be used.

Medium:

This value is presented in font size by default, and as its name implies, it has a medium size in that font.

xx-small

x-small

Small

Large

x-large

xx-large

Smaller

Larger

Length:

In this case, you have to adjust the font size to centimeters.

%:

In this case, the font size is determined as a percentage.

Last word:

In general,  website design  should be one of the most important goals every person has before  creating a site. To create a site, you must have a lot of knowledge in this regard to act correctly. The most important thing that can be used in site design is Cascading Style Sheets, in which different items can be used to design each item on a site. In this article, we have mentioned fonts, text, backgrounds, etc., which you can use to design a suitable and attractive site. To design each character's appearance, letters, images, etc., you should use the available items.

Here we have tried to give examples of the ways of coding and implementing the code so that you can design a suitable site that attracts different users to the site, which  increases the traffic to the website. The website ranking will increase as well so that the site owners can see the result of their efforts and accuracy in  creating the site  and achieve success this way because if you can attract more users, you will achieve your goal as soon as possible. After all, when your website is attractive enough, the users may decide to introduce your website to their friends; as a result, the number of your website users will increase day by day.