Friday, January 11, 2019
HOW TO USE BORDER WIDTH, BORDER COLOR AND BORDER STYLE PROPERTY IN CSS
Hi, in this lesson, I will be teaching you how to use border width, border colour and border style in CSS and most importantly, explain some of the technical things in our previous lesson. We have a few more lessons before we move into CSS 3. Without wasting time, let me quickly describe both border width and border colour properties before we move to examples and general explanations.
Border width property is used to define the width of the border in CSS document. That is, how wideness a border can be is usually specified using border-width property. The same thing applies to border colour and border style property.
FORMULA
a) For Border width: use ‘’border-width:#px;
b) For Border color: use ‘’border-color::#; (‘#’ can be color name, hexadecimal value or RGB)
c) For border style: use ‘’border-style:#; (‘#’ can be set as solid, dotted etc)
I illustrate all of these in one example and then explain later together with our previous lesson.
So, open your text editor, and key in the following codes
HTML
<p class="first">
I thank Daniel Unachukwu Foundation for this free coding lesson.
<p class="second">
I will see that i utilize this opportunity.
</p>
CSS
p.first{
color: white;
font-size: 250%;
border-color: blue;
border-width: 7px;
padding: 30px;
border-style: solid;
background-color: black;
}
p.second{
color: orange;
font-size: 200%;
border-color: blue;
border-width: 3px;
border-radius: 6px;
padding: 12px;
border-style: ridge;
background-color: green;
}
REFERENCE THE CSS IN THE HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
EXPLANATION
1. In our previous lesson, we used ''border-radius.'' The function of this border-radius is that it makes the border edge curved or round.
2. Text align that we also used in our previous lesson defines the position of the text inside the border.
3. They are so many different types of border styles namely; solid, dotted, dash, ridge, groove, hidden, outset, inset, none, double, etc. The border style specifies the look of the border.
WRAPPING UP
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment