Page 201 - Webapplication11_C11_Flipbook
P. 201
<P style="font-family: verdana; font-size: 1.5em">A computer is a
versatile machine that can be used to carry out a variety of tasks.
For example, you can do your homework, play games, listen to songs and
do many other things on a computer.</P>
<H2>Types of Computer</H2>
<P style="font-family:Arial Black; font-size: 1.5em">There are many
types of computers. Based on their size, the types of computers are,
micro computer, mini computer, mainframe computer and super computer.
</P>
</BODY>
</HTML>
2.19 CSS BOX MODEL USING <DIV> TAG
The CSS box model is a fundamental concept in web design and layout, describing the rectangular boxes generated for
elements in the document tree and consisting of the element's content, padding, border, and margin.
Margin
Border
Padding
Content
We can implement the box model using following CSS properties:
Ð ÐContent: This is the innermost part of the box, where the actual content (text, images, etc.) is displayed. It can take
following values:
width: It specifies the width of the content area.
height: It specifies the height of the content area.
Ð ÐPadding: The space between the content and the border. It specifies the padding area on all four sides of an element.
It can take following values:
padding: It sets padding on all four sides.
padding-top: It specifies the padding area on the top side.
padding-right: It specifies the padding area on the right side.
padding-bottom: It specifies the padding area on the bottom side.
padding-left: It specifies the padding area on the left side.
Ð ÐBorder: The line that surrounds the padding and content, defining the edges of the box. It can take following values:
Border: Shorthand property for setting border-width, border-style, and border-color on all four sides.
Website Building Using HTML and CSS 199

