CSS Interview Questions and Answers Web Development

The aspect ratio is defined as the ratio of the width media features to the ratio of height media features W:H. And the aspect ratio 16/9 is 42:32.

The below Media query allows targeting the media query based on device-aspect-ratio, which is 16/9.

@media screen and (device-aspect-ratio: 16/9) {
  /* Your code here */
}

It's no surprise that this one pops up often in CSS interview questions for freshers.  

The :first-line pseudo-element is used to style the first formatted line of a paragraph by using text-transform property with value uppercase.

For e.g.

p:first-line { text-transform: uppercase }

Colors in CSS can be specified by the following six methods:

•          Hexadecimal colors color: #000000;
•          RGB colors color: rgb(100, 115, 220);
•          RGBA colors color: rgba(0, 0, 1, 0.6);
•          HSL colors color: hsl(34, 100%, 23%);
•          HSLA colors color: hsla(34, 100%, 53%, 0.5);
•          Predefined/Cross-browser color names color: burlywood;

opacty is not a css property.

Pseudoclass :first-letter can refer to the first letter of the element, paragraph as below. It is clean approach without enclosing the first letter in span tag and applying the required rule based on the representation.

HTML
<p>Booker T</p>

CSS

html {
  font-size: 3rem;
}
 
p::first-letter {
  border: 1px solid;
  font-weight: bold;
  color: red; 
}

A common in advanced CSS interview question, don't miss this one.  

CSS3 position property allows us to position an element. The types of property values available for a position are static, absolute, fixed, relative, sticky, initial, and inherit.

• Static: It’s a default value of position to any element. Element is rendered one after the other in order. It’s the way as it is. There’s no change in the display of elements. Which will display in the window with default paddings and margins?
• Absolute: The absolute value is used to position the element relative to its parent element. Say if the parent element has ‘x’ margin in the left. The child element ‘y’ margin towards left. The total margin of the child element would be ‘x+y’.
• Fixed: The fixed value is used to position the element relative to the viewport (browser window) and the position of the element would be fixed.
• Relative: The relative value is used to position the element relative to its normal position. 
• Sticky: The stick value is used to position the element based on the user’s scroll. Its position is relative until a given offset position is met. Then it will stick in a place like it’s fixed.
• Initial: This property value allows us to use the default behavior of the element.
• Inherit: This property value allows us to inherit the property of its parent.

CSS can be written in three different ways for an HTML file. 

1. Inline: Writing CSS for an element along with the element definition using the style property.
2. Embedded: Writing the CSS in the head using the style tag.
3. External: Having CSS written in an external document and linking it via link tag.

The best way to write CSS by having an external document and linking it in the required HTML documents. Whereas the reason why having an external document is best because having our CSS written inline it should be rewritten for another element too lots of same code comes up. Whereas CSS is embedded in a style tag we cannot use the styles in a different HTML document again the code should be rewritten in different HTML document too. So, the best way is to use an external document to write CSS and link it in an HTML document.

Ex:

1. Inline: <h1 style=”color: red;”>Hello, World!</h1>
2. Embedded: <style>h1{color: red;}</style>
3. External: <link rel=”stylesheet” type=”text/css” href=”main.css”>

The inline one is written along with the HTML element encapsulated in the body tag. And, the embedded style is written in the style tag encapsulated inside the head tag. And, the external style sheet named main.css is linked using link tag.

A staple in HTML CSS interview question, be prepared to answer this one.  

Selectors are used to selecting the content which you want to add styles too. There are five types of selectors in CSS.

1. Type Selector (Element Selector): selects all the elements which match the given type.

Example: h1 [Selects all the elements with h1 tag.]

2. ID Selector: selects the element which matches the ID value. It’s suggested that there should be only one element for a given ID.

Example: #first-name [Selects the element having first-name as an ID value.]

3. Class Selector: selects all the elements which match the given class name.

Example: .blue [selects all the elements with a class name blue.]

4. Universal Selector: selects all the elements in the document.

Example: * [Selects all the elements in the document.]

5. Attribute Selector: selects the element which matches the attribute value.

Example: a [target = “_blank”] selects all the anchor elements with attribute value is _blank.

90% of the times we use class selectors to apply styles. Only for specific conditions, we use other selectors. It’s better to use class selectors to apply styles for similar elements like labels in a form.

In CSS3 the value for a color property can be given in the below-mentioned ways.

1. Predefined color names: ~140 color names are supported inCSS3. Examples like red, brown, blue, Aqua, Indigo, etc.,
2. Hexadecimal values: The values are given in the format of #RRGGBB where RR is red, GG is green and BB is blue. The values are between 00 and FF.
3. RGB values: RGB color value is specified using the RGB (red, green, blue) function. The RGB values are integer values between 0 and 255 or percentage values between 0% to 100%
4. RGBA values: RGBA color value is specified using the RGBA (red, green, blue, alpha) function. It’s similar to RGB value with an extra parameter called alpha which specifies the opacity.
5. HSL values: HSL stands for hue, saturation, and lightness. HSL color value is specified with the HSL (hue, saturation, lightness) function. Hue is a degree on the color wheel (from 0 to 360). 0 (Zero) or 360 is red, 120 is green, 240 is blue. Saturation is a percentage value. 0% means a shade of grey and 100% is the full color. Lightness is also a percentage. 0% is black, 100% is white.
6. HSLA values: HSLA color value is specified with the HSLA(hue, saturation, lightness, alpha) function. It’s similar to HSL values with an extra parameter called alpha which specifies the opacity.

Serif and sans-serif are the parent fonts to all the available fonts. Serif fonts usually have a hook (commonly known as feet) for all the letters, whereas in sans-serif (sans means without in French), we will not have those hooks.

From the above image, we could clearly see that for the first ‘F’ I have hooks which are highlighted by circles and these are also called as feet. Whereas, we don’t have the feet in the second ‘F’. It’s important to always know which font-family that font which you are using belongs to. Some of the examples of popular serif fonts are Times New Roman, Bookman, Baskerville, Cambria, Courier, Century, Copper Black, Minion, and New York. Some of the examples of popular sans-serif fonts are Arial, Calibri, and Comic Sans, Helvetica, Geneva, San Francisco, and Ubuntu.

All the elements of HTML are boxes. In CSS we use the term box model when we talk about the designs and layouts of the HTML elements. The CSS box model consists of margins, border, padding, and content.

• Margin: Area outside the border is called a margin (Also called as outer area keeping the border as reference). The property to use margin in CSS is ‘margin’ which is a shorthand property will give the mentioned space in all the four sides equally. 
• Border: The area that goes around the padding and content is called a border. The property to use the border in CSS is ‘border’ which is a shorthand will take the size of the border, the color of the border and type of the border as values sequentially.
• Padding: The area around the content is called padding (Also called as Inner area keeping the border as reference). The property to use padding in CSS is ‘padding’ which is a shorthand property will give the mentioned space in all the four sides equally.
• Content: It’s the actual content of the box model which contains text or image.

From the above figure, we can clearly understand that the element as a box and the meaning of all other properties of a box model. It’s always important to know the meaning of all the properties and how they behave and where exactly they occupy the space to become a better CSS developer.

This is a frequently asked in HTML CSS Javascript interview questions.  

Shorthand notations are also called as shorthand properties in CSS. That lets you set multiple values of CSS properties simultaneously. It’s often good to use shorthand notations because it reduces the file size and even improves the performance.

/* Example */
.border{
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}
/* shorthand property for the above border example */
.border{
    border: 1px solid #000;
}

In the above example, we can see that for a border class, we have written three different properties of a border (width, style, and color), which can be written in a better way by just mentioning the border and giving all the required values (width, style, and color). This helps in reducing the file size and even increases the performance. 

Similarly, there are shorthand notations for many CSS properties. One of the other examples is padding and margin properties, which take four different values sequentially and assign each in the clockwise direction (Top, Right, Bottom, and Left).

This question is a regular feature in CSS basic interview questions, be ready to tackle it.  

A pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available. Some of the relevant examples of pseudo-classes are active, checked, disabled, empty, first-child, hover, focus, in-range, invalid, last-child, nth-child, optional, read-only, target, valid, visited, root, required which can actually be used to apply styles.

/* Color changes to Brown on Hovering on anchor tag */
a:hover{
    color: brown;
}
/* Color changes to Red on clicking on anchor tag */
a:active{
    color: black;
}
/* Color changes to red after visiting on anchor tag */
a:visited {
    color: red;
}

In the above example for anchor tag where: visited, hover and: active are used specify the state of the anchor tag and depending on the pseudo-classes the specific styles will be applied. By default, the color of the anchor tag will be blue, on hovering on the anchor tag the color will change to blue, on clicking on it when it activates the color will change to black and after clicking for the remaining period of time the color of the anchor tag will be in red.

For the above scenario, we need to use a pseudo-class to achieve this. pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available.  We use: read-only pseudo-class here in order to achieve selecting the right element and to make the selector only select the not editable one.

/* :read-only pseudo-class is used for the input element */
input:read-only{ 
    background: cyan; 
}

From the above code, we can see that we have used the input selector to select the input element, and the: read-only pseudo-class targets the required element. And the cyan color is added using background property.

Expect to come across this popular HTML CSS interview question.  

The easiest way to draw a circle in CSS is using border-radius property. The code below will display a circle.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      #rcorners {
        border-radius: 50%;
        background: #73AD21;
        border: 3px solid black;
        padding: 20px;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="rcorners"></div>
  </body>
</html>

OUTPUT:

Make sure you have the same width and height and have border-radius as 50% which will display a circle as shown above.

In CSS, ID is suggested to be unique for an element whereas the class name is can be the same for many elements. As the ID is unique for the element, ID has higher priority than class in CSS. Consider the below example for better understanding.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      #rcorners {
        border-radius: 50%;
        background: #FF0000;
        border: 3px solid black;
        padding: 20px;
        width: 200px;
        height: 200px;
      }
      .corners-div {
        border-radius: 50%;
        background: #73AD21;
        padding: 1px;
        width: 20px;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <div id="rcorners" class="corners-div"></div>
  </body>
</html>

OUTPUT:

For the above example, we still see the background color red with the black border as output even after trying to override the background color as green without a border using the class selector below. This clearly answers our question that ID has a higher priority than class.

It's no surprise that this one pops up often in CSS viva questions.  

We can use the CSS pseudo-class property :checked on input type radio & checkbox and the adjacent sibling combinator (E + F) E is the first element which is input type radio or checkboxes and F is the next element which is label.

CSS  

/* E + F */

/* Selected radio input & label */
input[type=radio]:checked+label{
  /* Your styles here */
}

/* Checked checkbox input & label */
input[type=checkbox]:checked+label {
  /* Your styles here */
}

This is a frequently asked CSS interview question. 

CSS variables enables developers to reuse the code, once the variable are defined and it can be reused effectively, which gives good control over stylesheet in terms of code readability, maintenance and bring consistency.

The variables which are declared in :root pseudo-class act as global CSS variables. 

We can declare the variable via :root pseudo-class and reusing the variable using var followed by variable name in parenthesis and assigning to CSS property.

The class .foo and .bar will have the text color in red, the declared variable
--color has been reused via var (--color) in both of these classes.

:root {
  --color: red;
}
 
.foo {
  color: var(--color)
}
 
.bar {
  color: var(--color)
}

There are 11 types of selector, such as:

1. Universal 
2. Element or Type selector
3. ID
4. Class
5. Descendant combinator
6. Child combinator
7. General Sibling combinator
8. Adjacent Sibling combinator
9. Attribute selector
10. Pseudo-class
11. Pseudo-element

Expect to come across this popular HTML CSS interview question.  

The element with position:fixed property will be displayed at the specific offset (top, bottom, left and right) based on the position relative to the viewport.

It will stay at same place when the page is scrolled.

Whereas in position:sticky the element behave as relatively positioned element and once the containing block of the element crosses a specified threshold value it act as position:fixed element. So, the element switches its position based on the threshold value specified by top, bottom, left & right co-ordinates value.

We can do a pattern match for such urls by using the following syntax

a[href^="/"], a[href^=".."] {
        /* Write your styles here */
}

A must-know for anyone heading into CSS interview, this is a frequently asked CSS interview question for experienced professionals.  

The visibility of the div during 3d transform can be managed via backface-visibility:hidden This property set the visibility as whether to show or hide the back face of an element during 3d transform.

Example from code:

• HTML

<div class='container'>
  <div class="card">
<div class="face front">
   See
</div>
<div class="face back">
   Saw
</div>
  </div>
</div>
.container {
  position: relative;
  margin: 12px 24px;
  font-family:  system-ui, -apple-system, Arial, Helvetica, Trebuchet MS;
}

• CSS

.card {
  width: 200px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.container:hover .card {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  line-height: 50px;
  text-align: center;
  border-radius:5px;
}
.front {
  background: DodgerBlue;
  z-index: 10;
}
.back {
  transform: rotateY(180deg);
  background: SlateBlue;
}
.container:hover .front {
  z-index: 0;
}

The difference between the two lies how the effective width of the container is calculated. The border-box & content-box belong to box-sizing property. The box-sizing property tell the browser how the effective width of the container to be calculated.

content-box is based on default css box sizing behavior. The rendered width of the container will include the container width+padding+border. Whereas the border-box tell the browser to include the padding & border values with-in the declared width for e.g. 200 pixels. So, the rendered width will be 200 pixels only. 

So, If you see in terms of historical perspective it behave as the earlier version of internet explorer box model whereas as the content-box is based on W3C box model computation.

Code example                

• HTML

<div id="container-parent">
  <p>I am a parent with two children. </p>
  <div id="container-border-box">
<p>I am child with <code>box-sizing:border-box</code>&nbsp;&amp; i stay with in parent width limit.</p>
  </div>
  <br />
  <div id="container-content-box">
<p>I am child with <code>box-sizing:content-box</code>&nbsp;&amp; i love to cross the parent width limit.</p>
  </div>
</div>

• CSS

#container-parent {
  width: 400px;
  height: 300px;
  border: solid 10px DodgerBlue;
  margin: 0.8em;
}
#container-parent div {
  width: 100%;
  border: 10px solid SlateBlue;
  padding: 5px;
}
#container-border-box {
  box-sizing: border-box;
}
#container-content-box {
  box-sizing: content-box;
}

CSS Counters are similar to variables. It allows to number a list of element.
It is also supported by vast number of browsers IE, Edge, Firefox, Chrome, Safari & Opera. CSS counters can be used to order  

It can be used in various ways to dynamically manage the information with sequential number with prefix or suffix content. It is a great addon for css authors if they are working on a content which include table of content, chapters heading and the numbering is been prefered to be handled by dynamically, rather fixing the numbers manually at each location/line in the code.

CSS has filters that can perform complex operations on raster images and svgs.

It gives tremendous power to css author to perform this operation in browser dynamically. invert()css function invert the color of input image.

 filter: invert(1);

It's no surprise that this one pops up often in CSS interview questions.  

To select language text direction the selector will be [dir=rtl] and followed by class .cw-alert, and to select the div except class .alert-button-container :not pseudoclass can be used as follows.

[dir=rtl] .cw-alert>div:not(.alert-button-container){
/* Your code here */
}

The font family system is proposed by apple in 2015, available with prefix as -apple-system

The idea behind is to allow the web author to make use of native fonts available on different platform running the browser. The font-family system is platform-specific rather browser specific.

The same browser running on different platform/operating system will implement the generic font differently as available on that platform.

body {
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}

For more: https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

The @page at-rule is used to specify the bleed area. It is a good property to manage your content when the medium is based on print.

The bleed is the part on the side of a document that gives the printer a small amount of space.

@page {
  bleed: 1cm;
}

• CSS paint api allows to programmatically generate an image via css.
• The author can create their own paint worklet which is written in javascript and that code can be used with background-image: paint(checkerboard).
• The css paint api is still an evolving technology and google chrome is leading the pack among the browser.
  https://ishoudinireadyyet.com/

To apply stroke on text and fill color, the property text-stroke and text-fill-color can be used with prefix. The same property with prefix (-webkit) is supported by edge, firefox, chrome, safari and opera.

• HTML

<div id="fill-stroke">
  <h1>
    Stroke &amp; Fill
  </h1>
</div>

• CSS  

h1 {
  font-family: Arial, Helvetica, Sans-serif;
}
#fill-stroke {
  background-color: rgb(255, 255, 255);
  color: rgb(102, 102, 102);
  -webkit-text-stroke: 1.4px rgb(0, 0, 0);
  -webkit-text-fill-color: rgb(46, 255, 60);
}

Output:

A common in HTML CSS Javascript interview questions, don't miss this one.  

The will-change property inform the browser which properties are expected to change via css or by javascript

• HTML

<a class='demo' href='#'>Demo url</a>

• CSS

.demo {
  transition: opacity .2s;
  opacity: 1;
  font-family: Arial, Helvetica, Sans-serif;
  font-size: 35px;
  font-weight: bold;
  color: black;
}
.demo:hover {
  will-change: opacity;
}
.demo:active {
  opacity: .2;
}

• DEMO:

The anchor will appear as below. With the css declaration .demo:hover the browser has been informed in advance that opacity will change and set up optimizations in advance.
And when the hyperlink is clicked, the text will have 20% opacity during the transition.

• The variable font is a single font, yet it can exhibit multiple appearance. It can be considered as evolution of Open type fonts.
• The permutation of appearance is stored in a single font and the file size may be larger than the traditional font.
• It gives css authors to vary the size and appearance based on content and context while working with single font.
• font-variation-settings provides low level control to modify the weight (thickness), font stretch and other related properties which are manipulated by axis of variation (identifiable by axis tag).

The scrollbar thumb is styled by pseudoclass ::-webkit-scrollbar-thumb

A scrollbar is made of scrollbar buttons and a track. The track is made up of track pieces and a thumb. The track pieces refer to the areas above and below the thumb.

One of the most frequently posed CSS interview question for experienced, be ready for it.  

The reflow can be imagined via water. As water fit itself according to the container it is poured into. It becomes the cup when poured in cup, if poured in a glass it become glass.

Similarly the content displayed on various devices need to fit and reflow the content based on the device size. For example, by using media queries the page can be authored to reflow the content based on the device dimensions. The reflow of content is also known as responsive web design (RWD).

Reflow computes the layout of page. And it recomputes the position and dimension of the element.

object-fit is the property which handles the picture based on the available width and height.

Using fill value the aspect ratio (Width:Height) will be maintained and image will not appear distorted or squeezed, it will resized so that the longest of either the height or width can fit in the given dimensions.

Other values are cover, none, scale-down.

A staple in advanced CSS interview questions, be prepared to answer this one.  

The :focus-within pseudo selector in CSS, It selects an element if that element contains any children that have :focus.

For e.g. In a form element if there is an element which is capable to receive :focus, the :focus-within will be active on form element.

When the list-style-type:lower-greek symbol is used, the list can be rendered as below.

• HTML 

<ol>
<li>Who</li>
<li>When</li>
<li>Where</li>
<li>What</li>
<li>How</li>
<li>Why</li>
</ol>

• CSS

 li{
  list-style-type:lower-greek
}

Output

Based on the DOM tree, the representation is div element followed by paragraph element which is p, so the choice is (1)

HTML

<div id='container'>
  The Creative tension
</div>

CSS

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dotted #c1c1c1;
}

Output

To add a background color to paragraph element who has no children, we can use the following rule with :empty pseudo class.

HTML

<p></p>
<p>Just</p>
<p>Another world!</p>

CSS

p:empty {
    width: 100px;
    height: 20px;
    background: whitesmoke;
}

Output

The 4 child divs will be horizontally placed next to each other and will be of equal width.

The basic idea to draw a triangle using pure CSS is using border of a box with zero height and width. Let’s see the code below.

<!-- HTML Code -->
<div class="triangle"></div>
/* CSS Code */
.triangle {
    height: 0;
    width: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 100px solid red;
}

Using the basic idea, in the above code example, we have kept the width and height as zero, where the top and bottom borders are transparent and then the right border will be responsible to display the triangle in red color. You can event toggle them by having any two of the borders as transparent and the other border with a random color. Give a try.

/* Answer */
#outer {
    width: 300px;
    height: 300px;
    background-color: black;
    position: relative;
}
#inner {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

OUTPUT:

We have a relative position to the outer div tag and an absolute position for the inner div tag. In order to place the inner div in the middle. We used the top and left at 50%. Using top and left the box position starts from the middle of the top and left which not exactly in the center. So, in order to keep the inner div exactly at the center, we need to use transform, which helps us to place the inner div exactly at the center of the outer div.

Expect to come across this popular question in HTML CSS interview questions.  

Using a CSS selector alone is inefficient in some situations. So, CSS selectors become much more useful when we start combining them to perform a better selection. These relationships are indicated using CSS combinators. Below are examples of combinators.

Pseudo-elements are used to style or modify the specific part of an HTML element using CSS. Let us take an example and understand this better.

Examples:

1. Styling the first letter of an element.
2. Inserting the content before or after the element.

/* Styling the first letter of a p tag */
p::first-letter {
    color: red;
}
/* Adding the content after p tag */
p::after{
    content: "I'm added after the element";
}
/* Adding the content before p tag */
p:hover::before{
    content: "I'm added before the element"
}

Here, in the above example to add the first letter to be in red we use the first-letter pseudo-element. For which the first letter of the paragraph will be in red color. In the next example, we have after and before in which while rendering the p tag. By default, we’ll have the content in the after pseudo-element displayed at the end of the p tag. Whereas when you hover on the p tag. We’ll have the content in the before pseudo-element displayed in the beginning as we have used hover pseudo-class.

Types of selectors:

• Type Selector (Element Selector): selects all the elements which match the given type. 

Example: h1 [Selects all the elements with h1 tag.]

• ID Selector: selects the element which matches the ID value. It’s suggested that there should be only one element for a given ID.

Example: #first-name [Selects the element having first-name as an ID value.] 

• Class Selector: selects all the elements which match the given class name.

Example: .blue [selects all the elements with a class name blue.] 

• Universal Selector: selects all the elements in the document.

Example: * [Selects all the elements in the document.]

• Attribute Selector: selects the element which matches the attribute value.

Example: a [target = “_blank”] selects all the anchor elements with attribute value is _blank.

In CSS, Gradients lets you display transition between two or more colors in a very smooth way. There are two types of Gradients in CSS3.

1. Linear Gradients – In CSS, a Linear gradient is a property value which allows directions and stops colors. The direction goes in 5 different directions up, left, right, down and diagonal any one of the value can be used and for stop colors, there should be a minimum of 2 colors to be mentioned. We can even repeat the linear gradient.

Ex: p {background-image: linear-gradient (direction, stop-color1, stop-color2, stop-color3)}

2. Radial Gradients – In CSS, a Radial gradient is a property value where the transition of the color will be defined from its center axis. By default, the shape would be an ellipse and the position would be in the center. Similar to linear gradients there should at least be two stop colors specified.

Ex: p {background-image: radial-gradient (yellow, green, blue)}

In CSS, say if you have two conflicting styles for an element, the browser should decide which one to apply and render. This is chosen by the browser-based on specificity. Specificity is nothing but a set of rules. Some of the rules are mentioned below.

1. Say- if you have two element selectors selecting the same element but having different styles. The element selector which is read latest by the browser will get applied
2. The element selector has less priority compared to a class selector. So, the styles written in the class selector gets applied.
3. The class selector has less priority compared to an ID selector. So, the styles written in the ID selector gets applied.
4. If we use !important along with the value for a CSS property. This style gets applied no matter it’s a class or an element or an ID selector.

In CSS, rule sets are the complete composition of writing a style to an element. Which comprises of selector along with a pseudo-class or a pseudo-element, declaration block with style properties and values.