ITT588
HTML CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It helps to control the layout of web pages at once.
CSS can be added to HTML documents in 3 ways (you can refer to the previous video): -
Inline
Internal
External
CSS Box Model
In designing the web, one very important concept is called the CSS box model. How it is
look like? You can refer to the below illustration: -
Top margin
Top border
Top padding
Left margin
Left border
Left padding Right padding
RightRight
border
margin
Content
Bottom padding
Bottom border
Bottom margin
Based on the figure above, all text and images appear in content box while the others
boxes are used to separate the content from neighbouring elements.
NJ
ITT588
Learn more by this example:
.example-box{
width:60px;
height:60px;
padding:10px;
border:10px;
margin:20px;
}
<body>
<div class= “example-box”> Here is the box.</div>
</body>
When you use the above code and save it as an html file, open your file the in the web
browser (Google Chrome). Then, you can press Ctrl+Shift+I or you can select Tools
Developer Tools. Next, you can try to change the value.
Now, you can try to add:-
body{
padding:10px;
}
NJ
ITT588
Here, is the new result and you can identify different.
Element Display
The display CSS property can influence the behaviour of the CSS box model. Controlling
the element’s display is one of the more important aspects of web design. Let see the
example below:-
.example-box{
width:60px;
height:60px;
padding:10px;
border:5px solid;
margin:20px;
display: inline;
}
<body>
<div class= “example-box”> Here is the box.</div>
</body>
NJ
ITT588
Here, is the new result. The most obvious effect of setting the element display to inline is
the ignorance of its width and height properties. These properties are set to auto and you
can check them using the DevTools. What else that you notice?
Positioning and Element Flow
The next important thing is the way we place the element on the page. Technically, we
control the element’s flow with the position property. The keywords that will be used are
static, absolute and relative.
Let try this example:
<html>
<head>
<style>
div{
width:40px;
height:40px;
border:1px solid;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div id= “one”>1</div>
<div id= “two”>2</div>
NJ
ITT588
<div id= “three”>3</div>
</body>
</html>
Here the result
Now, let set the position of the second element to relative by adding the codes below:-
#two{
position:relative;
top:10px;
left:25px;
}
Here is the result. We set the exact position of an element using the properties top, right,
bottom and left. These properties do not denote the direction of movement. It just
specifies the space that is to be inserted at the corresponding side of element. For
instance, if you declare left:25px; it means that 25px space will be inserted at the side
left of the element. When we applied the above rules to our HTML document, the second
element moves 10px down and 25px to the right.
NJ
ITT588
Now, let try the absolute position.
#two{
position: absolute;
Here’s how it looks. The second element taken out of the flow and the third element
takes the position where the second element was before. Now you can play around with
the position to have better understanding.
Try by yourself to get the following output.
NJ
ITT588
Next, use your creativity to modify the Sepit Baju Sdn. Bhd. layout above by using the
following layout below:-
P
HEADER
MENU
MAIN CONTENT
CONTENT CONTENT
FOOTER
NJ
