Wednesday, January 9, 2019
DESIGNING THE LAYOUT OF A WEBSITE & BLOG USING CSS|PRACTICAL GUIDE
Today’s lesson pegs its fulcrum on the design and layout of a website or blog. You will learn about designing website borders, margins, paddings and the actual content of a website. We have a few more lessons left before we move to CSS3. Meanwhile, in this lesson, I will descriptively explain to you about the design and layout of a website also known as ‘’BOX MODEL’’ in CSS. All the properties of a box model work in the same order; top, right, bottom and left. Don’t panic, in this lesson, I’m going to carry you on my lap (regardless of your weight) and feed you with all the necessary information you need with regard to the subject of discourse. I better get started.
Here’s the brief overview of the properties.
a) Border: Is the line that goes around content and padding of every element on a web page.
b) Content: Is what a box contains. That is the content of the box.
c) Padding: Is the space between the border and content in a box.
d) Margin: Is the area outside the border of a box.
EXPLANATION PROPER
Having successfully established the about points, I want you to note, with hands on ears, the things I’m going to stress below.
Each element on any web page of a website is a box. The box helps you to determine the actual width and height of the HTML element in designing a website. It makes it easier for you to visualize the mental picture of a website layout. Usually, a box contains the head, the content and the base. When working with boxes, it is paramount to understand how the total width and height of an element is calculated.
Who am I anyway? I'm gonna teach you the 'how' in a jiffy. The total width of a box with paddings is the sum of width plus padding left and padding right. That is, total width = width + p. left + p. right. This is also applicable to the height.
BORDER
Border attribute enables you to customize and stylishly design the border of HTML element. In order to add a border, you need to indicate or specify the size, style, and as well, color of the border.
Let us consider an example to buttress the above point.
Open your text editor, preferably sublime text, and strike in the following codes.
HTML
<p>I thank Daniel Unachukwu Foundation for this free coding lesson</p>
CSS
p.first{
color: mediumseagreen;
font-size: 250%;
padding: 20px;
border: 8px dotted green;
text-align: center;
border-radius: 30px;
background-color: yellow;
margin-top: 100px
}
REFERENCE IT IN THE HTML DOCUMENT, IT WILL LOOK LIKE THIS IN YOUR TEXT EDITOR
SAVE IT AND THEN OPEN IT WITH YOUR BROWSER, IT WILL LOOK LIKE THIS
WRAPPING UP
I don’t want to go too far in this lesson for easy comprehension at a time. In our next lesson, I will explain all the things that seem confusing above and then go further in the design palaver. At the moment, study this lessons meticulously and never hesitate to drop your comment below.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment