Lesson 22:Customising Box

Each element in HTML is considered a box. For example, <p>, <div>, <img> and more are boxes. We can customize the box using CSS styles by manipulating its various properties like width, height, padding, margin,background-color, border-style, border-width, box-shadow and more.

22.1 Width and Height

You can use width and height properties to set the dimension of a box. Typically we use pixel (px) to specify width and height, but we can also use percentage and ems to control the size.

Example 22.1

<p style="height:80%;width:90%; background-color:cyan;">We can customize the box using css styles by manipulating its various properties like width, height, padding, margin ,background-color, border-style, border-width, box-shadow and more.</p>

The Output

We can customize the box using css styles by manipulating its various properties like width, height, padding, margin ,background-color, border-style, border-width, box-shadow and more.

We can also add the min-width property to specify the smallest size the box can be displayed on the browsers and the max-width property to specify the maximum size the box can be displayed on the browsers. In addition, we can also use min-height and max-height properties to specify the minimum height and maximum height the box can be displayed on the browsers respectively.

Besides, we can also use the overflow property to customize how the content in a box can be displayed if the content within the box is larger than the box. We can add two overflow property values hidden and scroll respectively, the first is to simply hide the extra content and the second is to add a scrollbar to the box

22.2 Border

We can customize the look of the box's border by controlling its width, border style, and border color.

To control the border width, we use the border-width property. You can either use three default values thin, medium and thick to specify the border width or you can use pixels to specify the border width. You can also specify different widths for the four borders using border-top-width, border-right-width, border-bottom-width and border-left-width proeprties. However, you can combine the four properties into one by simply assigning four values to border-width, as illustrated below:

border-width: 3px 2px  1.5 px  4px

To control the border styles, we can use the border-style property. There are several border-style values, solid, dotted, dashed, double, groove, ridge, inset, outset and hidden. The values are explained in Table 22.1

Example 22.2

<p style="border-width:thin; border-style: solid">We can customize the look of the box's border by controlling its width, border style and border color.</p>
<p style="border-width:medium; border-style: dotted">We can customize the look of the box's border by controlling its width, border style and border color.</p>
<p style="border-width:thick; border-style: dashed">We can customize the look of the box's border by controlling its width, border style and border color.</p>
<p style="border-width:3px 2px 4px 1.5px; border-style: double">We can customize the look of the box's border by controlling its width, border style and border color.</p>
<p style="border-width:thick; border-style: groove">We can customize the look of the box's border by controlling its width, border style and border color.</p>
<p style="border-width:thick; border-style: ridge">We can customize the look of the box's border by controlling its width, border style and border color.</p>
<p style="border-width:thick; border-style: inset">We can customize the look of the box's border by controlling its width, border style and border color.</p>
<p style="border-width:thick; border-style: outset">We can customize the look of the box's border by controlling its width, border style and border color.</p>

The output

We can customize the look of the box's border by controlling its width, border style and border color.

We can customize the look of the box's border by controlling its width, border style and border color.

We can customize the look of the box's border by controlling its width, border style, and border color.

We can customize the look of the box's border by controlling its width, border style, and border color.

We can customize the look of the box's border by controlling its width, border style, and border color.

We can customize the look of the box's border by controlling its width, border style, and border color.

We can customize the look of the box's border by controlling its width, border style, and border color.

We can customize the look of the box's border by controlling its width, border style, and border color.

22.3 Border Colour

We can specify the border color using the border-color property. You can also specify the colors of four borders using border-top-color, border-right-color, border-bottom-color and border-left-color properties. However, you can also specify all four colors at one go using border-color:color1 color2 color3 color4. The values of the colors can be RGB values, Hex codes or CSS colour names.

Example 22.3

<p style="border-width:thick, border-style:solid; border-color: red, darkgreen, blue, darkcyan">We can specify the border color using the border-color property. You can also specify the colors of four borders using border-top-color, border-right-color, border-bottom-color and border-left-color properties</p>

The Output

We can specify the border color using the border-color property. You can also specify the colors of four borders using border-top-color, border-right-color, border-bottom-color and border-left-color properties

Last but not least, we can actually specify the border width, border style and border color all in one line using the border property, as illustrate in Example 22.4

Example 22.4

<p style="border:3px dashed #ff00ff">Last but not least, we can actually specify the border width, border style and border color all in one line using the border property</p>

Last but not least, we can actually specify the border width, border style, and border color all in one line using the border property