Training around frame, Border, outline and Margin in CSS

For all  web designers, the important thing is to add to the beauty of their site as much as they can and do everything possible to ultimately create a good appearance for their website to encourage users to visit their websites.

Website designers first need a very  good programming  language to get what they want so that they can implement your ideas with the help of it; one of the programming languages ​​that can help them a lot is CSS, which by using, they can

get a beautiful appearance for their website

And for this reason, different users will be attracted to the site and prefer to use it.

When the user like the site and its appearance so much, they will recommend that site to their friends. As a result, visitors will increase over time, and site owners can see the results of their efforts and

reach high rankings on the search results page.

.

In this article, we will show you how to create a frame, border, outline, and margin in CSS, but before that, we need to take a look at what CSS is so that we can go into more detail later.

What is CSS?

It stands for  Cascading Style Sheets, and it is one of the languages which is ​​used to

make a site

look good, but it should be noted that this language is used in conjunction with other languages ​​to configure content, which finally improves the experience of users who visit such sites due to the use of this language.

Frames:

Frames can split a webpage into different parts by using them. To create frames, various features should be considered; for example, one of the things you should pay attention to is the size of the frame, the other thing that should be taken into consideration is the background color of the frame, and the position of the frame is important as well, the color of the content in the frame is the other factor that you should pay attention to and so on, each of these items should be selected according to the purpose for using the frame, and ultimately make your content as attractive as possible.

To implement these tasks, you need to do the following coding to add all the features you want your frame to have.

It should be noted that in the latest version of HTML, the use of thetag is obsolete, and the

Consider the following example:

Borders:

When you want to create a different border around the existing elements that will attract the user's attention, you should go to  creating borders in CSS, and finally, you can create a border in different sizes with attractive and various colors; you can also create different styles.

Border-style:

One of the features that a border can have is that it can be used to specify which of the available types of that should be displayed; in the following, we are going to examine the different shapes of it so that you can find the most appropriate ones according to your goal.

It should be noted that values ​​may be chosen for each between 1 and 4, the reason for which is that any content you want to consider a border for it should have four sides, including the top border, right border, bottom border, and the left border. It should be noted that if you want the border on each side to have different features from the others, the features should be considered separately for each side; the types of borders are as follows.

- None:

This item is used when they do not want any borders, and its name also indicates the type of its border.

- Hidden:

It is used to specify a hidden border.

- Dotted:

One of the types of borders with a lot of attractiveness among people is dotted, which can add a lot of beauty.

- Solid:

It defines a solid border as its name implies.

- Double:

This type is double, which can have a greater impact on attracting the attention of different users.

- Dashed:

The charm of this item is dotted.

- Groove:

The charm of this type is very significant, and in fact, it is a three-dimensional grooved border that you have to pay attention to another feature of it, border color.

- Inset:

This type of three-dimensional border expresses that the upper and left sides have a bolder three-dimensional border, and in this case, the lower and right borders have a lighter color; in fact, it is dependent on a factor which is called border-color, just like the previous case.

- Outset:

This border is the opposite of the previous case, in which the lower and right borders are bolder, and the upper and left ones are lighter, and, this case, like the previous two, is dependent on border color.

- Ridge:

It defines a 3D ridged border; the effect of it depends on the border-color value.

Consider the following examples:

As we have mentioned before, you may want the borders of the four sides to be different from each other, in which case you should do the following coding.

Outline:

When you want the content to stand out more, you should use an outline, which is a line that is drawn out of the borders, and as we mentioned, it makes the content more prominent and ultimately draw more attention to it.

Outline-style:

It is one of the features that outline has, just like the types that we mentioned in the previous case, it can have one of these types: none, hidden, dotted, solid, double, dashed, groove, inset, outset, and ridge, now note the example below.

In addition to the outline-style feature, it is possible to select the color you want and other items for the outline; in selecting each of them, it is necessary not to forget your goal and select each feature according to it.

Margin:

Used to create a margin around the element, you may want to choose different sizes for each of margin-top, margin-right, margin-bottom, and margin-left, in which case you have four numbers:

Or it is possible to consider the same value for all four sides, so the following should be done in this case:

It is possible to use numbers to determine the value of the properties that Margin has, which may be in terms of px, pt, cm, etc., or % may be used, which should be noted that the default form is considered as zero, on the other hand, they may not specify a value for it at all, so the browser calculates it.

Last word:

In general, if you want to be able to

give a site a beautiful look and make it more attractive to different users

You must learn all the tips in Cascading Style Sheets carefully and use them in your designs, so in this article, we tried to teach you tips on creating frames, borders, outlines, and margins in the simplest possible way, so that you can design your site with more knowledge by mastering these items.