# CSS3 Interview Questions
## Introduction
CSS3 stands for Cascading Style Sheets Level 3 is the third version of CSS standard that is used to style and format the web pages. CSS3 incorporates CSS2 standard with some improvements over it. The main change in CSS3 is that inclusion of divisions of standards into different modules that makes CSS3 easier to learn and understand.

## Interview Questions

### CSS3 Interview Questions for Freshers
#### 1. What property is used for changing the font face?
We can use the font-family property for achieving this. The `font-family` property is used for specifying what font needs to be applied on the targetted DOM element. It can hold several font names as part of "fallback" mechanism in case the browser does not support the fonts. For example, we can use:

p {
  font-family: "Times New Roman", Times, serif;
}

In the above piece of code, we are applying font-family property to the paragraph element.
- It tells the browser to look for "Times New Roman" font and apply it.
- If the "Times New Roman" font is not installed or supported, then it asks the browser to use Times font.
- If both "Times New Roman" and Times are not supported, then it asks the browser to use any supported generic font belonging to serif.

If you do not want the font-face of the paragraph element to be Times New Roman/Times/serif font, and you want to use the Arial/Helvetica/sans-serif font, then we can just update the CSS property of paragraph element as:

p {
  font-family: Arial, Helvetica, sans-serif;
}

#### 2. What are the differences between adaptive design and responsive design?
|Adaptive Design|Responsive Design|
|--|--|
|Adaptive design focuses on developing websites based on multiple fixed layout sizes. | Responsive design focuses on showing content on the basis of available browser space.
|When a website developed using adaptive design is opened on the desktop browser, first the available space is detected and then the layout with most appropriate sizes are picked and used for the display of contents. Resizing of browser window has no affect on the design. |When a website developed using responsive design is opened on a desktop browser and when we try to resize the browser window, the content of the website is dynamically and optimally rearranged to accomodate the window. |
| Usually, adaptive designs use six standard screen widths - 320 px, 480 px, 760 px, 960 px, 1200 px, 1600 px. These sizes are detected and appropriate layouts are loaded.| This design makes use of CSS media queries for changing styles depending on the target devices properties for adapting to different screens. |
|It takes a lot of time and effort to first examine the options and realities of the end users and then design best possible adaptive solutions them.| Generally, Responsive design takes much less work to build and design fluid websites that can accomodate content from screen depending on the screen size. |
| Gives a lot of control over the design to develop sites for specific screens. | No much control over the design is offered here. |

#### 3. How are the CSS selectors matched against the elements by the browser?
The order of matching selectors goes from right to left of the selector expression. The elements in the DOM are filtered by browsers based on the key selectors and are then traversed up to the parent elements for determining the matches. The speed of determining the elements depends on the length of the chain of selectors. Consider an example:

p span{ 
    color: black;
}

Here, the browser first finds all `span` elements in the DOM and then it traverses to each of it's parent element to check if they are the paragraph `p` elements.
Once the browser finds **all** matching span tags having paragraph elements as parent and applies the color of black to the content, the matching process is stopped.

#### 4. How is `border-box` different from `content-box`?
`content-box` is the default value box-sizing property. The height and the width properties consist only of the content by excluding the border and padding. Consider an example as shown:

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

Here, the box-sizing for the div element is given as content-box. That means, the height and width considered for the div content excludes the padding and border. We will get full height and width parameters specified for the content as shown in the below image.

The `border-box` property includes the content, padding and border in the height and width properties. Consider an example as shown:

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Here, the box-sizing for the div element is given as border-box. That means, the height and width considered for the div content will also include the padding and border. This means that the actual height of the div content will be:

actual height = height - 
                padding on top and bottom - 
                border on top and bottom
              = 200 - (15*2) - (5*2) 
              = 160 px

and the actual width of the div content would be:

actual width  = width - 
                padding on right and left - 
                border on right and left
              = 300 - (15*2) - (5*2) 
              = 260 px

This is represented in the image below:

#### 5. How is opacity specified in CSS3?
Opacity refers to the degree to which the content is transparent or opaque. We can use the property named `opacity` which takes the values ranging from 0 to 1. 0 specifies that the element is completely transparent where 1 means that the element is completely opaque. We can use the opacity property as follows:

div { 
    opacity: 0.6;
}

In the above example, an opacity of 60% is applied to the div section.
The opacity property is not supported by the internet explorer browser. To make it work there, we need to use filter property as polyfill as shown in the example below.

div { 
    opacity: 0.6;
    filter: alpha(opacity=60);
}


#### 6. Why should we use float property in CSS?
The float property is used for positioning the HTML elements horizontally either towards the left or right of the container. For instance,

.float-demo {
     float: right; 
}

Here, the element to which the class is applied ensures that the element is positioned on the right of the container. If you specify the value of float as left, then the element will be placed on the left side of the container.

#### 7. What is a z-index, how does it function?
z-index is used for specifying the vertical stacking of the overlapping elements that occurs at the time of its positioning. It specifies the vertical stack order of the elements positioned that helps to define how the display of elements should happen in cases of overlapping.

The default value of this property is 0 and can be either positive or negative. Apart from 0, the values of the z-index can be:
* Auto: The stack order will be set equal to the parent.
* Number: Number can be positive or negative. It defines the stack order.
* Initial: The default value of 0 is set to the property.
* Inherit: The properties are inherited from the parent.

The elements having a lesser value of z-index is stacked lower than the ones with a higher z-index.
From the above figure, we can see that as the value of z-index increases along the z-axis, the order of stacking would be towards the top of other elements along the vertical axis.

#### 8. What do the following CSS selectors mean?
#### 1. div, p
#### 2. div p
#### 3. div ~ p
#### 4. div + p
#### 5. div > p
The meaning of the given list of selectors goes as follows:
1. `div, p` : This selector implies to select all div elements and all p elements.
Consider an example below:

    <h1>Heading 1</h1>
    <div>
        Division 1
        <p> paragraph 1</p>
    </div>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <div>
        Division 2
    </div>
    <span> Span 1 </span>

Here, **all** the div elements and the p elements would be selected by the browser irrespective of their parents or where they are placed. The remaining tags like h1 and span are ignored.
2. `div p` : This selector tells to select all p elements that are inside div elements. Consider an example example below:

    <h1>Heading 1</h1>
    <div>
        Division 1
        <p> paragraph 1</p> <!-- Will be selected -->
        <div>
            <p> Inner Div Paragraph </p> <!-- Will be selected -->
        </div>
    </div>
    <p> paragraph 2</p>
    <p> paragraph 3</p>
    <div>
        Division 2
    </div>
    <span> Span 1 </span>

Here, `<p> paragraph 1</p>` and `<p> Inner Div Paragraph </p>` would be selected by the browser and the properties are applied. Rest of the paragraph tags are not selected.
3. `div ~ p` : This selector tells to select all p elements that have div elements preceeded anywhere. Consider an example,

    <h1>Heading 1</h1>
    <div>
        Division 1
        <p> paragraph 1</p>
    </div>
    <p> paragraph 2</p> <!-- Will be selected -->
    <p> paragraph 3</p> <!-- Will be selected -->
    <div>
        Division 2
    </div>
    <span> Span 1 </span>

Here, paragraph 2 and paragraph 3 elements would be selected as marked in the code above.
5. `div + p` : This selector says to select all p elements placed immediately after the div element. Consider an example in this case:

        <h1>Heading 1</h1>
        <div>
            Division 1
            <p> paragraph 1</p>
        </div>
        <p> paragraph 2</p> <!-- Will be selected -->
        <p> paragraph 3</p> 
        <div>
            Division 2
        </div>
        <span> Span 1 </span>

In this case, we have paragraph 2 element immediately after the div tag. Hence, only that element will be selected.
7. `div > p` : This selector says to select all p elements which has div as an immediate parent. In the same example below:

        <h1>Heading 1</h1>
        <div>
            Division 1
            <p> paragraph 1</p> <!-- Will be selected -->
        </div>
        <p> paragraph 2</p> 
        <p> paragraph 3</p> 
        <div>
            Division 2
        </div>
        <span> Span 1 </span>

Only `<p> paragraph 1</p>` will be selected in this case because it has immediate div as the parent.

#### 9. What are the properties of flexbox?
Flexbox stands for flexible box and it was introduced around 2017 in CSS with the purpose of providing efficient way to handle layouts, align elements within it and distribute spaces amongst the items in dynamic/responsive conditions. It provides enhanced ability to alter the dimensions of the items and make use of the available space in the container efficiently. In order to achieve this, CSS3 provides some properties.
The properties of flexbox are as follows:
* **flex-direction**: This property helps in defining the direction the container should stack the items targetted for flex. The values of this property can be
* row: Stacks items horizontally from left to right in the flex container.
* column: Stacks items vertically from top to bottom in the flex container.
* row-reverse: Stacks items horizontally from right to left in the flex container.
* column-reverse: Stacks items vertically from bottom to top in the flex container.
* **flex-wrap**: This property specifies of the flex items should be wrapped or not. Possible values are:
* wrap: The flex items would be wrapped if needed.
* nowrap: This is the default value that says the items won't be wrapped.
* wrap-reverse: This specifies that the items will be wrapped if needed but in reverse order.
* **flex-flow**: This property is used for setting both flex-direction and flex-wrap properties in one statement.
* **justify-content**: Used for aligning the flex items. Possible values are:
* center: It means that all the flex items are present at the center of the container.
* flex-start: This value states that the items are aligned at the start of the container. This is the default value.
* flex-end: This value ensures the items are aligned at the end of the container.
* space-around: This value displays the items having space between, before, around the items.
* space-between: This value displays items with spaces between the lines.
* **align-items**: Is used for aligning flex items.
* **align-content**: This is used for aligning the flex lines.

#### 10. What is cascading in CSS?
"Cascading" refers to process of going through the style declarations and defining weight or importance to the styling rules that helps browser to select what rules has to be applied in times of conflict. The conflict here refers to multiple rules that are applicable to a particular HTML element. In such cases, we need to let browser know what style needs to be applied to the element. This is done by cascading down the list of style declarations element.
For example, if we have the below style:

p{
    color:white;
}

and we also have the following declaration below it or in other stylesheet that has been linked to the page:

p{
    color: black;
}

We have a conflict in color property here for the paragraph elements. Here, the browser just cascades down to identify what is the most recent and most specific style and applies that. Since we have the `color:black;` as the most specific declaration, the color black is applied to the paragraph elements. Now if you want to ensure color white is applied to the paragraph, we can define weight to that style by adding `!important` as shown below:

p{
    color:white !important;
}

`!important` ensures that the property has the maximum weight in presence of other conflicting properties.

### CSS3 Interview Questions for Experienced
#### 1. How does the absolute positioning work?
Absolute positioning is a very powerful positioning mechanism that allows users to place any element wherever they want in a exact location. The CSS properties right, left, top, bottom and define the exact locations where you need to place the element. In absolute positioning, following points needs to be considered:
- The element to which the absolute positioning is applied is removed from the normal workflow of the HTML document.
- The HTML layout does not create any space for that element in its page layout.
- The element is positioned relative to the closest positioned ancestor. If no such ancestor is present, then the element is placed relative to the initial container block.
- The final position of the element is determined based on values provided to the top, right, left, bottom.

#### 2. How does this property work `overflow: hidden`?
The overflow property in CSS is used for specifying whether the content has to be clipped or the scrollbars have to be added to the content area when the content size exceeds the specified container size where the content is enclosed. If the value of overflow is hidden, the content gets clipped post the size of the container thereby making the content invisible. For example,

div {
    width: 150px;
    height: 50px;
    overflow: hidden;
}

If the content of the div is very large and exceeds the height of 50px, the content gets clipped post 50px and the rest of the content is not made visible.

#### 3. How will you align content inside the p tag at the exact center inside the div?
We can add the `text-align: center` property inside the parent div for aligning the contents horizontally. But it will not align the contents vertically. We can align the content vertically by making the parent element have relative positioning and the child element have absolute positioning. The child element should have the values of top, bottom, right, left as 0 to center it in the middle vertically. Then we need to set the margin as auto. It is assumed that both the child and mother elements will have height and width values.

Consider we have a div element of height and width taking 20% of the screen size, and we have a paragraph element taking height of 1.2em and width of 20%. If we want to align the paragraph element at the center (vertically and horizontally), we write the following styles:

div {
    position : relative;  // Make position relative
    height : 20%;
    width : 20%;
    text-align : center; //Align to center horizontally
}
p {
    position : absolute; // Make position absolute
    top:0;                // Give values of top, bottom,left, right to 0
    bottom:0;
    left:0;
    right:0;
    margin : auto;        // Set margin as auto
    height : 1.2 em;
    width : 20%;
}

#### 4. How is margin different from padding in CSS?
Margin property using which we can create space around the elements. We can also create space for borders defined at the exteriors. We have the following properties for defining the margin:
* margin-top
* margin-right
* margin-bottom
* margin-left
margin property by itself has the values as:
* auto – The browser auto calculates the margin while we use this.
* length – The value of this property can be in px, pt, cm, em etc. The values can be positive or negative.
* % – We can also give percentage value as margin to the element.
* inherit – Using this property, the margin properties can be inherited from the parent elements.

The padding property is used for generating the space around the element's content and inside any known border. The padding also has sub-properties like:
* padding-top
* padding-right
* padding-bottom
* padding-left

It is to be noted that the padding does not allow negative values.

From the below image, we can see that the Margin is the outermost entity of the CSS Box Model that lies outside of the borders whereas the padding lies within the borders.

#### 5. What do you have to do to automatically number the heading values of sections and categories?
We can use the concept of CSS counters. This lets us adjust the appearance of the content based on the location in a document. While using this, we need to first initialize the value of the counter-reset property which is 0 by default. The same property is also used for changing the value to any number that we need. Post initialization, the counter's value can be incremented or decremented by using the counter-increment property. The name of the counter cannot be CSS keywords like "none", "initial", "inherit" etc. If the CSS keywords are used, then the declaration would be ignored.

Consider an example as shown below:

body {
  counter-reset: header;   /* define counter named 'header' whose initial value is 0 by default */
}

h2::before {
  counter-increment: header;   /* The value of header counter by 1.*/
  content: "Header " counter(header) ": ";  /* To display word Header and the value of the counter with colon before it.*/
}

Here, we are trying to achieve auto count increment and display feature for the h2 tag. Wherever we use h2 tag, the content will be prefixed by "Header 1 : " , "Header 2 : ", "Header 3 : " etc.

#### 6. How is the `nth-child()` different from nth of type selectors?
Both are pseudo-classes (Pseudo classes are those keywords that specifies special state of the selected element). The `nth-child()` pseudo-class is used for matching elements based on the number that represents the position of an element based on the siblings. The number is used to match an element on the basis of the element's position amongst its siblings.

For example, in the below piece of code, if we give nth-child(4) for the example class, then the 4th child of the example class is selected irrespective of the element type. Here, the fourth child of example class is div element. The element is selected and a background of black is added to it.

.example:nth-child(4) {   
    background: black; 
}
<div class="example">
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<div>This is a div.</div> <!-- 4th Element to select and apply style-->
	<div>This is a div.</div> 
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<div>This is a div.</div>
</div>

The `nth-of-type()` pseudo-class is similar to the nth-child but it helps in matching the selector based on a number that represents the position of the element within the elements that are the siblings of its same type. The number can also be given as a function or give keywords like odd or even.

For example, in the below piece of code, if we give `p:nth-of-type(even)` for the example class, then all the even paragraph tags are selected within the example class and the style of background black is applied to them. The selected elements are marked in comments in the below code:

.example p:nth-of-type(even) { 
    background: black; 
}
<div class="example">
	<p>This is a paragraph.</p> 
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<p>This is a paragraph.</p> 
	<div>This is a div.</div>
	<div>This is a div.</div> 
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<p>This is a paragraph.</p> 
	<div>This is a div.</div>
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<div>This is a div.</div>
</div>

#### 7. What is the importance of CSS Sprites?
CSS sprites are used for combining multiple images in a single larger image. They are commonly used for representing icons that are used in the user interfaces. The main advantages of using sprites are:
- It reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.
- It helps in downloading assets in advance that help display icons or images upon hover or other pseudo-states.
- When there are multiple images, the browser makes separate calls to get the image for each of them. Using sprites, the images are combined in one and we can just call for that image using one call.

Consider an example where our application requires 3 images as shown below (Without Sprites Section). If we are trying to load the images independently, we require 3 different HTTP Requests to get the data. But if we have CSS Sprites where all 3 images are combines into 1 separated by some spaces, then we require only 1 HTTP Request.
We can access each image from the sprite by accessing the postioning properties as shown in the below code:

<!DOCTYPE html>
<html>
<head>
<style>
#home-icon {
  left: 0px;
  width: 46px;
  background: url('spriteFile.gif') 0 0;
}

#prev-icon {
  left: 63px;
  width: 43px;
  background: url('spriteFile.gif') -47px 0;
}

#next-icon {
  left: 129px;
  width: 43px;
  background: url('spriteFile.gif') -91px 0;
}
</style>
</head>
<body>

<img id="home-icon" src="spriteFile.gif" width="1" height="1">    <!-- To display home icon here -->
<img id="next-icon" src="spriteFile.gif" width="1" height="1">    <!-- To display next icon icon here -->
<img id="prev-icon" src="spriteFile.gif" width="1" height="1">    <!-- To display previous icon icon here -->

</body>
</html>

In the above code, we are trying to access each element - house, previous and next icon - from the sprite file by using the left, width properties. The image is displayed in the img section by means of the background property. Do note that the source of the image (src attribute of the img tag) is just one file which is the `spriteFile.gif` and depending on the rules specified in the id selectors, the images are loaded accordingly.

#### 8. What do you understand by tweening?
Tweening is the process of filling the gaps between the key sequences, i.e between the keyframes that are already created. Keyframes are those frames that represent start and end point of animation action. Tweening involves generating intermediate keyframes between two images that give the impression that the first one has evolved smoothly to the second image. For this purpose, we use properties like transforms - matrix, translate, scale, rotate etc.

In the below example, we are generating intermediate frames of paragraph elements to slide through from the start to the right edge of the browser.

p {
  animation-duration: 2s;
  animation-name: slidethrough;
}

@keyframes slidethrough {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Here, the paragraph element specifies that the animation process should take 2 seconds for execution from start to the finish. This is done by using the `animation-duration` property. The animation name of the `@keyframes` is defined by using the property `animation-name`. The intermediate keyframes are defined by using `@keyframes` rule. In the example, we have just 2 keyframes. The first keyframe starts at 0% and runs till the left margin of 100% which is the right most edge of the containing element. The second keyframe starts at 100% where the left margin is set as 0% and the width to be set as 100% which results in finishing the animation flush against the left edge of the container area.

#### 9. Why do we need to use clear property along with floats in CSS?
The clear property along with floats is used for specifying which side of floating elements are not supposed to float. An element having clear property ensures that the element does not move up adjacent to the float. But the element will be moved down past the float.

Let us understand this with the help of an example. We know that the floated objects do not add to the height of the objects where they reside. Consider we have a div element with class "floated_div" within another div element with id "main_div".

<html>
    <head>
    <style>
        #main_div {
             width: 400px;
             margin: 10px auto;
             border: 4px solid #cccccc;
             padding: 5px;
        }

        .floated_div {
             float: left;
             width: 50px;
             height: 50px;
             border: 2px solid #990000;
             margin: 10px;
        }
    </style>
    </head>
    <body>
        <div id="main_div">
             <p>Clear Float Demo</p>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
        </div>
    </body>
</html>

The result of this code would be as shown below.We see that the squares that are expected to be within dev are not within the main parent div. How do we fix this?
We can do it just by adding `<div style="clear:both"></div>` line at the end of the last floated element so that the floated elements are fit in properly within the main div container.

<html>
    <head>
    <style>
        #main_div {
             width: 400px;
             margin: 10px auto;
             border: 4px solid #cccccc;
             padding: 5px;
        }

        .floated_div {
             float: left;
             width: 50px;
             height: 50px;
             border: 2px solid #990000;
             margin: 10px;
        }
    </style>
    </head>
    <body>
        <div id="main_div">
             <p>Clear Float Demo</p>
            
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div style="clear:both"></div>    <!-- Adding this fixed the issue -->
        </div>
    </body>
</html>

The result of this will be:

#### 10. How will you fix browser-specific styling issues?
There are two ways to fix browser-specific issues.
- We can write browser-specific styles separately in different sheets and load that only when the specific browser is used. This makes use of the server-side rendering technique.
- We can use auto-prefix for automatically adding vendor prefixes in the code.
- We can also use normalize.css or reset CSS techniques.

There are some ways for avoiding browser compatibility issues too. They are as follows:
- **Validate HTML and CSS:** We know that the code will be read, interpreted and handled differently by different browsers. We need to validate our HTML and CSS files for the missing closing tags, or missing semicolons in the syntaxes because there are chances that the old browsers will throw errors while rendering the code. We can avoid those errors by:
- Maintaining well-aligned code that helps in easy readibility.
- Inserting comments at necessary places.
- Make use of validation tools like Jigsaw CSS validator, W3C HTML Validators to identify syntax issues in the code.
- **Maintain Cross-Browser Compatibility in the Layouts:** Cross-Browser compatibility is a must while developing web applications. We expect our application to be responsive across all devices, browsers and platforms. Some of the effects of layout incompatibilities are unresponsiveness of the layouts in mobile devices, difference in layout rendering between modern and old browsers, etc. These incompatibilities can be avoided by using:
- CSS Multi-Column layouts - For maintaining proper layouts w.r.t columns and containers.
- HTML viewport metatag – For ensuring content is properly spanned across mobile devices.
- CSS Flexbox and Grids - To lay out child elements depending on the content and available space.
- CSS resets stylesheets - For reducing browser inconsistencies in default line heights, font sizes, margins etc.
- **Check JavaScript Library issues:** Ensure the libraries are used judiciously and the ones used are supported by the browsers.
- **Check DOCTYPE tag keyword:** The DOCTYPE keyword is meant for defining rules of what needs to be used in the code. Older browser versions check for DOCTYPE tag at the beginning and if not found, the application rendering wont be proper.
- **Test on real devices:** Although applications can be tested on virtual environments, it would be more beneficial if the testing is carried out on real devices and platforms. We can use tools like Testsigma for this purpose that enables to test in real devices parallely.

### Conclusion
CSS plays the most important role in the field of web development. This is because CSS helps in achieving beautiful, responsive or adaptive websites depending on the business requirements. CSS helps in building lighter and flexible layouts that help in loading pages faster and making the content visually appealing. CSS is continuously evolving and is becoming more powerful thereby making it the most sought after technology by various companies to develop websites. In this article, we have seen the most commonly asked interview questions in CSS, more particularly CSS3.

### References
https://css-tricks.com/guides/
https://www.w3schools.com/css/

### Multiple choice questions
#### 1. How will you select the anchor element whose href attribute starts with https?
- [ ] a. `a[href*="https"]`
- [x] b. `a[href^="https"]`
- [ ] c. `a[href$="https"]`
- [ ] d. `a[href~="https"]`
- Answer: b

#### 2. What CSS3 property is used for capitalizing the text or converting them to lowercase or uppercase?
- [x] a. text-transform
- [ ] b. text-translate
- [ ] c. text-convert
- [ ] d. text-format
- Answer: a

#### 3. In the following piece of code, does the stylesheet2.css sheet has to be loaded and parsed before the first p tag is loaded?

<head>
    <link href="stylesheet1.css" rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link href="stylesheet2.css" rel="stylesheet">
</body>

- [ ] a. We cant write link tags inside the body.
- [ ] b. No
- [x] c. Yes
- [ ] d. Loads after the paragraph are loaded
- Answer: c

#### 4. How would you select which anchor element will have href consisting of the substring "js"?
- [x] a. `a[href*="js"]`
- [ ] b. `a[href="*js"]`
- [ ] c. `a[href="$js"]`
- [ ] d. `a[href$="js"]`
- Answer: a

#### 5. What property should be used in case we need to display a nice blue border that is dotted in nature around an image?
- [ ] a. border-dotted
- [ ] b. border-line
- [ ] c. border-decoration
- [x] d. border-style
- Answer: d

#### 6. Which among the following options represent correct syntax for selecting all paragraph elements in a div element?
- [ ] a. `div < p`
- [ ] b. `div + p`
- [x] c. `div p`
- [ ] d. `div ~ p`
- Answer: c

#### 7. What CSS3 property is used for the set distance between borders of adjacent tables cells?
- [x] a. border-spacing
- [ ] b. border-collapse
- [ ] c. cell-spacing
- [ ] d. cell-collapse
- Answer: a

#### 8. Which of the below options are used for defining the difference between two lines of the content?
- [ ] a. line-distance
- [x] b. line-height
- [ ] c. line-gap
- [ ] d. line-min
- Answer: b

#### 9. Which among the below property is used for setting the blend mode of background layers in an element?
- [x] a. background-blend-mode
- [ ] b. background-blend
- [ ] c. blend-mode-background
- [ ] d. blend-background
- Answer: a

#### 10. Which among the below options are used for giving line over text?
- [ ] a. `text-transform: line-through`
- [ ] b. `text-transform: overline`
- [ ] c. `text-decoration: overline`
- [x] d. `text-decoration: line-through`
- Answer: d