Adding Styles to

Elements
LEARNING OBJECTIVES

❑ add style to elements, such as borders and padding

❑ identify the functions of borders and padding in the elements
❑ modify borders, margins, padding, height, and width
 IMPROVE HTML TABLE
The look of an HTML table can be greatly improved using the
border property in CSS. Using the data from the previous
lesson, let us add style elements that we can use in the
tables.

Let us take a look at the data shown below:

Dr. Fe Del Mundo – Medical Incubator
Dr. Rodolfo Aquino – Isolated Rice Breeds
HTML Code
Output
Adding CSS Code Output
 TABLE HEADER AND TABLE DATA
modify the CSS file using the borders and padding properties by
removing the th (table header) and the td (table data).

• First, we must save and refresh our browser window. We will

then see that the inner borders were removed. This means that the
formatting for the th and the td were not applied.

• Let us now add a separate format for the th and td. We will
again modify the CSS file. Afterward, we save the CSS file and
refresh our browser.
 CSS Code Output

The space between the border and the content in a table can also be controlled.
To do so, we can use the padding property on the th and td elements.
CSS Code

Output
 Using the Box Model
In HTML, elements can be considered as boxes. In CSS, the term box model
refers to the design and layout.

The CSS box model is a box that wraps every HTML element. It consists of
the following parts:
 BOX MODEL
Basically, the content is wrapped by a padding, which is wrapped
by a border, and then wrapped by a margin.
BORDER
BORDER-WIDTH
sets the width of the border. The width is set in pixels, or by using
either thin, medium, or thick.

These are the three (2) predefined values used in border-width.

Border-color sets the color of the border. The color can be set by:
BORDER
These are the three (2) predefined values used in border-width.
Border-styles can be any of these:
MARGIN
• defines the space around elements. It clears the area around an element
(outside the border).
• it also does not have a background color and is completely transparent.

The margin element values may be defined in the following way:

• margin-top: 100px;
• margin-bottom: 100px;
• margin-right: 50px;
• margin-left: 50px;
MARGIN
We can also use the shorthand property:
MARGIN
We can also use the shorthand property:
PADDING
• defines the space between the border and the content.
• The values may be defined as padding-top, padding-right,
padding-bottom, and padding-left

These may be written in these ways:

• padding-top: 10px;
• padding-bottom: 10px;
• padding-right: 10px;
• padding-left: 10px;
PADDING
• defines the space between the border and the content.
• The values may be defined as padding-top, padding-right,
padding-bottom, and padding-left

These may be written in these ways:

• padding-top: 10px;
• padding-bottom: 10px;
• padding-right: 10px;
• padding-left: 10px;
PADDING
We can also use the shorthand property:
PADDING
We can also use the shorthand property:
Let us take a look at the sample HTML and CSS style sheets.
Let us take a look at the sample HTML and CSS style sheets.
Let us take a look at the sample HTML and CSS style sheets.
THANK YOU!
SEE YOU IN
NEXT LESSON