Republic of the Philippines

Department of Education
REGION I
SCHOOLS DIVISION OF PANGASINAN I

Computer
12
Programming
(.Net Technology)
Quarter 1 (Week 5) –
Module 1:
LC: Create HTML5 document
using advanced techniques
with JavaScript and CSS3

Prepared by:

ISHTAR C. FORTES
TEACHER II

Module in Computer Programming (.Net Technology) 1

 Lesson
CSS Colors,
5 Background and Border

I. Objectives
1. Identify CSS Color coding schemes.
2. Apply CSS Border in HTML document.
3. Create a CSS Code block to determine match with the output.

II. Guide Questions (Formative Assessment)

1. How to apply different coloring techniques in CSS?
2. What are the different properties of background and how to change it?
3. How can I put borders on selected elements on my website?

III. Discussion
This module focuses on the application of Colors, Background and Borders
using CSS 3

CSS Color Coding

RGB or Red-Green-Blue. Each parameter of red, green and blue defines the intensity
of the color with a value between 0 to 255. Which means we can produce 16,777,216
colors using this color-coding-scheme. If you want to display a red color, you may use
rgb(255,0,0). If you want to display green, use rgb(0,255,0). For the blue color, use
rgb(0,0,255). To display black rgb(0,0,0) and rgb(255,255,255) if white. You can also
mix some colors like producing yellow by mixing red and green (rgb(255,255,0).

Module in Computer Programming (.Net Technology) 2

 In displaying the different shades of gray, all parameters of RGB must be all
equal.

There is an extension RGB coloring scheme which uses Alpha. Alpha defines
the opacity or transparency of color being used. The values for alpha are from 0.0 (full
transparent) to 1.0 (not transparent) depending on the desired transparency.

Another coloring scheme is with the use of Hexadecimal number system or Hex
and specified using the form of #rrggbb. Since hexadecimal is different on decimal
which we are using every day. Hexadecimal is a number system which uses the

Module in Computer Programming (.Net Technology) 3

symbols 0-9 and A-F. Refer to the following table on the equivalent value of a decimal
number to hex.

Dec 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hex 0 1 2 3 4 5 6 7 8 9 A B C D E F

The hex form is #rrggbb, where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff. To display red using hex, we may use #ff0000.
Red is set to its highest value (ff) and the other two (green and blue) are set to 0. To
display green, we may use #00ff00 and #0000ff for blue. For using hex to display
black, we may use #000000 and #ffffff for white. Here are some examples of colors
using hex.

For displaying the different shades of gray using hex, the value of the 3
parameters must be all equal.

The last coloring coding scheme is HSL (Hue, Saturation and Lightness). HSL
uses the format of hsl(0,100%,50%). The first parameter hue represents the color
wherein 0 is red, 120 is green and 240 is blue. The second parameter saturation uses

Module in Computer Programming (.Net Technology) 4

percentage as a value. If the saturation is 0%, it means that the color is a shade of
gray and 100% if it is a full color. The last parameter is lightness and it accepts a
percentage as a value. If the lightness is 0% it means that it is black and 100% to
display white. Here are the sample colors using HSL color-coding scheme.

Here are also the variations of adjusting the lightness of an HSL color-coding
scheme.

Here are other examples of adjusting the saturation with the same value of
hue and lightness.

To display the different shades of gray, the hue and saturation must be set to
zero and adjust the lightness from 0% to 100% to get the desired shade of gray.

Module in Computer Programming (.Net Technology) 5

Just like the RGB color coding scheme, we can also use the 4th parameter which is
Alpha. Remember that alpha is used to adjust the opacity or transparency of color
used. Here is an example of HSLA.

To apply the different color-coding schemes, we always remember that every

parameter has its own range of value and representation. It depends on the
programmer on what schemes he/she wishes to use.

CSS Backgrounds
On the next part of this module, we will also discuss the different properties that
we may use in changing the background of our website using different properties.
Backgrounds such as plain colors, gradient colors and even images as background
are possible.

The first property of CSS Background is background-color and it is used to

specify the background color of an element

Module in Computer Programming (.Net Technology) 6

 Color
Coding CSS Code
Scheme
body {
background-color: khaki;
Color
opacity: 0.3;
}
body {
RGB background-color: rgba(240,230,140,0.3)
}
body {
background-color: #F0E68C
Hex
opacity: 0.3;
}
body {
HSL background-color: hsla(54,76.92%,74.51%,0.1)
}

There are 2 ways on how we can apply the opacity of colors in background.
One is with the use alpha in RGB and HSL color combination and the other one is
adding an opacity property after the background property. The value of opacity ranges
from 1 to 0.0. The value of 1 means no opacity property applied and when the value
decreases the opacity will also increase.

The next property of background is background image which specifies an image

to be used as a background of an element. Which means background image cannot
only be applied as a background of the whole website, but it can also be applied to a
table, text, div, or any other element. Image can be taken over the internet or on your
local computer.

body {
background-image: url("paper.gif");
}

Module in Computer Programming (.Net Technology) 7

 Alongside with the background-image property, the value of background-repeat
must also be assigned. Background-repeat has 3 possible values.

Background
repeat Code Description
Value
body { Background
background-image: url("paper.gif"); image will be
repeat-x
background-repeat: repeat-x; repeated
} horizontally
body { Background
background-image: url("paper.gif"); image will be
repeat-x
background-repeat: repeat-y; repeated
} vertically
body { Background
background-image: url("paper.gif"); image will
repeat-
background-repeat: repeat-repeat; repeat
repeat
} horizontally
and vertically
body { Background
background-image: url("paper.gif"); image will
No-repeat
background-repeat: no-repeat; not be
} repeated

Next property of background is with the use of position. There are several possible
positions of image and its corresponding value.

Value Description
left top If you only specify one keyword, the other value will be
left center "center"
left bottom
right top

Module in Computer Programming (.Net Technology) 8

 right center
right bottom
center top
center center
center bottom
x% y% The first value is the horizontal position and the second value
is the vertical. The top left corner is 0% 0%. The right bottom
corner is 100% 100%. If you only specify one value, the other
value will be 50%. Default value is: 0% 0%
xpos ypos The first value is the horizontal position and the second value
is the vertical. The top left corner is 0 0. Units can be pixels
(0px 0px) or any other CSS units. If you only specify one
value, the other value will be 50%. You can mix % and
positions
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read
about inherit

Another CSS Background property is attachment. Wherein it specifies if the

background image will scroll or not. There are only 2 values of attachment which are
fixed and scroll. When we use fixed, the background image will not scroll with the rest
of the page, while the other will let the image scroll throughout the website

CSS Borders
Now with the use of borders, we can enclose certain elements within boxes.
The first sub property of CSS border is width, which will specify the width of 4 borders.

Code Description
p.one { The assignment of values for border-
border-style: solid; width uses pixels.
border-width: 5px;
}

Module in Computer Programming (.Net Technology) 9

 p.two { The value of border-width can
border-style: solid; be changed to thin and thick
border-width: medium;
}

Border styles also differs. Values can be dashed, solid, groove, inset, outset,
dotted, and double. The code below uses a double style which makes the border
doubled and border width to adjust its size.

p.one {

border-style: double;

border-width: 20px;

width: 250px;

The color of borders can also be set at once and can also be set manually on
each side. Assigning a value of the color can be set using the name of the color,
RGB, Hex, and HSL. Alpha or transparency can also be applied.

p.once {

border-style: double;

border-width: 20px;

width: 250px;

border-color: blue

p.manual {
border-style: solid;
border-color: red green blue yellow;

Module in Computer Programming (.Net Technology) 10

 The colors are following a clockwise direction of order. First color refers to the
top border which is red, second color is green for right border, third color is blue for
bottom border and lastly yellow for left border.

We can also manually assign different styles of border on each side. Refer to
the codes below.

p.one {

border-width: 20px;

width: 250px;

border-color: red green blue yellow;

border-top-style: dotted;

border-right-style: double;

border-bottom-style: groove;

border-left-style: solid;

The last property of border is radius. Radius is used to add a smooth rounded
corner of borders.

p.one {

border-style: double;

border-width: 20px;

width: 250px;

border-radius: 15px;

border-color: green;

Module in Computer Programming (.Net Technology) 11

IV. Examples
Background
Position Code
Values
Center Top body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
Bottom Right body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
Background body {
Position background-image: url('w3css.gif');
Using background-repeat: no-repeat;
Percentage background-attachment: fixed;
background-position: 50% 50%;
}
Background body {
Position background-image: url('w3css.gif');
using Pixel background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}

Module in Computer Programming (.Net Technology) 12

Border styles
Border Styles Code Output
h1 {
border-style: dashed;
width: 400px;
}
h1 {
border-style: solid;
width: 400px;
}
h1 {
border-style: groove;
width: 400px;
}
h1 {
border-style: inset;
width: 400px;
}
h1 {
border-style: outset;
width: 400px;
}
h1 {
border-style: dotted;
width: 400px;
}

Module in Computer Programming (.Net Technology) 13

V. Exercises
A. Multiple Choice. Directions: Choose the best answer and write only the letter on
the space provided.
_________ 1. There are 3 color-coding schemes in HTML and each scheme has a
different parameters and corresponding values. Which of following
does not belong to the color-coding schemes?

A. RGB C. Hex
B. CMYK D. HSL

_________ 2. Which of the following CSS codes assigns a green background color
of an element?
A.
body {
background-color: rgb(0,255,0)
}
B.
body {
background-color: rgb(255,0,0)
}
C.
body {
background-color: rgb(0,0,255)
}
D.
body {
background-color: rgb(255,255,255)
}

Module in Computer Programming (.Net Technology) 14

_________ 3. Which of the following CSS codes makes the background image
repeat horizontally?
A.
body {
background-image: url("logo.png");
background-repeat: repeat-x;
}
B.
body {
background-image: url("logo.png");
background-repeat: repeat-y;
}
C.
body {
background-image: url("logo.png");
background-repeat: repeat-repeat;
}
D.
body {
background-image: url("logo.png");
background-repeat: no-repeat;
}
_________ 4. Which of the following properties makes the corners of the border
rounded?
A. border-color
B. border-style
C. border-radius
D. border-width
_________ 5. Which of the following properties specifies the location of the
background image on the website?
A. background-image
B. background-repeat
C. background-position
D. background-color

Module in Computer Programming (.Net Technology) 15

B. Fill in the blanks. Complete the following code to match with the output.
CODE

p.one {

border-width: 20px;

width: 250px;

border-color: red ________ blue ________;

border-top-style: ________;

border-_______-style: solid;

border-bottom-style: ________;

border-left-style: solid;

OUTPUT

C. Application. Create a set of CSS code based on the given output

Module in Computer Programming (.Net Technology) 16

VI. References
Online and Other Sources
• CSS Colors, https://www.w3schools.com/css/css_colors.asp,
https://www.w3schools.com/css/css_colors_rgb.asp,
https://www.w3schools.com/css/css_colors_hex.asp,
https://www.w3schools.com/css/css_colors_hsl.asp
• CSS Backgrounds,
https://www.w3schools.com/css/css_background.asp,
https://www.w3schools.com/css/css_background_image.asp,
https://www.w3schools.com/css/css_background_repeat.asp,
https://www.w3schools.com/css/css_background_attachment.asp,
https://www.w3schools.com/cssref/pr_background-attachment.asp
• CSS Borders, https://www.w3schools.com/css/css_border.asp,
https://www.w3schools.com/css/css_border_width.asp,
https://www.w3schools.com/css/css_border_color.asp,
https://www.w3schools.com/css/css_border_sides.asp,
https://www.w3schools.com/cssref/pr_border-style.asp,
https://www.w3schools.com/cssref/pr_border-width.asp

Module in Computer Programming (.Net Technology) 17

 18 Module in Computer Programming (.Net Technology)
A. Multiple Choice
1. B
2. A
3. A
4. C
5. C
B.
p.one {
border-width: 20px;
width: 250px;
border-color: red green blue yellow;
border-top-style: groove;
border-right-style: solid;
border-bottom-style: groove;
border-left-style: solid;
}
C.
p.one {
border-width: 20px;
width: 250px;
border-color: red green blue yellow;
border-top-style: groove;
border-right-style: solid;
border-bottom-style: groove;
border-left-style: solid;
}
VII. Answer Key