Scribd
Upload
38 views11 pages

Lesson 1 4q g10

Uploaded by

Anjel Rhada Mae Estoesta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views11 pages

Lesson 1 4q g10

Uploaded by

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

JUNIOR HIGH SCHOOL DEPARTMENT

S.Y. 2022 - 2023

LEARNING MODULE IN COMPUTER

4th Quarter - Lesson No. 1

WORKING WITH STYLE SHEETS

MS. CRIZEL U. CORPUZ


PROGRAM
Outcome/s

All SPCEM Graduates Qualified for further advanced education/training can:


PO2: Perform their basic and specialized skills at levels that meet or exceed established standards and specifications in
their respective fields.

EPO8: Openly demonstrate their basic and advanced skills in


Subject Essential
Performance Outcome (EPO) chosen TLE programs as experienced individuals and
improve them according to the feedback they receive.
(LPO4)

Applied Performance APC1: Contribute their time, heartfelt attention, abilities, and resources
Commitment (APC) in directly assisting those who live with little hope of improving their
lives and the community. (LPO5)

Learning Performance
Outcome

I am a conscientious, ADEPT PERFORMER and


ACHIEVER, competently pursuing my MISSION IN LIFE.
Intended Learning
Outcome (ILOs)

Differentiate embedded, linked and external CSS and openly demonstrate basic skills at levels that meet or
exceed established standards and specifications in creating an HTML document with the help of the Cascading
Style Sheet attributes and elements as experienced individuals and improve them according to the feedback they
receive as an adept performer and achiever. (EPO8, LPO4, PO2)
FIRM UP

WHAT IS CSS?

CSS or Cascading Style Sheets allow you to control the layout of your HTML document. It is a simple
way to add style such as font, colors or spacing usually a text file that is separate from your HTML file. HTML
is used to the page’s content while CSS is used to define how the content and web page will look. With CSS
you will recognize some similarities with HTML attribute names and values. But in CSS you will use curly
braces {} colons: and semi – colons ; and you will use selectors and declarations.
If you want to apply the formatting from separate CSS file to the HTML document, you attach the style
sheet to the page using a link tag. You can link all your web pages to a single CSS file. Any changes you make
to the file are then reflected on all your web pages making it easy to update the layout of your pages.

CSS STRUCTURE

CAPABILITIES OF CSS
1. CSS makes updating web pages easy. CSS makes it possible to update the layout of the entire page
quickly. You can also specify a style once and you can apply it repeatedly in your document.
2. Position objects on the page. CSS gives you control when placing objects on the page exactly where
you want them.
3. Layer objects on the page. CSS allows you to position objects on three dimensions.
4. Create custom tags. CSS allows you to create custom tags to achieve specialized objectives.

ADVANTAGES OF USING CSS

1. Save typing and development time because you have to enter CSS code only once and it can be
applied to many HTML scripts.
2. Download faster because your browser will download only one file once.
3. You can also add multiple link tags in one
document.
THREE (3) KINDS OF CSS
EXTERNAL  These are the most global of the three kinds of CSS because you can apply the same
STYLE SHEETS one to an unlimited number of pages.
 They allow you to develop a consistent style across pages.
 They easily allow you to change the layout of your entire website by simply
changing the external style sheet and every page is instantly updated.
 External CSS file has a .css file extension.

Ex: <link rel= “CSS” title= “Default” href= “style.css” type= “text/css”>

EMBEDDED  These are used for creating a document – wide style rule.
STYLE SHEETS  They are placed within an HTML document, between the <head> and </head>
(Internal Style
Sheets) Ex: <style type= “text.css”>

 They are also used when you have a page that you want to present in a different style
from other pages.
 Embedded style sheets override external style sheets.

INLINE STYLE  These are used for isolated changers to a headline, paragraph, picture or other
SHEETS element.
 Inline style sheets override external and embedded style sheets.

Ex: <p style= “background-color: gray;”>

NOTE:
There are two things that you should remember when using the CSS code.
1. The type attribute should always be <style type= “text/css”>
2. CSS code should be enclosed in HTML comments <!-- … --> so that in a web browser that does not
understand CSS will not see the CSS code. Today, however, all current browsers support CSS.

CSS2 and CSS3


CSS2 is the version that is best supported across browsers.CSS3 is still evolving and is natural extension of
the previous version of CSS. CSS3 introduces many visual effects such as drop shadows, text shadows, rounded
corners and gradients. The good thin about CSS is it can be created outside of a web page and then applied to all
the pages on your site at once, saving you a lot of time to layout and design your page.

Inline Styles
You can define the style for a single element using the style attribute.
There are various tags that have the style attribute that
would represent its value.
OUTPUT:

As seen in the preceding example, style= “font-family: Arial” made the paragraph with it to be written in a
different typeface compared to the first and second paragraph. This type of CSS is called inline styles because it
is exactly located where the content is.
In this line font-family: Arial, font- family is called property and Arial is its value.

NOTE:
You can add as many attributes you like as long as you place a semi – colon and familiarize yourself with
the syntax for the values that you can place there.
Ex: style= “font – family: Arial, Helvetica, Verdana; color: Red; text-align: justify”

EMBEDDED STYLES
Embedded styles or internal style sheets are defined by the container tag <style></style> and
placed within the head part of the HTML file. It provides style to the whole HTML file.

ATTRIBUTE FOR <style></style>


Attribute Definition
Values
type Indicates the type of style. text/css

Ex:<style type=
“text/css”>…</style>

Inline styles are put on the exact tag where the style will be implemented while embedded styles take
rather a different approach since it is a document – wide style. Here is an example of how an embedded style is
used:

OUTPUT:

NOTE:
In the preceding example, the head part contains an embedded style that writes all paragraphs in the web
page in Arial typeface and in red.
Notice too that the attributes are enclosed with braces. The open brace has a p (representing <p></p>,
called selectors) before it, signifying that all attributes within the open brace up to the next closing brace will be
affecting all paragraphs (or contents encased in <p></p>)0 in the whole HMTL file. That’s why all paragraphs
in the preceding example were affected. Thus, embedded styles are document-wide styles.
The next example, illustrates another CSS embedded style that uses h1 as the selector. The h1 selector
will change the attributes of the h1 to the specified color. In this example, blue color is indicated by heading h1.
Since the font is not specified, it will retain the default font in the browser, which is Times New Roman.
OUTPUT:

LINKED STYLES

External style sheets or linked styles are made outside the HTML file. An external style sheet is
linked via <link>. The <link> element allows you to establish document relationships. The <link>
element tells the browser to find the specified style sheet. It can only be used within the
<head></head> section of the documents. The style sheet file does not contain any HTML code; it
contains only style rules.
A CSS file is a style sheet that does not contain anything but the styles. In order for it to take
effect, it needs to be linked.
Just like HTML files, CSS files can be written in any text editor then saved with a file extension
of .css. remember to change the file type to All Files.
With external style sheets, you can modify many web pages by just modifying one CSS file.

CREATING AN EXTERNAL CSS FILE


The following steps will show you how to create and test a basic style sheet. Save your file and test or view
your output in the browser.
1. Open a new blank document in Notepad.
2. Type the style you want to define.
3. On the Menu bar, click File and click Save.
4. Type your file name with a file extension .css and change the file type to All Files.

LINKING CSS FILE TO HTML FILE

1. After creating your CSS File, open your HTML file.


2. Type the following inside the HTML file: <link rel= “stylesheet” href= “jemmainc.css” type=
“text/css”/>
3. Save your HTML file.

Jemmainc.css CODE:
OUTPUT:

NOTE:
The example below shows how the CSS file changes the background of the page.

JEMMAINC.CSS CODE:

OUTPUT:
CSS COMMENTS

Comments are used to explain the code, and will help you edit the source code on a later date.
Comments are ignored by the browsers; therefore, you can place notifications, reminders and help you increase
code readability. A CSS comment starts with /P and ends with */. Comments can also span multiple lines.

OUTPUT:

You might also like