q3 Module6 g10 Programming

Grade
10
TVL- ICT
COMPUTER PROGRAMMING
QUARTER 3 – MODULE 6
CSS COLORS
Prepared by:
EUGENIO L. MOLINA
Teacher III
Mangaldan National High School
QUARTER III
WEEK VI
I. LEARNING OBJECTIVES
After reading this module you will be able to understand the different CSS
measurement units, use comments to explain codes and identify the different color values to
specify a color.
II. INTRODUCTION
Every property used in CSS has a value type defining the set of values that are allowed
for that property. Taking a look at any property page on your CSS codes will help you
understand the values associated with a value type that are valid for any particular property.
In this module we will take a look at some of the most frequently used value types, and their
most common values and units.
III. READINGS/LECTURES
One of the things you will use every day in CSS are units. They are used to set lengths,
paddings, margins, align elements and so on. Things like px, em, rem, or percentages. They
are everywhere. There are some relatively unknown ones, too.
Pixels
The most widely used measurement unit. A pixel does not actually correlate to a physical
pixel on your screen, as that varies, a lot, by device (think high-DPI devices vs non-retina
devices).
There is a convention that make this unit work consistently across devices.
Percentages
Another very useful measure, percentages let you specify values in percentages of that
parent element’s corresponding property.
Example
.parent {
width: 400px;
}
.child {
width: 50%; /* = 200px */
}
1
Relative units
• em is the value assigned to that element’s font-size, therefore its exact value changes
between elements. It does not change depending on the font used, just on the font
size. In typography this measures the width of the m letter.
• rem is similar to em, but instead of varying on the current element font size, it uses the
root element (html) font size. You set that font size once, and rem will be a consistent
measure across all the page.
• ex is like em, but inserted of measuring the width of m, it measures the height of
the x letter. It can change depending on the font used, and on the font size.
• ch is like ex but instead of measuring the height of x it measures the width of 0 (zero).
CSS Comments
Comments are used to explain the code and may help when you edit the source code
at a later date. Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
Example
/* This is a single-line comment */
p{
color: red;
}
You can add comments wherever you want in the code:
Example
p{
color: red; /* Set text color to red */
}
Comments can also span multiple lines:
Example
/* This is
a multi-line
comment */
p{
color: red;
}
2
HTML and CSS Comments
From the previous module, you learned that you can add comments to your HTML
source by using the  syntax.
In the following example, we use a combination of HTML and CSS comments:

Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading</h2>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
CSS Colors
CSS uses color values to specify a color. Typically, these are used to set a color either
for the foreground of an element or else for the background of the element. They can also be
used to affect the color of borders and other decorative effects.
You can specify your color values in various formats. Following table lists all the
possible formats
Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
keyword aqua, black, etc. p{color:teal;}
3
1. CSS Colors - Hex Codes
A hexadecimal is a 6-digit representation of a color. The first two digits(RR) represent

a red value, the next two are a green value(GG), and the last are the blue value(BB). Colors
are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. A
hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are
the examples to use Hexadecimal notation.
Color Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
2. CSS Colors - Short Hex Codes

This is a shorter form of the six-digit notation. In this format, each digit is replicated to
arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop,
Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the
examples to use Hexadecimal notation.
4
3. CSS Colors - RGB Values
This color value is specified using the rgb( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0 and 255
or a percentage.
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
5
Example
<!DOCTYPE html> Output
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen
</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
CSS Background Color

You can set the background color for HTML elements.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>
Output
CSS Text Color

You can set the color of text:
6
CSS Border Color
You can set the color of borders
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
Output:
ACTIVITY 1
Directions: Write B if the statement is True, otherwise write A. Write your answer in
your answer sheet.
1. A hexadecimal value can be taken from any graphics software like Adobe Photoshop,
Jasc Paintshop Pro, or even using Advanced Paint Brush.
2. CSS uses color values to specify a font type.
3. Pixel is the most widely used measurement unit.
4. A CSS comment is placed inside the <style> element, and starts with /* and ends
with */.
5. Comments are ignored by browsers.
6. em is similar to em, but instead of varying on the current element font size, it uses the
root element (html) font size.
7. CSS are used to set lengths, paddings, margins, align elements and so on.
8. ex is like em, but inserted of measuring the width of m, it measures the height of
the x letter.
9. Pixels let you specify values in percentages of that parent element’s corresponding
property.
10. Taking a look at any property page on your CSS Codes will help you understand the
values associated with a value type that are valid for any particular property.
7
SUMMATIVE EVALUATION
A. Directions: Identify the Hexadecimal Code of the given CSS Colors. Write your
answer in your answer sheet.
_____________1. Gray
_____________2. Red
_____________3. Blue
_____________4. Yellow
_____________5. Fuchsia
_____________6. Red (rgb)
_____________7. Blue (rgb)
_____________8. Gray (rgb)
_____________9. Yellow (rgb)
_____________10. Aqua Blue (rgb)
B. Directions: Fill in the blank with the correct CSS code. Write them in your answer
sheet.
1. p {
color: _________; /* Set text color to red */
}
2. <h1 style="__________: Blue;">Hello World</h1>/* Set background color to Blue */
3. <h1 style="_________:2px solid Yellow;">Hello World</h1>/* Set border color to Yellow */
4. p {
________: _________; /* Set text color to Fuchsia */
}
C. Directions: Create the CSS / HTML code for the given output. Write them in your
answer sheet. (10 pts)
Output:
Hint:
Lebron James --- border=3px, border color=Tomato, background color=DodgerBlue,
text color=White(HexaCode)
Los Angeles Lakers --- border=3px, border color =SlateBlue, background
color=Tomato, text color=Yellow(HexaCode)
8
Code
Key Answer
1. B
2. A
3. B
4. B
5. B
6. B
7. B
8. B
9. B
10.B
References: https://www.tutorialspoint.com/html/html_comments.htm
Learn to Code HTML & CSS –Develop and Style Website by: Shay Howe
9
ANSWER SHEET
NAME: ________________________________________ Score: ____________________

Gr. & Sec: ___________________ Subj. Teacher: _______________________________
10

q3 Module6 g10 Programming

Uploaded by

Copyright:

Available Formats

You might also like

q3 Module6 g10 Programming

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

q3 Module6 g10 Programming

Uploaded by

Copyright:

Available Formats

Grade

You can add comments wherever you want in the code:

Comments can also span multiple lines:

In the following example, we use a combination of HTML and CSS comments:

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}

A hexadecimal is a 6-digit representation of a color. The first two digits(RR) represent

Color Color HEX

2. CSS Colors - Short Hex Codes

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

CSS Background Color

CSS Text Color

NAME: ________________________________________ Score: ____________________

You might also like

NAME: ____________________ Score: