Scribd
Upload
34 views

Question Ans

The document contains a series of questions and answers related to HTML and CSS. Some key points: - Questions cover topics like CSS selectors, properties, layouts, media queries and HTML elements and attributes - Answers demonstrate the correct syntax for various CSS and HTML codes to achieve desired formatting and behaviors - Examples include CSS codes for buttons, links, backgrounds, fonts, positioning etc. and HTML codes for lists, tables, media, iframes etc. The document tests knowledge of HTML and CSS concepts through questions and validates the understanding of their usage through correct code examples in the answers.

Uploaded by

Saloni Kariya
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
34 views

Question Ans

The document contains a series of questions and answers related to HTML and CSS. Some key points: - Questions cover topics like CSS selectors, properties, layouts, media queries and HTML elements and attributes - Answers demonstrate the correct syntax for various CSS and HTML codes to achieve desired formatting and behaviors - Examples include CSS codes for buttons, links, backgrounds, fonts, positioning etc. and HTML codes for lists, tables, media, iframes etc. The document tests knowledge of HTML and CSS concepts through questions and validates the understanding of their usage through correct code examples in the answers.

Uploaded by

Saloni Kariya
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 7

After how many pixels from the left of the block does Hello, userl appear on the web

page?

myApp.html

<div id="foo">Hello, user!</div>

myApp.css

#foo {

position: absolute;

left: clamp (10px, 250px, 500px);

Ans - 250 pixels

How many CSS properties can you set using the single CSS border property?

Ans -3

Q. display: flex;

flex-direction: column-reverse;

flex-wrap: wrap;

float: initial;

flex-grow: inherit;

Ans - Change flex-direction from column-reverse to row

Which is a valid CSS ID selector?

Ans - #foo

Which HTML element should be part of the <head> element?

Ans- <meta name="description" content="All about the head element">

Which CSS property lets you specify a background color for an HTML element?

Ans - background-color

Which is the correct syntax for creating a radio button input field in HTML?

Ans <input type=”radio”>

Which CSS property can keep the text of an HTML button at its center?

Ans text-align

What is true about debugging CSS in the browser?

Ans You can toggle CSS properties on and off when inspecting the HTML element
You are creating a button with a green background, rounded corners, and white text that says. “Click
me!” The button text must turn pink when you hover the mouse over the button. How would you write
the CSS for the button?

Ans <a href=https://pluralsight.com>Click me!</a>

A{

Background-color: green;

Border-radius: 10px;

Color: white;

A:hover {

Color: pink:

What HTML tag do search engines, such as Google and Bing, use as a heading when displaying the search
result?

Ans <Title>

Which CSS layout works in only one dimension?

Ans Flexbox

A link takes you to the Pluralsight website. When you hover the mouse over the link, the link text must
have a solid red border. How would you write its CSS script?

Ans A:hover {

Border: 10px solid red; }

Which HTML element contains information about what text a search engine displays?

Ans <meta name=”description” content=”Website’s information goes here.”>

Which is a common HTML bug that leads to an unexpected output?

Ans <p>This part should not be in bold</strong></p>

What is the meta element for?

Ans To specify the character set, description, keyword, author, and viewport details

How do you add a Font Awesome icon to an <input> tag?

Ans Use the <i> tag inside the <label> tag and use the class fa and the name of the icon.

In CSS, what is the value of the display property to apply a grid layout on an HTML element?

Ans gird-layout
What should you use the header element for?

Ans For a container with introductory content, such as a logo, heading, or navigation links

You are writing a media query for your current HTML application. The media query must return truolonly
if the output device’s pixel density is more than 100 dots per centimeter. How would you configure this?

Ans @media (min-resolution: 100dpcm) { }

You must create a button on your web page. You can apply any of the available CSS properties to this
button Based on the statement, what is true?

Ans You can develop the button without using the button or input elements

You must configure three grid items in three row the first item must occupy the first row completely, the
second item must occupy one-third of the second row from the right, and the third item must occupy
the initial two-third of the third-row track. You see the following scripts

Ans Grid-template-areas: “a a”

“. b”

“C .”

What do you use the style element for?

Ans For defining CSS in the HTML page to style that specific HTML page

You set the innerText to <p>hi</p> using JavaScript What is the problem?

Ans The literal text. “<p>hi</p>” shows on the website.

In a media query, which is a media feature

Ans Display-mode

Which statement is correct based on the following scripts?

Ans When you click the link, the text, “Click me!” immediately turns to orange temporarily

You insert four stylesheets in your HTML hle with the same media query types/features: Which statem

Ans The application uses all four stylesheets in a cascade pattern

What should you use the nav elementlacz

Ans Major blocks of navigation links

What is true about HTML heading toas such as h1 and h6?

Ans The lower the number (from h6 to h1), the larger the heading font size

In a multi-column layout, which CSS property the width of the line that divides the adjacent ?

Ans
Column-rule-width

The following div needs a layout

<div class=”special”>Amazing inner content</div>

You wrote the following CSS

.green {

Color: green;

How can you adjust the div to apply the layout?

Ans <div class=”special” style=”green”>Amazing inner content</div>

You have 23 items to display on your web page in a list format. The symbol for each list must be ->
instead of consecutive numb How would you write the CSS script to customize the li tag?

Ans – 11::marker {

Content: ->’;

Font-size: 10px; }

What information belongs in a meta tag?

Ans Keywords for search engines

You create a web page that displays four links, each directing to an official website. You must provide a
hint to users if a link consints of the word “foo” (case-insensitive) by changing the link text to red. To do
so, you write the following scripts myApp.html

Ans A[href “foo” i] { color: red; }

You attempt to create the following table with three rows

<table>

<th>

<tr>Header 1</tr>

<tr>Header 2</tr>

</th>

Ans Remove <tr> inside <th> and <td> and put <tr> around them.

Which is a div element with an attribute that applies a layout?

Ans <div style="color:green">This is green.</div>


You must apply transitions to a paragraph’s font size and background color with a delay of two seconds
and one second respectively. Each transition must last for five seconds. You write the following scripts.

myApp.html <body>

<p id=”config”>Transition in progress.</p>

</body>

The CSS applies transitions to all three properties without any delay or the proper transition time What
changes to the CSS scrip would resolve the issue?

Ans Transition: background-color 4s is, font-size 4s 25;

You are implementing animations to one of your HTML elements. Which CSS property can you control
with the animation shorthand CSS property?

Ans – animation-fill-mode

1 You apply CSS on a parent div element that holds eight items. Which and track has the smallest size
compared to the other tracks based on the

Following code?

Aconfig(

Displays grid;

Grid-template-columns: 800px 2fr 1fr 3fr;

Ans Second

You store a paragraph inside a div tag with class demo. The paragraph must start 250 pixels from the top
of the block and 60 pixels from the left of the block How would you structure the divs CSS code?

Ans demo( position: absolute; left: 60px; top: 250px;

In which attribute of the meta tag would you mention the viewport’s width and height?

Ans Content

What is a characteristic of the ordered list element?

Ans By default, HTML creates a numbered list

What outer element has the innerText property equal to special?

Ans <p>special</p>

You have a two sentence paragraph You must highlight the words, “this year” by wrapping them in a box
The box must have relatively large borders on its left and right sides compared to its top and bottom
sides How would you configure the CSS?

<p>
We are going to London <span>this year</span>. It is very exciting!

</p>

Ans Span (

Border: 2px solid; border-left: 7px solid; border-right: 7px solid;

Ans You marked color: inherit; instead of color: initial; in shar

Color: inherit;

#baz {

Color: inherit;

You receive the list in red instead of black when running the scripts Why?

Ans You marked color: inherit; instead of color: initial; in #baz

How would you write a CSS script to update the font size to 30 pixels with a gray background?

Ans .welcome (

font-size: 30px;

background-color: gray; }

Which HTML entity is valid?

Ans &amp;

Which valid background property value lets you fill a web page with duplicates of a background image?

Ans repeat

What are void elements in HTML?

Ans Elements that have no content and no closing tag

You must restrict a style where the height must be greater than the element’s width How would you use
a media query to define this style restriction, ensuring that the element’s width does not grow beyond
534 pixels?

Ans

@media (max-width: 534px) and (orientation: portrait) { }

You must create an iframe that opens a new website in the I frame after you click a button. How can you
do so?

Ans

<iframe id=”foo” src=””></iframe>


<button

Onclick=”document.getElementById(‘foo’).src=’https://www.eg.com!”>Open Website</button>

Your vegan Moroccan recipe blog has the following <h1> tag on the home page <h1>Introduction</h1>

In terms of search engine optimization (SEO), how can you improve the displayed header?

Ans <h1>Vegan Moroccan recipes</h1>

You want to embed the following PDF file in your page: <object src-“file.pdf”
type=”application/pdf”></object>

The file is not showing Why?

Ans You must use the data attribute instead of the src attribute

Ans Change flex-direction from column-reverse to row

Ans #config

column-count: 4;

column-gap: 200px;

column-rule: 2px dashed red;

Ans Add the box-sizing: border-box; property to the ul name tag selector

What is the syntax to create a selector that CSS applies to an element after the element changes its
state?

Ans selector:pseudo-class

You might also like