Placement Preparation LogoPlacement Preparation
Aptitude
Quantitative AptitudeData InterpretationLogical ReasoningVerbal ReasoningNon Verbal ReasoningVerbal Ability
Programming
Exercises
PythonC ProgrammingJavaC++JavaScriptSQLView All
Technical MCQs
PythonC ProgrammingC++ ProgrammingJava ProgrammingJavaScriptSQLDSADBMSOperating SystemComputer NetworkReactAngularView All
Interview Questions
PythonC ProgrammingC++JavaDSAOperating SystemView All
Company Specific
Aptitude Questions
AccentureAmazonAmdocsAspire SystemsBoschCapgeminiCognizant GenCCTSDeloitteDXC TechnologyErnst & YoungGenpactView All
Placement Exams
AccentureZohoTCS NQTTCS Digital TCS Prime TCS NinjaWipro WILPCognizant GenCCognizant GenC Next
Resources
Career TransitionBlogWeb Stories
Placement Preparation LogoPlacement Preparation

21. Create a button with rounded corners using border-radius.

Required Input:

A webpage with a <button> tag.

Expected Output:

The button appears with rounded corners.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the button */ </style> </head> <body> <button>Click Me</button> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

22. Change the cursor to a pointer when hovering over a button.

Required Input:

A webpage with a <button> tag.

Expected Output:

The cursor changes to a pointer when hovering over the button.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the button */ </style> </head> <body> <button>Hover Over Me</button> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

23. Make a text uppercase using CSS.

Required Input:

A webpage with a paragraph of text.

Expected Output:

The text appears in uppercase letters.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the text */ </style> </head> <body> <p>Your text here</p> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

24. Create a simple flexbox layout with two boxes side by side.

Required Input:

A webpage with two <div> elements.

Expected Output:

The two boxes appear side by side.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the flexbox layout */ </style> </head> <body> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

25. Set a background image for a div and make it cover the whole div.

Required Input:

A webpage with a <div> element.

Expected Output:

The div has a background image that covers the entire div.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the div */ </style> </head> <body> <div class="background">Content inside the div</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

26. Add spacing between list items using the list-style-position.

Required Input:

A webpage with an unordered list <ul>.

Expected Output:

The list items appear with proper spacing.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the list */ </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

27. Set different colors for alternate rows of a table.

Required Input:

A webpage with a <table> element.

Expected Output:

The alternate rows of the table have different background colors.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the table */ </style> </head> <body> <table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> <tr><td>Row 4</td></tr> </table> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

28. Create a responsive div that adjusts its width to 50% of the screen.

Required Input:

A webpage with a <div> element.

Expected Output:

The div's width is 50% of the screen size.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the div */ </style> </head> <body> <div class="responsive-div">Content inside the div</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

29. Hide an element using the display property.

Required Input:

A webpage with a <p> tag.

Expected Output:

The paragraph is hidden.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to hide the paragraph */ </style> </head> <body> <p>This text should be hidden.</p> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

30. Create a simple animation to change the background color of a div.

Required Input:

A webpage with a <div> element.

Expected Output:

The div's background color changes gradually.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the animation */ </style> </head> <body> <div class="animated-div">Content inside the div</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

ad vertical

3 of 3