Scribd
Upload
88 views7 pages

Comprog 2 Q1-W3 & 4

This document provides information about CSS padding, outlines, and a pre-test with multiple choice questions. It discusses how CSS padding adds space within any defined borders, while outlines are drawn outside borders to make elements stand out. Various outline properties like style, color, width and shorthand are described. The pre-test has 5 questions testing knowledge of CSS padding properties like individual sides, shorthand; and outline properties like style.

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
88 views7 pages

Comprog 2 Q1-W3 & 4

This document provides information about CSS padding, outlines, and a pre-test with multiple choice questions. It discusses how CSS padding adds space within any defined borders, while outlines are drawn outside borders to make elements stand out. Various outline properties like style, color, width and shorthand are described. The pre-test has 5 questions testing knowledge of CSS padding properties like individual sides, shorthand; and outline properties like style.

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

GRADE 11

Q1| W3
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
&
CSS PADDING AND OUTLINE W4
CSS Outline
PRE-TEST
Instructions: Select the letter that corresponds to correct answer.
________1. It is a CSS property that used to generate space around an element’s content, inside of
any defined borders.
a. CSS margin
b. CSS border
c. CSS padding
d. CSS outline
________2. It is a line that is drawn around elements, OUTSIDE the borders, to make the element
"stand out".
a. CSS margin
b. CSS border
c. CSS padding
d. CSS outline
________3. Which of the CSS padding property that allow to shorten the code and make it in one
property?
a. Padding inherits
b. Padding length
c. Padding shorthand
d. Padding individual sides
________4. Which of the following CSS Padding values, specifies that the padding should be inherit
from the parent element?
a. Padding inherits
b. Padding length
c. Padding shorthand
d. Padding individual sides
________5. Which of the following CSS Outline property that specifies the style of the outline?
a. Outline-shorthand
b. Outline-style
c. Margin Color
d. Outline Individual sides

WHAT IS CSS OUTLINE?


An outline is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out". CSS has the following outline properties:
 outline -style
 outline-color
 outline-width
 outline-offset
 outline

Outline differs from borders. Unlike border, the outline is drawn outside the element's
border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions;
the element's total width and height is not affected by the width of the outline.

Outline Style
GRADE 11
Q1| W3
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
&
W4
The outline-style property specifies the style of the outline, and can have one of the following values:
 dotted – defines a dotted outline
 dashed – defines a dashed outline
 solid – defines a solid outline
 double – defines a double outline
 groove – defines a 3D grooved outline
 ridge – defines a 3D ridged outline
 inset – defines 3D inset outline
 outset – defines 3D outset outline
 none – defines no outline
 hidden – defines a hidden outline

Outline Color
The outline-color property is used to set the color of the outline. The color can be set by:
 name – specify a color name, like “red”
 RGB – specify a RGB value, like “rgb(255,0,0)
 Hex – specify hex value, like “#ff0000”
 invert – performs a color inversion (which ensures that the outline is visible, regardless of
color background)
GRADE 11
Q1| W3
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
&
W4
The following example uses outline-color: invert, which performs a color inversion. This ensures
that the outline is visible, regardless of color background:
<style>
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert; }
</style>
</head>
<body>
<h2>Using outline-color:invert</h2>
<p class="ex1">A solid invert outline.</p>

Outline Width
The outline-width property specifies the width of the outline, and can have one of the following
values:
 thin (typically 1px)
 medium (typically 3px)
 thick (typically 5px)
 A specific size (in px, pt, cm, em, etc)

Outline – Shorthand Property


The outline property is a shorthand property for setting the following individual outline properties:
 outline – width
 outline – style (required)
 outline - color
GRADE 11
Q1| W3
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
&
W4
The outline property is specified as one, two, or three values from the list above. The order of the
values does not matter.

<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>

Outline Offset
The outline-offset property adds space between an outline and the edge/border of an element. The
space between an element and its outline is transparent.
The following example specifies an outline 15px outside the border edge:

The following example shows that the space between an element and its outline is transparent:
GRADE 11
Q1| W3
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
&
W4

CSS Padding Properties


The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for
each side of an element (top, right, bottom, and left).

Padding – Individual Sides


CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
All the padding properties can have the following values:
 length – specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element
 inherit – specifies that the padding should be inherited form the parent element

Padding – Shorthand Property


To shorten the code, it is possible to specify all the padding properties in one property. The
padding property is a shorthand property for the following individual padding properties:
padding-top, padding-right, padding-bottom, padding-left
So, here is how it works: If the padding property has four values: padding:
25px 50px 75px 100px;
combinations of top padding are 25px, left padding is 100px, right padding is 50px and bottom
padding is 75px

If the padding property has three values:


 padding: 25px 50px 75px;
- top padding is 25px
GRADE 11
Q1| W3
COMPUTER PROGRAMMING 2 | CASCADING STYLESHEET
&
- right and left paddings are 50px W4
- bottom padding is 75px
If the padding property has two values
 padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
If the padding property has one value
 padding: 25px 50px 75px
- all four paddings are 25px

Padding Element Width


 The CSS width property specifies the width of the element's content area. The content area is the
portion inside the padding, border, and margin of an element (the box model).
 So, if an element has a specified width, the padding added to that element will be added to the total
width of the element. This is often an undesirable result.
 In the following example, the element is given a width of 300px. However, the actual rendered
width of the element will be 350px (300px + 25px of left padding + 25px of right padding):

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing
property. This causes the element to maintain its width; if you increase the padding, the available
content space will decrease.
COMPUTER PROGRAMMING 2

ACTIVITY SHEET|WEEK 3 and 4


Name:____________________________________

ACTIVITY 1: Create a simple Webpage with the title “MY FAMILY” and by using CSS Outline and
Padding to make the webpage more interesting. Follow the instructions below.
1. Create a simple webpage with a heading 1 “My Family”. You need to choose your 5 favorite
things you do with your family.
2. As the background color of the whole webpage use the color, Lavender. For paragraph use
font family Bradley Hand ITC and font size use 20 px.
3. For the paragraph provide 3 sentences in each picture and put horizontal rule after.
4. For the Padding: 30px; margin: 30px; background: honeydew; border: 5px double mistyrose;
outline: 5px dashed rosybrown; outline-offset: 25px;
5. Provide also a family pictures in each thing that you love to do with your family, and set it to
center alignment.
Rubrics:
ITEMS POINTS
1. Heading 1 “My Family” and the 5 things 5
you love to do with your family.
2. Background color set as lavender, font 5
family, and font size.
3. 3 sentences and horizontal rule. 5
4. Padding, Margin, border, background, 10
outline and outlineoffset.
5. Alignment and pictures. 5
TOTAL /30 points

ACTIVITY 2:
Instructions: Read each statement carefully. Select the letter that corresponds to correct answer on
the space provided before each number.
_______1. Which of the following CSS property that the line drawn around elements, outside the
borders, to make the element "stand out".?
a. Border Property
b. Margin Property
c. Padding Property
d. Outline Property
_______2. Which of the following CSS Outline property, specifies the style of the outline?
a. Outline-style
b. outline-width
c. outline-color
d. outline-offset
_______3. It is a CSS property specifying the padding for each side of an element
a. padding inherit
b. padding length
c. padding shorthand
d. padding individual sides
_______4. It is a CSS property that used to generate space around an element’s content, inside of
any defined borders.
a. CSS margin
b. CSS Border
c. CSS Padding
d. CSS Outline
______5. Which of the CSS padding property that allow to shorten the code and make it in one
property.
a. padding inherit
b. padding length
c. padding shorthand
d. padding individual sides

You might also like