Scribd
Upload
80 views

Lab Activity 9 CSS Boxes and Horizontal Menu

This document provides instructions for a lab activity on CSS boxes and horizontal menus. The activity involves: 1. Controlling box dimensions with properties like width, height, padding, and margin. 2. Creating borders around boxes using properties like border-style, border-width, and border-color. 3. Centering boxes on the page using auto margins. 4. Styling an unordered list for a horizontal navigation menu, including removing bullets, adding padding and borders, and centering the menu. 5. Additional styling for hyperlinks like changing text color and removing underlines. The goal is to learn how to style boxes and create horizontal menus using CSS.

Uploaded by

F1064 Zul Fitri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
80 views

Lab Activity 9 CSS Boxes and Horizontal Menu

This document provides instructions for a lab activity on CSS boxes and horizontal menus. The activity involves: 1. Controlling box dimensions with properties like width, height, padding, and margin. 2. Creating borders around boxes using properties like border-style, border-width, and border-color. 3. Centering boxes on the page using auto margins. 4. Styling an unordered list for a horizontal navigation menu, including removing bullets, adding padding and borders, and centering the menu. 5. Additional styling for hyperlinks like changing text color and removing underlines. The goal is to learn how to style boxes and create horizontal menus using CSS.

Uploaded by

F1064 Zul Fitri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like