CSS Tutorial Lesson 22: Customising Box in CSS

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone

[Lesson 21]<<[Contents]>>[Lesson 23]

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>

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

Value Border style
 solid solid line
dotted dotted line
dashed  dashed line
 double  double line
 groove  line craved into the page
 ridge  link stick out from the page
 inset  line embedded into the page
 outset  line appears coming out of screen
 hidden or none  no border

Table 22.1: Border Styles

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>

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

[Lesson 21]<<[Contents]>>[Lesson 23]

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone