DFT 3013 WEB DESIGN TECHNOLOGIES
PART 2: CSS
(DECEMBER 2018 SESSION)
NAME :
MATRC NUMBER :
CLASS:
1
LAB ACTIVITY 9: CSS Boxes & Horizontal Menu
Duration: 2 Hours
Learning Outcomes
By the end of this laboratory session, you should be able to:
1. Control the dimensions of your boxes
2. Create borders around boxes
3. Set margins and padding for boxes
Hardware/ Software: HTML Editor (e.g.: Notepad/Notepad++/Eclipse/Adobe Dreamweaver)
Activity 9A
Activity Outcome: Understanding the box model
Step 1: Open a HTML editor file and type the following. Save code as act9b.html
<!DOCTYPE html>
<html>
<head><title>CSS Box Model</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style></head>
<body>
<h2>Th Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every
HTML element. </p>
<p>It consists of: borders, padding, margins, and the actual
content.</p>
<div>This is example of using box. We have added a 25px padding,
25px margin and a 25px green border. </div>
</body></html>
Step 2: Preview act9a.html in the browser. State or draw your observation.
28
Step 3: Answer the question. What is the differences between margin and padding?
Activity 9B(i)
Activity Outcome: Apply width and height
Step 1: Open a HTML editor file and type the following.
<!doctype html><html>
<head><title>CSS Box Width & Height</title>
<style>
div.box {
height: 300px;
width: 300px;
background-color: #ED0462;}
p { height: 75%;
width: 75%;
background-color: #0088dd;}
</style></head>
<body>
<div class="box">
<p>We can specify value for height and width using pixel or
percentage.</p>
</div>
</body></html>
Step 2: Preview act9b(i).html in the browser. State or draw your observation.
Step 3: Answer the question. What is the actual height and widht in pixel of element <p>?
29
Activity 9C(i)
Activity Outcome: Apply Border Width, Style and Color
Notes : The CSS border properties allow you to specify the style, width, and color of an
element's border.
1. border-style property: set the style either dotted, dashed, solid and etc
2. border-width property:
set the width of the border.
The border-width property does not work if it is used alone. Use the
border-style property to set the border first.
3. border-color property: set color of the border
4. border-radius property: add rounded borders to an element
CSS border properties allows you to specify different style, color and width to side of border
( op border, right border, bottom border and left border)
If you want to specify different style, color and width to the border, you need to follow the order
which is : top – right – bottom – left.
Example A : Example B:
Output: Output:
Code: Code:
border-style: dotted; border-style: dotted dashed solid double;
(the order of values are top-right-bottom-left)
Or you can also specify one by one as given
below:
border-top-style : dotted;
border-left- style : double
border-right- style: dashed
border-bottom- style : solid
**This concept can be applied for border-width & border-color
30
Step 1: Open a HTML editor file and type the following. Save code as
act9C(i).html.
<!doctype html><html>
<head><title>Border Width</title>
<style>
p.one { border-style: solid;
border-width: 2px;
border-color: #0088dd;}
p.two { border-style: dotted;
border-width: thick;}
p.three { border-style: solid;
border-width: 1px 4px 12px 4px;}
p.four { border-style: ridge;
border-width: medium;
border-color: darkcyan deeppink yellow deeppink;}
p.mix { border-style: dotted dashed solid double;
border-color: #F42D30;
border-radius: 25px
}
</style></head>
<body>
<p class="one"> Paragraph 1 </p>
<p class="two"> Paragraph 2 </p>
<p class="three"> Paragraph 3 </p>
<p class="four"> Paragraph 4 </p>
<p class="mix"> Paragraph 5 </p>
</body></html>
Step 2: Preview act9c(i).html in the browser. State or draw your observation.
31
Activity 9C(ii)
Activity Outcome: Use Shorthand border property
Notes : As you can see from the activity 9c(i), there are many properties to consider when
dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color
Step 1: Open a HTML editor file and type the following. Save code as act9C(ii).html.
<!doctype html><html>
<head><title>Shorthand Border</title>
<style>
p { width: 250px;
border: 3px dotted #0088dd;
}
</style></head>
<body>
<p> Shorthand Border </p>
</body></html>
Step 2: Preview act9c(ii).html in the browser. State or draw your observation.
32
Activity 9D
Activity Outcome: Apply Padding, Margin and Center
Step 1: Open a HTML editor file and type the following. Save code as act9d.html.
<!doctype html><html>
<head><title>Padding, Margin and Center</title>
<style>
p { width: 275px;
border: 2px solid #0088dd;}
p.one { padding: 10px;}
p.two { padding: 10px 5px 3px 1px;}
p.three { padding-top: 10px;}
p.margin1 { padding: 10px;
margin:20px;}
p.margin2 { padding: 10px 5px 3px 1px;
margin: 1px 2px 3px 4px;}
p.center { padding: 10px 5px 3px 1px;
margin: 10px auto 10px auto}
</style>
</head>
<body>
<p> Without Padding </p>
<p class="one"> Padding Example 1 </p>
<p class="two"> Padding Example 2 </p>
<p class="three"> Padding Example 3 </p>
<p class="margin1"> Padding & Margin 1</p>
<p class="margin2"> Padding & Margin 2</p>
<p class="center"> If you want to center a box on the page (or
center it inside the element that it sits in), you can set the
left-margin and right-margin to auto.</p>
</body></html>
Step 2: Preview act9d.html in the browser. State or draw your observation.
33
Activity 9G
Activity Outcome: Apply different element of CSS boxes.
Step 1: Open a HTML editor file and type the following. Save code as act9g.html.
<!DOCTYPE html><html>
<head><title>Example Boxes</title>
<style>
</style></head>
<body>
<div id="page">
<div id="logo">
<img src="logo.gif" alt="The Analog" />
</div>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Repairs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>
<img src="keys.jpg" alt="Fender Rhodes"/>
</p>
<p>
We specialise in the sales and repair of classic keyboards, in
particular the Fender Rhodes and Hohner Clavinet.
</p>
</div>
</body></html>
Step 2: Preview act9g.html. State or draw your observation.
34
Step 3: Add the following CSS code inside the <style> one by one and obeserve the output.
1. body { font-size: 90%;
font-family: Arial;
letter-spacing: 0.15em;
background-color: orange;}
2. Write the CSS code for <div id=page> one by one and obeserve the output.
#page { max-width: 80%;
min-width: 720px;
background-color: #ffffff;}
Add padding and border to #page. Observe the output
padding: 20px;
border: 4px double #000;
Center the box, by setting margin for left and right values to auto.
margin: 10px auto 10px auto;
3. Write the CSS code to create horizontal menu bar using the <ul> element
a. Create a box around <ul> element that has top and bottom border
ul { width: 570px;
border-top: 2px solid #000;
border-bottom: 1px solid #000;}
Add padding to the box
padding: 15px;
Center the box, by setting margin for left and right values to auto.
Align the text to center
text-align: center;
35
b. Remove the bullets around the <li> element and disply them in single line
li { display: inline;}
The text for menus appear close to each other. Create a suitable margin around the li
element to add spaces between the text.
4. Add more style to hyperlink, the <a> element.
Change the text color to black.
a { color: black; }
Remove the underline on the <a> element.
Change the text to upppercase.
Add padding
padding: 6px 18px 5px 18px
** After you add the padding, the box cannot fit in the text. The contact menu appear in
new line. Modify the correct CSS properties so the all the menu will appear in single line
5. Add hover properties to the hyperlink. Move the cursor around the hyperlink to see the effect
of hover properties.
a:hover { color: white;
background-color: brown;}
6. Add more styling to the logo section
#logo { width: 150px;
margin: 10px auto 25px auto;}
36
