BASIC EDUCATION DEPARTMENT

COMPUTER 8 MODULE
SY 2022-2023 I THIRD QUARTER

Date: February 13 - 24, 2023

I. LEARNING OUTCOMES

At the end of this module, you should be able to:

1. Explain how a style sheet works.
2. Apply the internal and external style sheet in web documents

II. TOPICS
Lesson 7: Uniform Design Using Cascading Style Sheets

 Style sheet

III. RESOURCES
 Textbook
 Powerpoint Presentation

IV. VALUES/CHARACTER INTEGRATION

“If you cannot do great things, do small things in a great way. ”
-Napoleon Hill

“The LORD is kind and merciful, patient and full of love. ”

-Psalm 145:8

ACAD-BED -FM-045 Rev 0 Effective 15 Nov 2021

 V. INTRODUCTION
Style Sheets is a set of rules that defines the format of web pages or the way the content is
presented. An example is defining paragraph styles. The order the rules are stated is such that
they “cascade” from one level to another – thus the name Cascading Style Sheet (CSS)
The style sheet code can be added to a page or exist on a separate file that is used by many
web pages. It is possible to have rules override others according to their use.

VI. BODY
Style Sheet
 A web style sheet is a separate code that manipulates the overall look of the elements of your
HTML

Three different ways to insert CSS into your HTML document:

 Inline
 Internal
 External

 Inline Style Sheet – In this style, rules are directly embedded to an HTML element using the
STYLE attribute.
This style is suitable to use when doing only a particular change in any HTML element.
Instead of defining the style once, you may only apply the style to the instance you want the
style to be applied

Example code using inline style sheet

ACAD-BED -FM-045 Rev 0 Effective 15 Nov 2021

  Internal Style Sheet – This style defines rules in the header section of the HTML document
using <style> tag.
It is suitable to use if the style sheet rules are only applied to a single document

Example code using inline style sheet

 External Style Sheet - This style defines rules in a separate .css file and does not
contain any document content or element.
It embeds the file in an HTML document using the <link> tag.
It is advisable to use if the user needs styling for various pages.
Linking the external CSS file is similar to placing media content of your page, the
directory should be part of the code.
If you type the filename only, it means the CSS file should be in the same folder as
the HTML.

ACAD-BED -FM-045 Rev 0 Effective 15 Nov 2021

  Tag has attributes given as follows:
• rel - when using an external style sheet on a web page, this attribute takes the 2 value
“stylesheet.”
• type – when using an external style sheet on a web page, this attribute takes the value
“text/css.”
• href – indicates the name and location of the external style sheet to be used.

CSS RULES
Multiple style sheets can be applied in on page. Uses can apply an inline style sheet and an
internal style sheet or an internal and external style sheet at the same time.
However, there is a hierarchy to consider what style sheet has the highest priority.

CSS has two common types of selectors which are: ID and class.
Classes and IDs make it possible to specify a particular style for a variety of tags. They can also be
used to define different styles for the same HTML tag
 The class selector is used to specify a style for a group of elements. This will allow users to
set a particular style for HTML elements with the same class.

ACAD-BED -FM-045 Rev 0 Effective 15 Nov 2021

 Class selector as part of the html code

 ID Selector is used to indicate a style for single and unique element. This is defined with #
sign before the name.
The ID selector can be used in an internal or external style sheet.

Id selector as part of the html code

VII. SUMMARY/CONCLUSION
Style Sheets represent a major breakthrough for Web page designers, expanding their ability to
improve the appearance of their pages. Style sheets make it easy to specify the amount of white
space between text lines, the amount lines are indented, the colors used for the text and the
backgrounds, the font size, and the style, and a host of other details.

ACAD-BED -FM-045 Rev 0 Effective 15 Nov 2021

 VIII. ASSESSMENT
Individual Activity
Apply the internal and external style sheet in your web documents

IX. REFERENCES
A. Textbook
D-WHIZ in ICT Skills Development (Web Development Using HTML, CSS, JavaScript)
Worktext in Computer Education 8
Pages 126- 137.

Submitted by:

MARYELA D. PILAYAN, LPT

Subject Teacher

Checked by:

LOIDA C. RAMILO, LPT

Department Coordinator
Noted by:

TITA C. AGSUNOD, LPT, PHD

Basic Education Principal

ACAD-BED -FM-045 Rev 0 Effective 15 Nov 2021