Scribd
Upload
73 views9 pages

Comprog 2 Q1-W1

The document discusses the introduction and basic syntax of cascading style sheets (CSS) including the three ways to insert CSS styles into an HTML document which are external, internal, and inline stylesheets. It also covers CSS properties for color, font size, font style, text alignment, and background color as well as color values that can be specified in CSS like color names, RGB values and hex codes. The document provides examples of CSS code to style text, set background colors and control text formatting and alignment.

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
73 views9 pages

Comprog 2 Q1-W1

The document discusses the introduction and basic syntax of cascading style sheets (CSS) including the three ways to insert CSS styles into an HTML document which are external, internal, and inline stylesheets. It also covers CSS properties for color, font size, font style, text alignment, and background color as well as color values that can be specified in CSS like color names, RGB values and hex codes. The document provides examples of CSS code to style text, set background colors and control text formatting and alignment.

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/ 9

GRADE 11

Q1| W1
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
&W2
INTRODUCTION TO CASCADING STYLESHEETS
CASCADING STYLESHEETS
PRE-TEST
Instructions: Identify what kind of CSS style is used in the following codes and select the letter
that corresponds to the correct answer. Write your answer on the space provided
before each number.
Choices (1 to 5): A. Internal B. External C. Inline.
_____________1. <html>
<head>
<style>
u{color:blue;font-size:60;}
</style>
</head>
<body>
<u>KINDS OF CASCADING STYLE SHEET</u>
</body>
</html>
_____________2. <html>
<head>
</head>
<body>
<u style= “color:blue;font-size:60;font-size:50;”> KINDS OF CASCADING
STYLE SHEET</u>
</body>
</html>
_____________3. <html>
<head>
<link rel=”____” href=____”>
</head>
<body>
<u> KINDS OF CASCADING STYLE SHEET</u>
</body>
</html>
_____________4. <html>
<head>
<style>
Body {background-color:green;text-align:center;}
</style>
</head>
<body>
<p> CSS is way of designing HTML </p>
</body>
</html>
_____________5. <html>
<head>
</head>
<body style=”background-color:pink;text-align:center;”>
<p style=”color:yellow;”> CSS is way of designing HTML </p>
</body>
</html>

WHAT IS CSS?
CSS stands for Cascading Style Sheets. CSS is simply a design language that we use to add
style in an html file. It allows us to control the layout of our HTML file; therefore, HTML is used to
define the page content while CSS is used to define how the content will look.
CSS Structure
Below is a structure that we follow in CSS:
Selector {property:value;}
Example: p {color: red;}
CSS selectors are used to find and select HTML elements based on their element name, tag,
id, class, attribute, and more.

THREE WAYS TO INSERT CSS


External Style Sheet
It means you are designing your HTML file by using another file. With this you can change
the look of an entire website by changing just one file.
In using External Style Sheet, at the head part of html document you need link your style
sheet to your html file. The html file has the extension name .html while style sheet used .css as
extension file.
Example: CSS file:

HTML File:

The href attribute value should be the name of your css file.
Output:

Internal or Embedded Style Sheet


It is used to design your HTML file by using the same file. Internal styles are defined within
the <style> tag, inside the head part of an HTML file.
Example:

Output:

Inline Stylesheet
It is used to design HTML file in every single element. To use inline styles, you need to add
the style attribute to the element.
Example:

Output:
CSS SYNTAX
PRE-TEST
Instructions: Select the letter of the correct answer and write it on the space provided before each
number.
________1. CSS property specifies the color of the text.
a. Color c. Font-family
b. Font-size d. Text-align
________2. CSS property specifies the size of the text.
a. Color
b. Font-size d. Text-align
c. Font-family
________3. CSS property specifies the style of the text.
a. Color
b. Font-size d. Text-align
c. Font-family
________4. CSS property specifies the alignment of the text.
a. Color c. Font-family
b. Background-color d. Text-align
________5. CSS property specifies the background color of the webpage.
a. Color c. Font-family
b. Background-color d. Text-align

CASCADING STYLESHEET – BASIC SYNTAX


In HTML we have structure, also in CSS we have syntax to follow in giving style in our
website such as background color, text color, text size, text style and text alignment.
Before we have tag to add or change style to our webpage, but that tag is not supported in
HTML5 anymore and now it can be done with CSS using style attribute.
The style attribute has the following syntax:
<tagname style="property:value;">

Adding or Changing Backgroun Color of Webpage


The background-color property defines the background color for a webpage.
Example: (the sample below sets the background color for a page to yellow

Output:

Adding or Changing color of text


The color property defines the text color for a webpage.
Example: (the sample below sets the color for a text to red
Output:

Adding or Changing Size of the Text


The font-size property defines the text size for a webpage. It can be done in % (percent) or px (pixel).
Example: (Pixel)

Output:

Example: (Percent)

Output:

In font-size property the percent size is smaller than pixel size when it comes to the same number.
Adding or Changing Style of the Text
The font-family property defines the font to be used for a webpage.
Example:

Output:

Changing Alignment of the Text


The text-align property defines the horizontal text alignment for a webpage.
Example:

Output:

CSS COLOR
Colors in CSS are specified by a valid color name like "red", RGB value like "rgb(255, 0, 0)"
and a HEX value like "#ff0000".
Below are the following examples of color:
Valid Color Name RGB Value Hex Value
Red 255,0,0 #FF0000
Yellow 255,255,0 #FFFF00
Blue 0,0,255 #0000FF
Orange 255,165,0 #FFA500
Black 0,0,0 #000000

Valid Color Syntax:


 <tag style="background-color:red">… </tag>
 <tag style="color:red">… </tag>
RGB Value Syntax:
 <tag style="background-color:rgb(255,0,0)">… </tag>
 <tag style="color:rgb(255,0,0)">… </tag>
Hex Value Syntax:
 <tag style="background-color:#FF0000">… </tag>
 <tag style="color:#FF0000">… </tag>
GRADE 11
COMPUTER PROGRAMMING 2 | ACTIVITY SHEET
Q1| W1 &W2

Name: _________________________________________

ACTIVITY 1
Instructions: Create a webpage and write your code on the box below. Apply the following:
1. Green as a background color
2. Add Heading 1 and write CASCADING STYLESHEET with blue text color.
3. For the content add paragraph use 20 pixels for text size and then write your
reflection/generalization about this lesson. Minimum of 5 sentences.
4. Use black for the text content.
5. Use Forte for the font of the text.
Rubrics:
CATEGORY NEEDS WORK DEVELOPING MEETS SCORE
(10) (15) STANDARD (20)
CONTENT Information is not Some of Information is
always clear or information is always clear or
correct. clear and correct. correct.
CODE There are four There are 1 -3 There is no error.
and more coding coding errors.
errors.
VISUAL DESIGN Background, text Background, text Background, text
format or color format or color format or color
usage are not the usage are slightly usage are exactly
same with the the same with the the same with the
given given given
instructions. instructions. instructions.

TOTAL: _____/60

ACTIVITY 2: VALUING
Instructions: Read and answer the following questions carefully in two to three sentences each
number.
1. What do think is the importance of using style attribute in designing webpage?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
2. How will you use the knowledge you acquired in this module?
___________________________________________________________________________________________
___________________________________________________________________________________________
__________________________________________________________________________________________

You might also like