Name: Presentation1.pptx gely and sandy
Uploaded: 2026-03-09
Duration: 4 min 8 s
Description: CSS Cascading Style Sheets ICT: Website Creation Prepared by: Angelyn Vicente Sandro Peralta March 6 2026.

[Audio] CSS Cascading Style Sheets ICT: Website Creation Prepared by: Angelyn Vicente Sandro Peralta March 6 2026. 

Scene 1

CSS            Cascading Style Sheets                         ICT: Website Creation

Prepared by:                Angelyn Vicente               Sandro Peralta                 March 6 2026

[Audio] Activity: Website Comparison. Activity: Website Comparison. 

Scene 2

[Audio] Guide Questions: 1. Which website do you prefer to look at? 2. Why does the second website look more attractive? 3. What do you think is used to design or style a website?. 

Scene 3

Guide Questions: 1. Which website do you prefer to look at? 2. Why does the second website look more attractive? 3. What do you think is used to design or style a website?

[Audio] Learning Objectives At the end of the lesson, students will be able to: Define CSS and its purpose in web design. Identify the basic structure of CSS syntax (selector, property, value). Differentiate the three types of CSS: Inline, Internal, and External. Apply basic CSS styles to an HTML example.. 

Scene 4

At the end of the lesson, students will be able to:  Define CSS and its purpose in web design.  Identify the basic structure of CSS syntax (selector, property, value).  Differentiate the three types of CSS: Inline, Internal, and External.  Apply basic CSS styles to an HTML example.

[Audio] What is CSS? CSS stands for Cascading Style Sheets. - It is used to design and format web pages written in HTML. - It controls colors, fonts, spacing, and layout.. 

Scene 5

CSS stands for Cascading Style Sheets.     - It is used to design and format web    pages written in HTML.      - It controls colors, fonts, spacing, and layout.

[Audio] Why Do We Use CSS? - Adds colors to text and backgrounds - Changes fonts and text sizes - Controls layout and spacing - Improves the appearance of websites - Makes websites responsive. 

Scene 6

- Adds colors to text and backgrounds - Changes fonts and text sizes - Controls layout and spacing - Improves the appearance of websites - Makes websites responsive

[Audio] Basic CSS Syntax CSS works with selectors and declarations. Structure: selector Example p Explanation: p → selector (targets paragraph elements) color → property blue → value font-size → property 18px → value This code makes all paragraphs blue and 18 pixels in size.. 

Scene 7

CSS works with selectors and declarations.     Structure: selector Example p Explanation: p → selector (targets paragraph elements) color → property blue → value font-size → property 18px → value This code makes all paragraphs blue and 18 pixels in size.

[Audio] HTML with CSS Example <!DOCTYPE html> h1 p Welcome to My Website
This is a paragraph styled using CSS. Output: The heading appears red and centered The paragraph text appears green with size 16px -The heading becomes centered and colored. - The paragraph text changes size and color.. 

Scene 8

<!DOCTYPE html>
<html>
<head>
<style>
h1

p 
</style>
</head>

<body>

<h1>Welcome to My Website</h1>
<p>This is a paragraph styled using CSS.</p>

</body>
</html> Output: The heading appears red and centered The paragraph text appears green with size 16px

-The heading becomes centered and colored. - The paragraph text changes size and color.

[Audio] Types of CSS Inline CSS – applied inside an HTML element Hello Internal CSS – placed inside the tag in the section. External CSS – stored in a separate .css file and linked to HTML. Example:. 

Scene 9

Types of CSS Inline CSS – applied inside an HTML element <p style="color:red;">Hello</p> Internal CSS – placed inside the <style> tag in the <head> section. External CSS – stored in a separate .css file and linked to HTML. Example: <link rel="stylesheet" href="style.css">

[Audio] Internal CSS Example Internal CSS is CSS written inside the tag in the section of an HTML document. It is used to style a single web page.. 

Scene 10

Internal CSS Example Internal CSS is CSS written inside the <style> tag in the <head> section of an HTML document. It is used to style a single web page.

[Audio] Example 1: Basic Internal CSS <!DOCTYPE html> body h1 p My First Internal CSS Page
This paragraph is styled using internal CSS.. 

Scene 11

Example 1: Basic Internal CSS <!DOCTYPE html>
<html>
<head>
<style>
body

h1

p
</style>
</head>

<body>

<h1>My First Internal CSS Page</h1>
<p>This paragraph is styled using internal CSS.</p>

</body>
</html>

[Audio] External CSS Example External CSS is a separate CSS file used to style one or more web pages written in HTML. The CSS code is saved in a .css file and linked to the HTML file. This method is commonly used because it allows multiple web pages to share the same design. ________________________________________. 

Scene 12

External CSS Example External CSS is a separate CSS file used to style one or more web pages written in HTML. The CSS code is saved in a .css file and linked to the HTML file. This method is commonly used because it allows multiple web pages to share the same design. ________________________________________

[Audio] Step 2: Create the HTML File <!DOCTYPE html> External CSS Example Welcome to My Website This paragraph is styled using external CSS. Step 1: Create the CSS File (style.css) body h1 p. 

Scene 13

Step 1: Create the CSS File (style.css) body
 h1
 p

Step 2: Create the HTML File <!DOCTYPE html> <html> <head> <title>External CSS Example</title> <link rel="stylesheet" href="style.css"> </head>
 <body>
 <h1>Welcome to My Website</h1> <p>This paragraph is styled using external CSS.</p>
 </body> </html>

spar/video1/100315/presentation1_pptx_gely_and_sandy_p8e40eba8/mp4_subtitles_sBSA62p2ZK.mp4

Presentation1.pptx gely and sandy

CSS            Cascading Style Sheets                         I-C-T--: Website Creation


 Prepared by:                Angelyn Vicente               Sandro Peralta                 March 6 2026

avatar

Learning Objectives 
 At the end of the lesson, students will be able to:  Define C-S-S and its purpose in web design.  Identify the basic structure of C-S-S syntax (selector, property, value).  Differentiate the three types of C-S-S--: Inline, Internal, and External.  Apply basic C-S-S styles to an H-T-M-L example.

What is C-S-S-?
 CSS stands for Cascading Style Sheets.      It is used to design and format web    pages written in HTML.       It controls colors, fonts, spacing, and layout.

Why Do We Use C-S-S-?
  Adds colors to text and backgrounds  Changes fonts and text sizes  Controls layout and spacing  Improves the appearance of websites  Makes websites responsive

Basic C-S-S Syntax
  C-S-S works with selectors and declarations.     Structure: selector  Example p  Explanation: p → selector (targets paragraph elements) color → property blue → value font size → property 18px → value This code makes all paragraphs blue and 18 pixels in size.

H-T-M-L with C-S-S Example
 <!DOCTYPE html>
<html>
<head>
<style>
h1 

p  
</style>
</head>

<body>

<h1>Welcome to My Website</h1>
<p>This is a paragraph styled using CSS.</p>

</body>
</html> Output: The heading appears red and centered The paragraph text appears green with size 16px
 -The heading becomes centered and colored.  The paragraph text changes size and color.

Types of C-S-S Inline CSS – applied inside an H-T-M-L element <p style="color:red;">Hello</p> Internal CSS – placed inside the <style> tag in the <head> section. External CSS – stored in a separate .css file and linked to H-T-M-L-. Example: <link rel="stylesheet" href="style.css">

Internal C-S-S Example Internal C-S-S is C-S-S written inside the <style> tag in the <head> section of an H-T-M-L document. It is used to style a single web page.

Example 1: Basic Internal CSS <!DOCTYPE html>
<html>
<head>
<style>
body 

h1 

p 
</style>
</head>

<body>

<h1>My First Internal C-S-S Page</h1>
<p>This paragraph is styled using internal CSS.</p>

</body>
</html>

External C-S-S Example External C-S-S is a separate C-S-S file used to style one or more web pages written in H-T-M-L-. The C-S-S code is saved in a .css file and linked to the H-T-M-L file. This method is commonly used because it allows multiple web pages to share the same design. ________________________________________

Step 2: Create the H-T-M-L File <!DOCTYPE html> <html> <head> <title>External C-S-S Example</title> <link rel="stylesheet" href="style.css"> </head>
 <body>
 <h1>Welcome to My Website</h1> <p>This paragraph is styled using external CSS.</p>
 </body> </html>
 Step 1: Create the C-S-S File (style.css) body 
 h1 
 p 

Presentation1.pptx gely and sandy

Scene 1 (0s)

Scene 2 (13s)

Scene 3 (22s)

Scene 4 (36s)

Scene 5 (1m 1s)

Scene 6 (1m 15s)

Scene 7 (1m 29s)

Scene 8 (2m 0s)

Scene 9 (2m 26s)

Scene 10 (2m 49s)

Scene 11 (3m 6s)

Scene 12 (3m 21s)

Scene 13 (3m 45s)