Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
HCL · CSS
Practice CSS questions specifically asked in HCL interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
10
Tagged for this company + subject
Company
HCL
View company-wise questions
Subject
CSS
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your HCL CSS round.
The universal selector '*' matches every element on the page. It’s often used to reset margins, padding, or apply base styles globally.
* { margin: 0; padding: 0; }For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.
We use the <link> tag inside the head section to attach an external CSS file. Example: <link rel='stylesheet' href='style.css'>. This question checks if you understand how external styling works in real projects.
<head> <link rel="stylesheet" href="style.css"> </head>
When no explicit row/column placement is defined, the browser automatically places items in available cells following document order. This is called auto-placement.
.grid { display: grid; grid-template-columns: 1fr 1fr; }Inline CSS applies directly to elements. Internal CSS is written in the head tag using <style>. External CSS is stored in a separate file linked with <link>. External is best for scalability and reusability — a frequent interview topic.
<link rel="stylesheet" href="style.css">
Inheritance in CSS means some properties are automatically passed from parent elements to their children. For example, text color and font family are inherited, but box-related properties like margin or padding are not. You can use the 'inherit' keyword to force a property to take its parent’s value.
p { color: inherit; }In the standard box model, total width equals content width plus padding and border. So 100 + (10 + 10) + (5 + 5) = 130px. Margin adds space outside and doesn’t affect element size.
Total = 100 + 10 + 10 + 5 + 5 = 130px
display: none completely removes the element from the layout, as if it doesn’t exist, while visibility: hidden hides the element but keeps its original space reserved. This is useful for animations, toggles, and accessibility control in UI design.
.box { visibility:hidden; }The clear property specifies which sides of an element floating elements are not allowed. For example, clear: both ensures the element appears below any floated elements.
.footer { clear: both; }When an element is set as a grid container, all its **direct children** become grid items that can be positioned within rows and columns defined by grid properties.
.grid { display: grid; }Grid areas let you assign names to specific sections of a grid for easy placement. You define them in `grid-template-areas` and assign to items via `grid-area`. This makes large layouts more readable and maintainable.
.grid { grid-template-areas: 'header header' 'sidebar main'; } .header { grid-area: header; }