[go: up one dir, main page]
Scribd
Upload
156 views4 pages

Text Formatting Using Cascading Style Sheet: Pre-Test

This document provides a lesson on using cascading style sheets (CSS) to format text on web pages. It discusses several CSS text properties including text decoration, text transformation, letter and word spacing, text indent, text shadow, and debugging errors in CSS code. Examples are given to demonstrate how to use these properties to style headings, paragraphs, and other elements. The goal is to teach advanced typography techniques for formatting text on web pages using CSS.

Uploaded by

Rachelle Ramos Cahayon
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
156 views4 pages

Text Formatting Using Cascading Style Sheet: Pre-Test

This document provides a lesson on using cascading style sheets (CSS) to format text on web pages. It discusses several CSS text properties including text decoration, text transformation, letter and word spacing, text indent, text shadow, and debugging errors in CSS code. Examples are given to demonstrate how to use these properties to style headings, paragraphs, and other elements. The goal is to teach advanced typography techniques for formatting text on web pages using CSS.

Uploaded by

Rachelle Ramos Cahayon
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/ 4

GRADE 11

Q1|
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
W5
TEXT FORMATTING USING CASCADING STYLE SHEET

PRE-TEST
Instructions: Select the letter that corresponds to correct answer.
________1. Which among these is not part of the text decoration property?
a. Border b. Overline c. Underline d. Strikethrough
________2. Which among the following is not included in the text transformation property?
a. Changing the text to lowercase c. Capitalize the last letter of the text
b. Changing the text to uppercase d. Capitalize the first letter of the text
________3. What property is used to specify the space between words in a text?
a. Word spacing b. White spacing c. Letter spacing d. Text spacing
________4. What property is used to specify the space between letters?
a. Word spacing b. White spacing c. Letter spacing d. Text spacing
________5. Which of the following is used to make a blur or washed-out effect on the shadow of a
text?
a. Text blur c. Text washed out
b. Text shadow d. Text decoration

TEXT FORMATTING USING CASCADING STYLE SHEET


For webpages, CSS is always used in combination with a markup language (HTML). And with
HTML5 omitting the tag, CSS is being used instead. In this lesson we are going to learn about other
text formatting syntaxes which are considered as advanced typography in CSS used on web pages
along with HTML. Formatting texts on a web page is commonly used not only for decoration but
also to provide emphasis on a subject matter.

TEXT DECORATION
As this property name suggest, it allows you to decorate your text in various ways. The text-
decoration property makes it easy to add lines over, under or through your text, but bear in mind
that it's not a border - the line(s) drawn by the text decoration property will always be the same
color as the text itself. If you need a line in a different color below or above your text, you should
use the border properties. It is not recommended to underline text that is not a link, as this often
confuses the reader. Text-decoration property also allows you to apply several values at once. Refer
to codes and output below.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<div style="text-decoration: underline overline
line-through;">HELLO WORLD!"</div>
</body>
</html>
GRADE 11
Q1|
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
W5
The value text-decoration: none; is often used to remove underlines from links.

Text Transformation
This property is used to transform text into uppercase, lowercase, or capitalize the first letter of text.
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-transform: uppercase;
}

div.b {
text-transform: lowercase;
}

div.c {
text-transform: capitalize;
}

</style>
</head>
<body>
<h1>The text-transform Property</h1>

<h2>text-transform: uppercase:</h2>
<div class="a">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</div>

<h2>text-transform: lowercase:</h2>
<div class="b">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</div>

<h2>text-transform: capitalize:</h2>
<div class="c">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</div>

</body>
</html>

Letter and Word Spacing and Indention


Word-spacing is one of those features that should only be used for headings, block quotes, or
other non-body text as it can have a nice visual effect but decreases the readability. CSS treats
every character or set of characters with a space around them as a 'word'. This property specifies
the space between words in a text.
The letter-spacing property is used to control the amount of space between the letters.
Negative values are used in order to get the letters to stand even closer. Just like with word-spacing,
this feature is for headings, block quotes, and so forth, but is not advised for body text.
The text-indent property is used to specify the indentation of the first line of a text or a
paragraph.
GRADE 11
Q1|
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
W5

The codes above will have the output below:

Text Shadow
This property adds shadow to text. The text-shadow property has control over three things -
the color, the placement and the blur. This means that there are four values:
 color
 x-coordinate (horizontal)
 y-coordinate (vertical)
 blur radius

You can use either HEX colors of RGB colors when you define the color. The coordinates are based on the
placement of the text and can be either positive or negative. The amount of blur defines how 'washed-out' your shadow
is.

Note: Be mindful of the color of the text, the shadow and the background.
GRADE 11
Q1|
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
W5
COMPUTER PROGRAMMING 2
ACTIVITY SHEET|WEEK 5
Name:____________________________________

ACTIVITY 1: CODING
Instructions: Complete the codes to produce the required output. Use the given guide for the value
of properties to be used. (5pts each)
1. Use text decoration on header to have over line and underline.
2. Set the horizontal and vertical shadow effect to 5px, blur radius to 5px and the color to gray.
3. Set the paragraph indent to 50px.
4. Use text decoration to remove the underline on the hyperlink.
5. Make the "hello, world!" all caps.
6. Put a 5px letter spacing on the word SOURCE:

ACTIVITY 2: DEBUGGING
Instructions: You can use the codes below as reference for the coding activity, however there are
four errors that you have to find. Encircle these errors. (5pts each)

Required Output:

You might also like