Scribd
Upload
17 views

Computer 10 Lesson 1

CSS allows you to control the layout and formatting of HTML documents. There are three types of CSS - external style sheets, embedded style sheets, and inline styles. External style sheets are the most globally applied as they can change the layout of an entire website by linking all pages to a single CSS file. Embedded style sheets use the <style> tag within the <head> of an HTML page to apply styles document-wide. Inline styles directly apply formatting to specific elements using the style attribute.

Uploaded by

Ahn Ne
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Computer 10 Lesson 1

CSS allows you to control the layout and formatting of HTML documents. There are three types of CSS - external style sheets, embedded style sheets, and inline styles. External style sheets are the most globally applied as they can change the layout of an entire website by linking all pages to a single CSS file. Embedded style sheets use the <style> tag within the <head> of an HTML page to apply styles document-wide. Inline styles directly apply formatting to specific elements using the style attribute.

Uploaded by

Ahn Ne
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CATHOLIC SCHOOLS IN IFUGAO

FOURTH QUARTER- A.Y 2022-2023


COMPUTER 10 LEARNING PACKAGE

Lesson 1: Cascading Style Sheets: Working with Style Sheets

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, CSS is usually a text file that is separate from your HTML file. HTML is used to
define 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 { } colors : and semi colons ;
and you will use selectors and declarations.
If you want to apply 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
Curly braces colon Semi colon

Selector p {
color : red ; Declaration block

} value

Property
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 place exactly where you want
them.
3. Layer objects on the page. CSS allows you to position objects in three dimensions.
4. Create Custom tags. CSS allows you to create custom tags no achieved 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 KINDS OF CSS
External Style Sheets These are the most global of the three kinds of CSS
because you can apply the same one to an unlimited style
across pages. They easily allow you to change the layout of
your entire web site by simply changing the external style
sheet and every page is instantly updated.
Ex. <link rel=”CSS” title=”default” href=”style.css”
type=”text/css”>
Embedded Style Sheets (Internal Style Sheets) These are used for creating a document-wide style rule.
They are placed within a HTML document, between the
<head> and </head>.
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 Sheets These are used for isolated changes to a headline,
paragraph, picture or other element. Inline style sheets
override external and embedded style sheets.
Ex. <p style=”background-color : gray;”>
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 always be enclosed in HTML comments <!- - … - -> so that in a web browser that does
not understand CSS will not see CSS code.
Today, however, all current browsers support CSS.
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. <html>
<head>
<title> Paragraphs</title>
</head>
<body>
<p> This is the first paragraph.</p>
<p>This is the second paragraph.</p>
Inline style <p style=”font-family: Arial; color: red”>
This is the third paragraph.
</p>
</body>
</html>

Inline style applied


to a paragraph

As seen in the preceding example, style=”font-family: Arial” made the paragraph with it to be written in a different type
face 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.

Embedded Styles
Embedded styles or internal stule 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:
<html>
<head>
<title> Paragraphs</title>
<style type=”text/css”>
p{
Embedded style font-family:Arial;
color: red
OUTPUT }
</style>
</head>
<body>
<p> This is the first paragraph.</p>
<p>This is the second paragraph.</p>
All of the paragraphs are
<p>This is the third paragraph.</p>
affected by the style
</body>
within the document of
</html>
the embedded style sheet

In the preceding example, the head part contains an embedded style that writes all paragraphs 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>) in the whole HTML file. That’s why all paragraphs in the preceding example
were affected. Thus, embedded styles are document wide styles.

Linked Styles
External style sheet 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 relationship. The <link> element tells the browser to find the
specified style sheet. It can only be used within the <head></head> section of the document. The style sheet file does not
contain any HTML code; it contains only style rules.
Just like HTML files, CSS can be written in any text editor then saved with a file extension of .css. Remember to change the
fyle type to All Files. With external style sheets, you can modify many web pages by just modifying on one CSS file.
Creating an External CSS File
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=”cssfilename.css” type=”text/css”/>
3. Save your HTML file.

You might also like