It's no secret that website design is one of the key tasks for a programmer. After all, it is the first impression that the user has when viewing a web page that forms a general idea and opinion about your resource.
Web designers face an important task, which is to create a bright, simple, but at the same time “catchy” website design. To give a beautiful appearance of HTML - pages, various properties are used in CSS: border style and many others. Their proper use and application will be discussed in this article.
CSS Border Style
Use of this property applies to all objects that may be located on a web page. Using it, the border style of various objects is formed. It is important to note that each of the sides of the border can be endowed with its own characteristic if, when writing the border style property in CSS, specify one of the sides instead of style: top, bottom, left, right. They mean the upper, lower, left and right borders, respectively.
The CSS border property itself can be assigned one of the following values, which are shown in the image below.
The programmer can change the thickness of the borders or their indents from the text. It is also possible to change the color using the border style color property in CSS. Below are various border options with a thickness of 1, 3, 5, 7, 9 pixels, respectively.
Property Merging
It is worth noting that the properties of borders can be combined using curly braces. To do this, you need to write in turn all the property values that you want to set for the border style in CSS. Keep in mind that if you missed some properties and did not specify them, then they are set by the system by default.
CSS: border style to table
Particular attention should be paid to a tag such as table, which helps to create tables on web pages. In order to apply all of the above properties to table cells, namely to their borders, you will need the special border-collapse property. Why is a separate property necessary that applies exclusively to tables? Everything is much simpler than it seems at first glance. If a separate contour is created for each cell in the table, two significant disadvantages arise:
- If there are a lot of cells in the table, then this will take a lot of time and the code weight will significantly increase;
- When you design each cell of the table separately, the borders of neighboring cells will overlap, which also increases the weight of the code, and may also not look very attractive.
Thus, collapse helps, in simple terms, “glue” common borders. What values can this property take in tables? The options are listed below:
- collapse - there is one line between the cells. The cells are glued together;
- separate - each cell forms a frame around itself that separates it from other cells;
- inherit - when applying this attribute, the value is inherited from the previous ones.
Conclusion
Let's hope that our article was useful, and you were interested to read it. Remember that the visual component of the site is the most important factor influencing its further development and promotion. The original and catchy design will always find a response from the audience and improve your attendance rates.