Information and Communication Technology - Laboratory

REPUBLIC OF THE PHILIPPINES
TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

Manila
COLLEGE OF INDUSTRIAL EDUCATION
Information and Communication Technology - Laboratory
Activity Sheet no. 10
Name: Kathyrine Mae M. Añonuevo Date Accomplished: October 7, 2020
Course/Year &Section: BSIE-HE-1A
TITLE: DESIGNING WEBPAGE CSS
I. Description
CSS stands for Cascading Style Sheets, it is a simple design language intended to

simplify the process of making web pages presentable. CSS handles the look and feel
part of a web page. Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs, variations in display for
different devices and screen sizes as well as a variety of other effects.
CSS gives us the opportunity to play with a page layout, adjust colors and fonts, add
effects to images. It is a highly effective HTML tool that provides easy control over
layout and presentation of website pages by separating content from design.
II. Objective
1. To know basic techniques on how to apply CSS to your own webpage.

2. Explains how to create an HTML file, a CSS file and how to make them work
together.
3. To simplify the process of making web page that allows web designers,
developer, bloggers, and so forth to make their websites unique and attractive.
III. Requirements
1. Hardware – Laptop
2. Software – Notepad, Google Chrome/Internet Explorer, Microsoft Word
Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

Submitted to: Prof. Jovylon B. Canencia Page number: Page 1 of 8
Manila
IV. Procedure
1. You need to create a web page first. Then open it with Notepad.
You probably see some black text on a white background,

Manila
2. So, one easy thing we can do to make the page more stylish is to add some colors.
In changing background color of webpage, you need to add a <style>, </style>
element to the HTML file. The style sheet will be inside that element.
(Leave the browser open, you will use it again later.)
After “<style>”, add the following tags:
body {
background-color: pink;
} Color you want to be on your webpage background
Before
Changes

Manila
3. Next, adding color to your webpage texts/fonts, you need to add the following
tags:
h1 {
color: red; Font color
}
Before
Changes
4. Add some block behind your text to look more presentable. Add the following tag
to your h1 element:
background-color:white; Block color
Changes

Manila
5. After adding some colors to your webpage, let’s proceed on styling your
fonts/texts displayed on your webpage.
Insert this tag:
font-family: Valeyola; Font style
on h1 element below the following style sheets tag.
Changes
When choosing a font style, just go to Microsoft Word’s font style list and look
for the font style you want to use on your webpage texts, copy the name of the
font style and paste it to your font-family tag.

Manila
6. Center your content on the webpage. To set your texts to the center of the
webpage, insert this tag:
text-align: center;
Before
Changes
7. When you’re done styling, don’t forget your closing style sheet tag to make an
effect. </style>
8. Repeat the procedure or just copy the style sheet tags and insert it to the other
elements. <h2>,<h3>,<p>.

Manila
HTML Webpage
Applied CSS

Manila
V. Reflection
1. What I have learn in this activity is all about the basic techniques on applying CSS to
a webpage that really improved my adaptability skills.
2. I have known the purpose of CSS, it is the way to define, apply, and manage sets of
style characteristics such as adding fonts styles, font colors, setting alignment of
content, and changing the webpage background color to make your webpage look
presentable.
3. Today, I’m inspired to know more about creating webpage not only in html but also
the other latest online software for creating a website.
4. It was nice to discover the different tags of CSS because whenever those tag works in
me, it is really satisfying to figure out things on your own.
5. I appreciate the value of CSS even more, because it is very useful for people
especially to web developers and bloggers that enables their website to be more
attractive and presentable.
VI. Reference/s
1. http://ieatcss.com/css-tutorial.html
VII. Output
 Kathyrine's%20Web%20Site.html
 https://www.youtube.com/watch?v=G8r8Am3TK9I


Information and Communication Technology - Laboratory

Uploaded by

Copyright:

Available Formats

Information and Communication Technology - Laboratory

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Information and Communication Technology - Laboratory

Uploaded by

Copyright:

Available Formats

REPUBLIC OF THE PHILIPPINES

TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

Activity Sheet no. 10

Name: Kathyrine Mae M. Añonuevo Date Accomplished: October 7, 2020

Course/Year &Section: BSIE-HE-1A

TITLE: DESIGNING WEBPAGE CSS

CSS stands for Cascading Style Sheets, it is a simple design language intended to

1. To know basic techniques on how to apply CSS to your own webpage.

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

You probably see some black text on a white background,

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

After “<style>”, add the following tags:

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

background-color:white; Block color

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

Prepared by: Kathyrine Mae M. Añonuevo Date submitted: 10/07/2020

You might also like