MODULE 12: Introduction to Cascading Style Sheets

Introduction to cascading style OBJECTIVES

sheets Content Standards:
The learner demonstrates
MODULE 12
understanding in the use of
Cascading Style Sheet 3.
Performance Standards:
The learner shall be able to use
CSS3 in creating website.
Most Essential Learning
Competencies:
12.1 Understand how Cascading Style
Sheets (CSS) can be used to add
fantastic layout to your pages.
12.2 Manipulate the appearance of web
page elements through Cascading
Style Sheets;

INTRODUCTION

CSS is a language that defines style constructs such as fonts, colors, and
positioning, which describe how information on a web page is formatted and
displayed.
Cascading Style Sheets or CSS has given web designers and developers
alike the ability to incorporate stylish and creative elements into the overall
design of applications. This provides a lot of flexibility by providing an almost
limitless set of opportunities, which improves the overall user experience.
The following questions deal with the fundamental concepts and
principles of this module:
 What is Cascading Style Sheets (CSS)?
 What are the syntax and types of CSS?
 What are the basic commands when creating a website?
 MODULE 12: Introduction to Cascading Style Sheets

DATA INPUT

Cascading Style Sheets

Cascading Style Sheets (CSS) is a language used for designing Hypertext Markup
Language (HTML) documents.
The cascading part of the name CSS refers to how stylesheet rules are applied to
elements in an HTML document.
A stylesheet is a grouping of formatting instructions that control the appearance
ofseveral HTML pages at once.

CSS Advantages
These are the advantages of designing a website using CSS:
1. Consistency
A consistent style of multiple web pages on a website is possible with CSS, thus
saving us more time in designing.
2. Bandwidth reduction
The file transfer size is being reduced since styles in CSS are accessed only once,
resulting in a faster loading time of a web page.
3. Browser Compatibility
CSS increases our websites' adaptability to be viewed by more visitors on their chosen
web browsers.
4. Accessibility
A website can be viewed using any preferred devices.

CSS Styles
There are three (3) styles that we can use to design an HTML document.
1. External style sheet. It is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire web site by changing to
the CSS style sheet file.
2. Internal style sheet. This applies styles to a single page or style sheet. An internal
style sheet should be used when a single document has a unique style.
3. Inline style sheet. It specifies or defines a style to a single element on a web page.

CSS Syntax
We can specify the style using this syntax: selector{property:value;}
 A selector is the HTML element you want to format.
 A declaration consists of a set of properties and its value that are separated by a
colon (:). It ends with a semicolon (;).
 A declaration block has a property and a value surrounded by curly braces ({}). It
performs the actual formatting of the selected element.
 A property is the aspect of the selector to style.
 A value is the chosen value of the property.
 MODULE 12: Introduction to Cascading Style Sheets

The figure below summarizes this:

In this case, the rule specifies that all the level 1 headings will be pink in color and
have a font size of 10.

Saving a CSS File in Notepad++

External style sheets are the only CSS file saved separately to its HTML document. In
saving a CSS file, both CSS and HTML files must be located in the same folder. Once you
enter the file name for your document, make sure that the file type is set to "Cascade Style
Sheets File (*.css)"

File Management
When working on a website, a common and best practice is to place all files, such as
HTML and CSS files, photos, and videos, in one (1) folder that is our main folder so we can
easily retrieve them as we work on our website.

Format
We also follow a format when we write
CSS styles, which help us navigate and review our codes.
In this example, the body and h1 selectors are
vertically aligned. The declarations (background-color,
color, and margin-left) are indented, and each is placed
in the next line.

Comments
A comment is a string of non- executable text
included in code as a means of explaining the code. It is
helpful when you or someone else edits the source code
at a later date.
In CSS, a comment starts with /* and ends with */.
A comment can span more than one line. The example
besides demonstrates how comments are used:
 MODULE 12: Introduction to Cascading Style Sheets

DATA CHECK

I. TRUE OR FALSE
Direction: Read each statement carefully. On the space provided, write TRUE if the
statement is correct, otherwise, write FALSE.

______1. The declarations of a selector are separated with colons (:).

______2. The external style sheet applies styles to a single page or style sheet.
______3. The CSS file is represented by a gear icon once saved.
______4. A stylesheet is a grouping of formatting instructions that control the
appearance of several HTML pages at once.
______5. In CSS, a comment starts with*/ and ends with /* .
______6. The inline style sheet defines a style to a single element on a web
page.
______7. CSS increases our websites' adaptability to be viewed by more visitors on
their chosen web browsers.
______8. The declaration block has a property and a value surrounded by curly
braces ({}).
______9. CSS stands for Cascading Style Sheets.
______10. The file extension when saving a CSS file is .css.

REFERENCES

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web Development
Teachers Wraparound Edition
Learn to Code with Me. CSS Basics: Learn More About Cascading Style Sheets. Retrieved from
https://tinyurl.com/y4edupqo
HTML Basic.Retrieved from https://www.w3schools.com/html/html_basic.asp
HTML.COM. (2020, Jan 1) HTML For Beginners The Easy Way:Start Learning HTML &
CSS Today. Retrieved from
https://html.com/#Welcome_You8217ve_Found_the_Easiest_Way_to_Learn_HTML
_and_CSS
MDN. Getting Started with HTML. Retrieved from
https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
Rwanda Education Board. (2019). Cascading Style Sheet. Retrievedfrom
https://tinyurl.com/y5h5mhnf
MODULE 12: Introduction to Cascading Style Sheets

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa

ANSWER KEY

1. True 6. True
2. False 7.True
3. True 8. True
4. True 9. True
5. False 10. True