Scribd
Upload
46 views

Cascading Style Sheet (CSS) : By: Eduardo S. Rodrigo

Uploaded by

Blacksyrose
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views

Cascading Style Sheet (CSS) : By: Eduardo S. Rodrigo

Uploaded by

Blacksyrose
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Cascading Style Sheet (CSS)

By: Eduardo S. Rodrigo


Intended Learning Outcomes (ILO)
LESSON OVERVIEW

The purpose of this lesson is to describe the internet. View the historical background
of the internet and explain the contribution of each computer scientist who
contributes to the internet.

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.


Intended Learning Outcomes (ILO)
INTENDED LEARNING OUTCOMES

At the end of the lesson, the students are expected to :

1) describe what the internet is;

2) determine the contribution of the persons who made the internet possible;

3) demonstrate HTML in building webpages; and


 
4) create simple webpages using HTML and text editor.

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.


Intended Learning Outcomes (ILO)
TEACHING AND LEARNING ACTIVITIES

• Ice breaker
• Discussion
• Assessment Task

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.


Intended Learning Outcomes (ILO)
What is CSS ?

What is CSS?
• CSS stands for Cascading Style Sheets.
• CSS defines how HTML elements are to be displayed.
• CSS is a dependent script to HTML
• CSS saves a lot of work.
Intended Learning
CSS Outcomes
Selector (ILO)
Intended Learning Outcomes (ILO)
CSS Syntax

• A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly braces:

Example : p { color:red; text-align:center; }

p{
color: red;
text-align: center;
}
Intended Learning Outcomes (ILO)
Types of CSS Selectors

1) Simple Selector

ul { h1 { position: absolute;
text-align: justify; background: url(images/header.jpg) no-repeat;
text-indent: 2em; width: 259px;
font-family:arial; height: 204px;
font-size:1.em; top: 0;
left: 0;
margin-top: 120px;
margin-right: 60px;
margin-left:
15px;
}
Intended Learning Outcomes (ILO)
Types of CSS Selectors

2) ID Selector – it uses # symbol.

#shadow1 #wrapper {
{ text-align: left;
width: 150px; margin: auto;
height: 40px; width: 686px;
padding: 5px 20px; position: relative;
box-shadow: 5px 5px 3px 1px gray } }
Intended Learning Outcomes (ILO)
Types of CSS Selectors

3) Class Selector

.nav { .nav ul {
width: 259px; margin: 0;
position: absolute; padding: 37px 0 45px 64px;
top: 585px; font: 12px "Times new roman",
left: 0; "Lucida Grande", serif;
background: url(images/nav_bg.jpg)
repeat-y;
}
Intended Learning Outcomes (ILO)
Three Ways to Insert CSS

There are three ways of inserting a style sheet:


1. External style sheet
2. Internal style sheet
3. Inline style
Intended Learning Outcomes (ILO)
Three Ways to Insert CSS

1. External style sheet

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Intended Learning Outcomes (ILO)
Three Ways to Insert CSS

2. Internal style sheet <head>


<style>
body
{
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Intended Learning Outcomes (ILO)
Three Ways to Insert CSS

3. Inline style sheet


<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;margin-
left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>

</body>
</html>
Intended Learning Outcomes (ILO)
What is CSS ?
Intended Learning Outcomes (ILO)
Summary of the Lesson

In this lesson, we were able to describe the internet as the global system of
interconnected computer networks. We have discussed some important dates
pertaining to the historical overview of the internet and we have mentioned some
important persons who made the internet possible. They are Leonard Kleinrock,
Larry Roberts, Vint Cerf, and Robert Kahn, Raymond Tomlinson, Sir Tim Berners-Lee,
Barry Shein, Tim Berners lee, and lastly Marc Andersen and Eric Bina who created the
first web browser.

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.


Intended Learning Outcomes (ILO)
References

1) What is Internet?, (2020) Retrieved from https://en.wikipedia.org/wiki/Internet

2) What is Internet, (2020) Retrieved from https://www.britannica.com/technology/Internet


3)  History of the Internet, (2020) Retrieved from https://sciencenode.org/feature/a-brief-history-of-the-
internet-.php

4)  Persons who made the Internet Possible, (2020) Retrieved from
      https://home.bt.com/tech-gadgets/internet/11-people-who-made-the-internet-possible-11363996346738

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.


Proprietary Clause :
Property of Technological Institute of the Philippines (TIP).
No part of the materials, made and uploaded in this learning management system by
TIP may be copied, photographed, printed, reproduced, shared, transmitted, or
reduced to any electronic medium or machine-readable form, in whole or in part,
without prior consent of TIP.

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

You might also like