Prelims - CSS outline

Question 1

is a line drawn outside the element’s border

Answer 1

CSS Outline

Question 2

CSS has the following outline properties

Answer 2

outline-style
outline-color
outline-width
outline-offset
outline

Question 3

The outline-style property specifies the style of the outline, and can have one of the following values:

Answer 3

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 a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Question 4

property specifies the width of the outline

Answer 4

outline-width

Question 5

The outline-width property specifies the width of the outline, and can have one of the following values:

Answer 5

thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

Question 6

property is used to set the color of the outline.

Answer 6

CSS Outline Color

Question 7

The outline-color property is used to set the color of the outline.
The color can be set by

Answer 7

• name - specify a color name, like “red”
• HEX - specify a hex value, like “#ff0000”
• RGB - specify a RGB value, like “rgb(255,0,0)”
• HSL - specify a HSL value, like “hsl(0, 100%, 50%)”
• invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

Question 8

The outline property is a shorthand property for setting the following individual outline properties:

Answer 8

outline-width
outline-style (required)
outline-color

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

Question 9

property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent

Answer 9

CSS Outline Offset

Question 10

Sets the style of an outline

Answer 10

outline-style

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}