Overview

Question 1

What is the syntax for a class selector in CSS?

Answer 1

.my_class { property: value; }

Targets all elements with the class ‘my_class’.

Question 2

What does the selector #my_id target?

Answer 2

A specific ID element

Targets an element with the ID ‘my_id’.

Question 3

What does the X[title] selector do?

Answer 3

Targets elements with a specific title attribute

Useful for styling elements based on their attributes.

Question 4

What is the purpose of the :hover pseudo-class?

Answer 4

Targets elements when the mouse hovers over them

Commonly used for interactive styles.

Question 5

What does the :first-child selector target?

Answer 5

The first child of a parent element

Useful for applying styles to the first item in a list.

Question 6

What does the ‘position’ property in CSS control?

Answer 6

The positioning method of an element

Possible values include relative, absolute, fixed, static, and sticky.

Question 7

Fill in the blank: The ‘display’ property can take values such as _______.

Answer 7

none | block | inline | inline-block | flex

Determines how an element is displayed on the page.

Question 8

What is the purpose of flexbox in CSS?

Answer 8

To control the layout of items in a container

Provides a more efficient way to layout, align, and distribute space among items.

Question 9

What does the ‘z-index’ property control?

Answer 9

The stacking order of positioned elements

Higher values are in front of lower values.

Question 10

What is the ‘background-color’ property used for?

Answer 10

To set the background color of an element

Accepts color values such as hex, rgb, or named colors.

Question 11

What does the ‘border-collapse’ property determine?

Answer 11

Whether table borders are collapsed into a single border

Values include collapse or separate.

Question 12

What does the ‘animation-name’ property specify?

Answer 12

The name of the animation to be applied

This name must match a defined keyframe animation.

Question 13

Fill in the blank: The ‘font-weight’ property can take values such as _______.

Answer 13

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Controls the thickness of the text.

Question 14

What is the function of the ‘transition-duration’ property?

Answer 14

Specifies how long a transition effect should take

Typically given in seconds or milliseconds.

Question 15

What does the ‘opacity’ property control?

Answer 15

The transparency level of an element

Ranges from 0 (fully transparent) to 1 (fully opaque).

Question 16

What is the purpose of the ‘text-align’ property?

Answer 16

To set the horizontal alignment of text within an element

Values include left, right, center, and justify.

Question 17

What does the ‘overflow’ property manage?

Answer 17

How to handle content that overflows an element’s box

Values include visible, hidden, scroll, and auto.

Question 18

Fill in the blank: The ‘list-style-type’ property can take values such as _______.

Answer 18

disc | circle | square | decimal | georgian

Defines the marker style for list items.

Question 19

What does the ‘flex-direction’ property control?

Answer 19

The direction in which flex items are placed in the flex container

Values include row, row-reverse, column, and column-reverse.

Question 20

What is the purpose of the ‘max-width’ property?

Answer 20

Sets the maximum width of an element

Prevents the element from growing beyond this width.

Question 21

What does the ‘box-shadow’ property create?

Answer 21

A shadow effect around an element’s box

Can be customized with color, offset, blur, and spread values.

Question 22

What is the ‘cursor’ property used for in CSS?

Answer 22

To specify the type of cursor to be displayed when pointing over an element

Values include pointer, text, move, and custom URLs.

Question 23

What does the ‘column-count’ property control?

Answer 23

The number of columns an element should be divided into

Useful for multi-column layouts.

Question 24

What is the function of the ‘transition-property’ in CSS?

Answer 24

Specifies which property should be transitioned

Can be set to all, or a specific property.

Question 25

What does the '@font-face' rule do?

Answer 25

Defines custom fonts for use in a web document ## Footnote Allows the inclusion of non-standard fonts.

Question 26

How do you link an external CSS stylesheet to an HTML document?

Answer 26

You link an external stylesheet using the tag within the HTML's section, specifying the href attribute for the stylesheet's URL. ## Footnote Example:

Question 27

How do you create an internal stylesheet within an HTML document?

Answer 27

You create an internal stylesheet using the

Question 28

How do you apply inline styles to a single HTML element?

Answer 28

You apply inline styles using the style attribute directly within the HTML element's tag. ## Footnote Example:

Question 29

What is the syntax for a CSS rule?

Answer 29

The syntax for a CSS rule is selector {property: value;}. ## Footnote Example: tag.my_class {property: value;}

Question 30

What are the universal selectors in CSS?

Answer 30

The universal selector is *, which selects all elements. ## Footnote Example: * {color: blue;}

Question 31

How do you select an HTML element by its tag name in CSS?

Answer 31

You select an HTML element by its tag name directly. ## Footnote Example: p {color: blue;}

Question 32

How do you select an HTML element by its ID in CSS?

Answer 32

You select an HTML element by its ID using the # symbol followed by the ID name. ## Footnote Example: #header {color: blue;}

Question 33

How do you select HTML elements by their class name in CSS?

Answer 33

You select HTML elements by their class name using the . symbol followed by the class name. ## Footnote Example: .my_class {color: blue;}

Question 34

How do you select elements that have a specific attribute in CSS?

Answer 34

You select elements that have a specific attribute using square brackets [] with the attribute name. ## Footnote Example: [href] {color: blue;}

Question 35

How do you select elements based on a specific attribute value in CSS?

Answer 35

You select elements based on a specific attribute value using square brackets with the attribute name and value [attribute="value"]. ## Footnote Example: [type="text"] {color: blue;}

Question 36

How do you select child elements in CSS?

Answer 36

You select direct child elements using the > combinator. ## Footnote Example: div > p {color: blue;}

Question 37

How do you select descendant elements in CSS?

Answer 37

You select descendant elements using a space combinator. ## Footnote Example: div p {color: blue;}

Question 38

How do you select adjacent sibling elements in CSS?

Answer 38

You select adjacent sibling elements using the + combinator. ## Footnote Example: h1 + p {color: blue;}

Question 39

How do you select general sibling elements in CSS?

Answer 39

You select general sibling elements using the ~ combinator. ## Footnote Example: p ~ ul {color: blue;}

Question 40

How do you apply styles to an element when the user hovers over it?

Answer 40

You apply styles using the :hover pseudo-class. ## Footnote Example: a:hover {color: red;}

Question 41

How do you apply styles to an active link?

Answer 41

You apply styles using the :active pseudo-class. ## Footnote Example: a:active {color: red;}

Question 42

How do you apply styles to a visited link?

Answer 42

You apply styles using the :visited pseudo-class. ## Footnote Example: a:visited {color: purple;}

Question 43

How do you apply styles to an unvisited link?

Answer 43

You apply styles using the :link pseudo-class. ## Footnote Example: a:link {color: blue;}

Question 44

How do you apply styles to a checked input element?

Answer 44

You apply styles using the :checked pseudo-class. ## Footnote Example: input:checked {outline: 2px solid green;}

Question 45

How do you apply styles to the element that currently has focus?

Answer 45

You apply styles using the :focus pseudo-class. ## Footnote Example: input:focus {border: 2px solid blue;}

Question 46

How do you insert content before an element using CSS?

Answer 46

You insert content using the ::before pseudo-element. ## Footnote Example: p::before {content: "Note: ";}

Question 47

How do you insert content after an element using CSS?

Answer 47

You insert content using the ::after pseudo-element. ## Footnote Example: p::after {content: " (End)";}

Question 48

How do you select the first line of a block-level element?

Answer 48

You select the first line using the ::first-line pseudo-element. ## Footnote Example: p::first-line {font-weight: bold;}

Question 49

How do you select the first letter of a block-level element?

Answer 49

You select the first letter using the ::first-letter pseudo-element. ## Footnote Example: p::first-letter {font-size: 2em;}

Question 50

How do you select the nth child element of a parent?

Answer 50

You select the nth child using :nth-child(n). ## Footnote Example: li:nth-child(2) {color: green;}

Question 51

How do you select the nth-of-type child element of a parent?

Answer 51

You select the nth-of-type child using :nth-of-type(n). ## Footnote Example: p:nth-of-type(3) {color: blue;}

Question 52

How do you select the last child element of a parent?

Answer 52

You select the last child using :last-child. ## Footnote Example: li:last-child {color: red;}

Question 53

How do you select the last-of-type child element of a parent?

Answer 53

You select the last-of-type child using :last-of-type. ## Footnote Example: h2:last-of-type {color: blue;}

Question 54

How do you select the only child element of a parent?

Answer 54

You select the only child using :only-child. ## Footnote Example: p:only-child {font-style: italic;}

Question 55

How do you select the only-of-type child element of a parent?

Answer 55

You select the only-of-type child using :only-of-type. ## Footnote Example: span:only-of-type {font-weight: bold;}

Question 56

How do you select the first child element of a parent?

Answer 56

You select the first child using :first-child. ## Footnote Example: li:first-child {color: blue;}

Question 57

How do you select the first-of-type child element of a parent?

Answer 57

You select the first-of-type child using :first-of-type. ## Footnote Example: h3:first-of-type {color: green;}

Question 58

How do you position an element relative to its normal position in the document flow?

Answer 58

You use position: relative;. ## Footnote Example: left: 10px;

Question 59

How do you position an element relative to the viewport?

Answer 59

You use position: fixed;. ## Footnote Example: top: 0;

Question 60

How do you position an element relative to its closest positioned ancestor?

Answer 60

You use position: absolute;. ## Footnote Example: right: 20px;

Question 61

How do you make an element stay in the same position when the page is scrolled?

Answer 61

You use position: sticky;. ## Footnote Example: top: 0;

Question 62

How do you set the stacking order of positioned elements?

Answer 62

You use z-index: integer;. ## Footnote Example: z-index: 10;

Question 63

How do you float an element to the left or right, allowing text to wrap around it?

Answer 63

You use float: left; or float: right;. ## Footnote Example: float: left;

Question 64

How do you clear the float property, preventing elements from wrapping around a floated element?

Answer 64

You use clear: both; or clear: left; or clear: right;. ## Footnote Example: clear: both;

Question 65

How do you make an element an inline-level block container?

Answer 65

You use display: inline-block;. ## Footnote Example: display: inline-block;

Question 66

How do you make an element a block-level element?

Answer 66

You use display: block;. ## Footnote Example: display: block;

Question 67

How do you make an element an inline-level element?

Answer 67

You use display: inline;. ## Footnote Example: display: inline;

Question 68

How do you hide an element while still reserving its space in the layout?

Answer 68

You use visibility: hidden;. ## Footnote Example: visibility: hidden;

Question 69

How do you hide an element and remove it from the document flow entirely?

Answer 69

You use display: none;. ## Footnote Example: display: none;

Question 70

How do you set the width of an element?

Answer 70

You use width: value;. ## Footnote Example: width: 100px;

Question 71

How do you set the height of an element?

Answer 71

You use height: value;. ## Footnote Example: height: 50px;

Question 72

How do you set the maximum width of an element?

Answer 72

You use max-width: value;. ## Footnote Example: max-width: 800px;

Question 73

How do you set the minimum width of an element?

Answer 73

You use min-width: value;. ## Footnote Example: min-width: 300px;

Question 74

How do you set the maximum height of an element?

Answer 74

You use max-height: value;. ## Footnote Example: max-height: 400px;

Question 75

How do you set the minimum height of an element?

Answer 75

You use min-height: value;. ## Footnote Example: min-height: 150px;

Question 76

How do you add padding around the content of an element?

Answer 76

You add padding using padding: value; or individual properties like padding-top: value;. ## Footnote Example: padding: 10px; Scenario: Create space between an element's content and its border.

Question 77

How do you add margin outside an element's border?

Answer 77

You add margin using margin: value; or individual properties like margin-bottom: value;. ## Footnote Example: margin: 20px; Scenario: Create space between an element and adjacent elements.

Question 78

How do you set the border of an element?

Answer 78

You set the border using border: width style color; or individual properties like border-left: value;. ## Footnote Example: border: 1px solid black; Scenario: Define the visual line surrounding an element.

Question 79

How do you set the radius of an element's corners?

Answer 79

You set the border radius using border-radius: value;. ## Footnote Example: border-radius: 5px; Scenario: Create rounded corners for a box element.

Question 80

How do you add a box shadow to an element?

Answer 80

You add a box shadow using box-shadow: h-offset v-offset blur spread color;. ## Footnote Example: box-shadow: 2px 2px 5px grey; Scenario: Apply a visual shadow effect around an element's box.

Question 81

How do you set the text color of an element?

Answer 81

You set the text color using color: value;. ## Footnote Example: color: blue; Scenario: Change the color of the text displayed within an element.

Question 82

How do you set the background color of an element?

Answer 82

You set the background color using background-color: value;. ## Footnote Example: background-color: lightgrey; Scenario: Define the color filling the background of an element.

Question 83

How do you set the background image of an element?

Answer 83

You set the background image using background-image: url('path/to/image.jpg');. ## Footnote Example: background-image: url('bg.jpg'); Scenario: Use an image as the background of an element.

Question 84

How do you control the repetition of a background image?

Answer 84

You control background image repetition using background-repeat: value;. ## Footnote Example: background-repeat: no-repeat; Scenario: Specify whether a background image should tile or appear only once.

Question 85

How do you control the position of a background image?

Answer 85

You control background image position using background-position: x y;. ## Footnote Example: background-position: center; Scenario: Adjust where a background image is placed within its element.

Question 86

How do you set the background attachment property?

Answer 86

You set the background attachment using background-attachment: value; (e.g., scroll, fixed). ## Footnote Example: background-attachment: fixed; Scenario: Determine if a background image scrolls with the content or stays fixed in the viewport.

Question 87

How do you set the font family for text?

Answer 87

You set the font family using font-family: value;. ## Footnote Example: font-family: Arial, sans-serif; Scenario: Specify the typeface for text within an element.

Question 88

How do you set the font size for text?

Answer 88

You set the font size using font-size: value;. ## Footnote Example: font-size: 16px; Scenario: Control the height of characters in text.

Question 89

How do you set the font weight (boldness) for text?

Answer 89

You set the font weight using font-weight: value;. ## Footnote Example: font-weight: bold; Scenario: Make text appear bolder or lighter.

Question 90

How do you set the font style (e.g., italic) for text?

Answer 90

You set the font style using font-style: value;. ## Footnote Example: font-style: italic; Scenario: Make text appear slanted.

Question 91

How do you set the line height for text?

Answer 91

You set the line height using line-height: value;. ## Footnote Example: line-height: 1.5; Scenario: Control the spacing between lines of text.

Question 92

How do you set the text alignment?

Answer 92

You set the text alignment using text-align: value;. ## Footnote Example: text-align: center; Scenario: Position text horizontally within its container (e.g., left, right, center).

Question 93

How do you set the text decoration (e.g., underline)?

Answer 93

You set the text decoration using text-decoration: value;. ## Footnote Example: text-decoration: underline; Scenario: Add or remove lines from text (e.g., underline, overline, line-through).

Question 94

How do you set the text transform property?

Answer 94

You set the text transform using text-transform: value;. ## Footnote Example: text-transform: uppercase; Scenario: Convert text to uppercase, lowercase, or capitalize words.

Question 95

How do you set the letter spacing?

Answer 95

You set the letter spacing using letter-spacing: value;. ## Footnote Example: letter-spacing: 2px; Scenario: Adjust the horizontal spacing between characters in text.

Question 96

How do you set the word spacing?

Answer 96

You set the word spacing using word-spacing: value;. ## Footnote Example: word-spacing: 5px; Scenario: Adjust the horizontal spacing between words in text.

Question 97

How do you apply a text shadow?

Answer 97

You apply a text shadow using text-shadow: h-offset v-offset blur color;. ## Footnote Example: text-shadow: 1px 1px 2px black; Scenario: Add a shadow effect to text.

Question 98

How do you set the white space property for an element?

Answer 98

You set the white space property using white-space: value;. ## Footnote Example: white-space: nowrap; Scenario: Control how whitespace within an element is handled (e.g., preventing text from wrapping).

Question 99

How do you collapse empty cells in a table?

Answer 99

You collapse empty table cells using empty-cells: hide;. ## Footnote Example: empty-cells: hide; Scenario: Make table cells without content invisible.

Question 100

How do you set the table layout algorithm?

Answer 100

You set the table layout using table-layout: value; (e.g., auto, fixed). ## Footnote Example: table-layout: fixed; Scenario: Control how table columns are calculated and displayed.

Question 101

How do you set the border spacing for table cells?

Answer 101

You set the border spacing using border-spacing: value;. ## Footnote Example: border-spacing: 5px; Scenario: Define the distance between the borders of adjacent table cells.

Question 102

How do you set the border collapse property for tables?

Answer 102

You set the border collapse using border-collapse: value; (e.g., separate, collapse). ## Footnote Example: border-collapse: collapse; Scenario: Control whether table cell borders are rendered individually or as a single shared border.

Question 103

How do you set the text alignment for table cells?

Answer 103

You set the text alignment for table cells using text-align: value;. ## Footnote Example: text-align: center; Scenario: Align the content horizontally within table cells.

Question 104

How do you set the vertical alignment for table cells?

Answer 104

You set the vertical alignment for table cells using vertical-align: value;. ## Footnote Example: vertical-align: middle; Scenario: Align the content vertically within table cells.

Question 105

How do you apply a 2D translation transform to an element?

Answer 105

You apply a 2D translation using transform: translate(x, y);. ## Footnote Example: transform: translate(10px, 20px); Scenario: Move an element horizontally and/or vertically from its current position.

Question 106

How do you apply a 2D scale transform to an element?

Answer 106

You apply a 2D scale using transform: scale(x, y);. ## Footnote Example: transform: scale(1.5, 0.8); Scenario: Resize an element along its horizontal and vertical axes.

Question 107

How do you apply a 2D rotation transform to an element?

Answer 107

You apply a 2D rotation using transform: rotate(angle);. ## Footnote Example: transform: rotate(45deg); Scenario: Rotate an element around its center point.

Question 108

How do you apply a 2D skew transform to an element?

Answer 108

You apply a 2D skew using transform: skew(x-angle, y-angle);. ## Footnote Example: transform: skew(30deg, 10deg); Scenario: Distort an element along its horizontal and/or vertical axes.

Question 109

How do you apply a 2D matrix transform to an element?

Answer 109

You apply a 2D matrix transform using transform: matrix(a, b, c, d, e, f);. ## Footnote Example: transform: matrix(1, 0.5, -0.5, 1, 0, 0); Scenario: Apply multiple 2D transformations (scale, rotate, translate, skew) using a single function.

Question 110

How do you define the origin of an element's transform?

Answer 110

You define the origin of an element's transform using transform-origin: x-pos y-pos;. ## Footnote Example: transform-origin: top left; Scenario: Specify the point around which transformations (like rotations or scaling) are applied.

Question 111

How do you set the perspective for 3D transforms?

Answer 111

You set the perspective using perspective: value;. ## Footnote Example: perspective: 1000px; Scenario: Create a 3D effect by defining the distance from the z-plane.

Question 112

How do you set the perspective origin for 3D transforms?

Answer 112

You set the perspective origin using perspective-origin: x y;. ## Footnote Example: perspective-origin: center top; Scenario: Define the vanishing point for 3D transformations.

Question 113

How do you set the transform style for 3D transforms?

Answer 113

You set the transform style using transform-style: value; (e.g., flat, preserve-3d). ## Footnote Example: transform-style: preserve-3d; Scenario: Indicate how child elements are rendered in 3D space, either flattened or respecting their own 3D transforms.

Question 114

How do you define a CSS animation?

Answer 114

You define a CSS animation using @keyframes animation_name {from {style} to {style}} or with percentages. ## Footnote Example: @keyframes slidein {from {margin-left: 100%;} to {margin-left: 0%;}} Scenario: Create a sequence of styles that an element will gradually change through over time.

Question 115

How do you specify the name of an animation to be applied to an element?

Answer 115

You specify the animation name using animation-name: value;. ## Footnote Example: animation-name: myAnimation; Scenario: Link an element to a previously defined @keyframes rule.

Question 116

How do you set the duration of an animation?

Answer 116

You set the animation duration using animation-duration: value;. ## Footnote Example: animation-duration: 2s; Scenario: Control how long an animation takes to complete one cycle.

Question 117

How do you set the timing function for an animation?

Answer 117

You set the animation timing function using animation-timing-function: value;. ## Footnote Example: animation-timing-function: ease-in-out; Scenario: Define the speed curve of an animation (e.g., slowly starts, then fast, then slowly ends).

Question 118

How do you set the delay before an animation starts?

Answer 118

You set the animation delay using animation-delay: value;. ## Footnote Example: animation-delay: 1s; Scenario: Introduce a pause before an animation begins playing.

Question 119

How do you set the iteration count for an animation?

Answer 119

You set the animation iteration count using animation-iteration-count: value;. ## Footnote Example: animation-iteration-count: infinite; Scenario: Specify how many times an animation should repeat.

Question 120

How do you set the direction of an animation?

Answer 120

You set the animation direction using animation-direction: value; (e.g., normal, reverse, alternate). ## Footnote Example: animation-direction: alternate; Scenario: Control whether an animation plays forwards, backwards, or alternates directions.

Question 121

How do you set the fill mode for an animation?

Answer 121

You set the animation fill mode using animation-fill-mode: value; (e.g., forwards, backwards, both, none). ## Footnote Example: animation-fill-mode: forwards; Scenario: Specify what styles an element should have before and after an animation plays.

Question 122

How do you set the play state for an animation?

Answer 122

You set the animation play state using animation-play-state: value; (e.g., running, paused). ## Footnote Example: animation-play-state: paused; Scenario: Control whether an animation is currently running or stopped.

Question 123

How do you define a CSS transition?

Answer 123

You define a CSS transition using transition: property duration timing-function delay;. ## Footnote Example: transition: background-color 0.5s ease-in-out; Scenario: Smoothly animate changes to an element's CSS properties.

Question 124

How do you specify the CSS property to be transitioned?

Answer 124

You specify the transition property using transition-property: value;. ## Footnote Example: transition-property: all; Scenario: Indicate which specific CSS property should be animated when its value changes.

Question 125

How do you set the duration of a transition?

Answer 125

You set the transition duration using transition-duration: value;. ## Footnote Example: transition-duration: 0.3s; Scenario: Control how long a CSS transition takes to complete.

Question 126

How do you set the timing function for a transition?

Answer 126

You set the transition timing function using transition-timing-function: value;. ## Footnote Example: transition-timing-function: linear; Scenario: Define the speed curve of a CSS transition (e.g., constant speed, acceleration).

Question 127

How do you set the delay before a transition starts?

Answer 127

You set the transition delay using transition-delay: value;. ## Footnote Example: transition-delay: 0.1s; Scenario: Introduce a pause before a CSS transition begins.

Question 128

How do you set the number of columns for multi-column layout?

Answer 128

You set the number of columns using column-count: value;. ## Footnote Example: column-count: 3; Scenario: Divide content into a specified number of columns.

Question 129

How do you set the width of columns for multi-column layout?

Answer 129

You set the column width using column-width: value;. ## Footnote Example: column-width: 200px; Scenario: Define the preferred width for each column in a multi-column layout.

Question 130

How do you set the gap between columns in a multi-column layout?

Answer 130

You set the column gap using column-gap: value;. ## Footnote Example: column-gap: 30px; Scenario: Define the empty space between content columns.

Question 131

How do you add a rule (line) between columns in a multi-column layout?

Answer 131

You add a column rule using column-rule: width style color;. ## Footnote Example: column-rule: 1px solid grey; Scenario: Place a visual separator between the columns of text.

Question 132

How do you make an element span across all columns in a multi-column layout?

Answer 132

You make an element span columns using column-span: all;. ## Footnote Example: column-span: all; Scenario: Allow a heading or image to extend across the full width of a multi-column layout.

Question 133

How do you apply a grayscale filter to an image?

Answer 133

You apply a grayscale filter using filter: grayscale(value);. ## Footnote Example: filter: grayscale(100%); Scenario: Convert an image to black and white.

Question 134

How do you apply a sepia filter to an image?

Answer 134

You apply a sepia filter using filter: sepia(value);. ## Footnote Example: filter: sepia(100%); Scenario: Give an image an.

Question 135

How do you apply a grayscale filter to an image?

Answer 135

You apply a grayscale filter using filter: grayscale(value);. ## Footnote Example: filter: grayscale(100%);

Question 136

How do you apply a sepia filter to an image?

Answer 136

You apply a sepia filter using filter: sepia(value);. ## Footnote Example: filter: sepia(100%);

Question 137

How do you apply a saturate filter to an image?

Answer 137

You apply a saturate filter using filter: saturate(value);. ## Footnote Example: filter: saturate(200%);

Question 138

How do you apply a hue-rotate filter to an image?

Answer 138

You apply a hue-rotate filter using filter: hue-rotate(angle);. ## Footnote Example: filter: hue-rotate(90deg);

Question 139

How do you apply an invert filter to an image?

Answer 139

You apply an invert filter using filter: invert(value);. ## Footnote Example: filter: invert(100%);

Question 140

How do you apply an opacity filter to an image?

Answer 140

You apply an opacity filter using filter: opacity(value);. ## Footnote Example: filter: opacity(0.5);

Question 141

How do you apply a brightness filter to an image?

Answer 141

You apply a brightness filter using filter: brightness(value);. ## Footnote Example: filter: brightness(1.5);

Question 142

How do you apply a contrast filter to an image?

Answer 142

You apply a contrast filter using filter: contrast(value);. ## Footnote Example: filter: contrast(200%);

Question 143

How do you apply a blur filter to an image?

Answer 143

You apply a blur filter using filter: blur(value);. ## Footnote Example: filter: blur(5px);

Question 144

How do you apply a drop shadow filter to an image?

Answer 144

You apply a drop shadow filter using filter: drop-shadow(h-offset v-offset blur color);. ## Footnote Example: filter: drop-shadow(2px 2px 2px black);