Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Outline, Width, Color, Shorthand & Offset

CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6 PDF Download

Outline


An outline is a line drawn outside the element's border.

CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

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:
(i) outline-style
(ii) outline-color
(iii) outline-width
(iv) outline-offset
(v) outline

Note: 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.

CSS Outline Style


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

The following example shows the different outline-style values:

Example
Demonstration of the different outline styles:

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;}

Result
CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the outline-style property is set!

CSS 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)

The following example shows some outlines with different widths:
CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

Example

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;

}

CSS 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
  • 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)

The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:
CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

Example

p.ex1 {

  border: 2px solid black;

  outline-style: solid;

  outline-color: red;

}

p.ex2 {

  border: 2px solid black;

  outline-style: dotted;

  outline-color: blue;

}

p.ex3 {

  border: 2px solid black;

  outline-style: outset;

  outline-color: grey;

}

HEX Values

The outline color can also be specified using a hexadecimal value (HEX):

Example

p.ex1 {

  outline-style: solid;

  outline-color: #ff0000; /* red */

}

RGB Values

Or by using RGB values:

Example

p.ex1 {

  outline-style: solid;

  outline-color: rgb(255, 0, 0); /* red */

}

HSL Values

You can also use HSL values:

Example

p.ex1 {

  outline-style: solid;

  outline-color: hsl(0, 100%, 50%); /* red */

}

CSS Outline - Shorthand property


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

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

The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.
The following example shows some outlines specified with the shorthand outline property:
CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

Example

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

CSS 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:
CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

Example

p {

  margin: 30px;

  border: 1px solid black;

  outline: 1px solid red;

  outline-offset: 15px;

}

The following example shows that the space between an element and its outline is transparent:
CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

Example

p {

  margin: 30px;

  background: yellow;

  border: 1px solid black;

  outline: 1px solid red;

  outline-offset: 15px;

}

All CSS Outline Properties
CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6

The document CSS Outline, Width, Color, Shorthand & Offset | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Width

,

Shorthand & Offset | CSS for Beginners - Class 6

,

Width

,

practice quizzes

,

CSS Outline

,

past year papers

,

CSS Outline

,

Viva Questions

,

pdf

,

video lectures

,

Sample Paper

,

Shorthand & Offset | CSS for Beginners - Class 6

,

study material

,

Color

,

Width

,

ppt

,

Summary

,

Free

,

Previous Year Questions with Solutions

,

Exam

,

MCQs

,

Color

,

mock tests for examination

,

Color

,

shortcuts and tricks

,

Shorthand & Offset | CSS for Beginners - Class 6

,

Objective type Questions

,

CSS Outline

,

Semester Notes

,

Important questions

,

Extra Questions

;