CSS property: outline MCQs Quiz | Class 10
This quiz for Class X students, covering Computer Applications (Code 165) from Unit 2: HTML, focuses on the CSS ‘outline’ property and its application around elements. Test your knowledge, submit your answers, and download a detailed PDF answer sheet for review.
Understanding the CSS Outline Property
The CSS outline property is a powerful tool for visual styling and enhancing user experience, particularly concerning accessibility. Unlike borders, outlines are drawn outside an element’s border and do not take up space, meaning they do not affect the layout or position of other elements on the page. This quiz covers various aspects of outlines, from their basic definition to their specific properties and practical applications.
Key Characteristics of the outline Property
The outline property is a shorthand for setting one or more of the individual outline properties: outline-style, outline-color, and outline-width. Additionally, outline-offset allows you to create space between an element’s border and its outline.
1. outline-style
This property specifies the style of the outline. Common values include:
none: No outline.solid: A solid outline.dotted: A dotted outline.dashed: A dashed outline.double: A double outline.groove,ridge,inset,outset: 3D-effect outlines (depend on color).
2. outline-color
This property sets the color of the outline. You can use named colors, hexadecimal values, RGB, or HSL values. For example: red, #FF0000, rgb(255,0,0).
3. outline-width
This property specifies the thickness of the outline. Values can be absolute units (e.g., px, em) or predefined values like thin, medium, thick.
4. outline-offset
This property adds space between an element’s border and its outline. A positive value pushes the outline further out, while a negative value pulls it inwards, potentially overlapping the border. The offset is transparent.
Outline vs. Border
It’s crucial to understand the differences between outline and border:
| Feature | Outline Property | Border Property |
|---|---|---|
| Space Occupation | Does NOT take up space; drawn outside element’s box. | Takes up space; adds to element’s total width/height. |
| Layout Impact | No impact on document layout. | Affects document layout and element positioning. |
| Purpose | Mainly for accessibility (focus indication) and debugging. | Stylistic boundary for an element. |
| Shape | Always rectangular (or follows element shape if non-rectangular using border-radius). |
Can be shaped with border-radius. |
| Individual Sides | Cannot style individual sides (e.g., outline-left). |
Can style individual sides (e.g., border-left). |
Accessibility and User Experience
Outlines are primarily used for accessibility, particularly to indicate keyboard focus. When a user navigates a webpage using the Tab key, the currently focused element typically displays a default outline. This visual cue is vital for users who cannot use a mouse. Removing or styling outlines without providing an alternative focus indicator can severely impact usability for many users.
Quick Revision
- The
outlineproperty creates a line around elements, outside the border. - It does not affect element layout.
- Shorthand:
outline: [width] [style] [color]; outline-offsetadds space between the border and outline.- Crucial for accessibility, especially keyboard navigation focus.
Extra Practice Questions
Test your understanding further with these questions:
- Which CSS property is used to specify the distance between an element’s border and its outline?
- Can an outline have different styles on its top, right, bottom, and left sides independently?
- What happens to the document layout when you add an outline to an element?
- If an element has
outline: 5px solid blue;andoutline-offset: -2px;, where will the outline appear relative to the border? - Why is it generally considered bad practice to remove an outline from an interactive element (like a button or link) without providing an alternative visual focus indicator?
