CSS Links, Lists & Tables — Interview Questions & Answers
CSS for Links
Ques: How can you style links in CSS?
Ans: Links are styled using pseudo-classes to define different states of a hyperlink.
| Selector | Description |
|---|---|
a:link | Normal (unvisited) link |
a:visited | Link that has been visited |
a:hover | When mouse is over the link |
a:active | When link is being clicked |
Example:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}
Ques: How can you remove the underline from links?
a {
text-decoration: none;
}
You can also customize:
a {
text-decoration: underline wavy red;
}
Ques: How can you make link buttons using CSS?
a.button {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: white;
border-radius: 5px;
text-decoration: none;
}
a.button:hover {
background: #0056b3;
}
CSS for Lists
Ques: How can you style lists in CSS?
Ans: Lists can be styled using the list-style properties:
| Property | Description |
|---|---|
list-style-type | Defines bullet type (disc, circle, square, none, etc.) |
list-style-image | Uses an image as bullet |
list-style-position | Bullet inside or outside content (inside, outside) |
list-style | Shorthand for all three |
Example:
ul {
list-style-type: square;
list-style-position: inside;
}
ol {
list-style-type: upper-roman;
}
Ques: How to use custom images as bullets?
ul {
list-style-image: url("checkmark.png");
}
Or using pseudo-elements for more control:
ul li::before {
content: "✔ ";
color: green;
}
Ques: How to remove default bullets from a list?
ul {
list-style: none;
padding: 0;
margin: 0;
}
Ques: Can you make horizontal navigation using lists?
Ans: Yes, by converting list items to inline or flex.
ul.nav {
list-style: none;
display: flex;
gap: 20px;
}
ul.nav li a {
text-decoration: none;
color: #333;
}
CSS for Tables
Ques: How can you style tables in CSS?
Ans: You can style tables using properties like border, padding, background, and text alignment.
Example:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #007bff;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e9f5ff;
}
Ques: What does border-collapse do in tables?
collapse→ merges table borders into a single border (clean look)separate→ keeps cell borders separate (default behavior)
Ques: How can you style alternate rows differently?
Ans: Use the :nth-child() pseudo-class:
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
Ques: How to create a responsive table?
Wrap your table in a container and allow horizontal scrolling.
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
Ques: How can you freeze table headers?
th {
position: sticky;
top: 0;
background: white;
}
Ques: What is empty-cells in CSS?
Ans: It controls whether to show borders/backgrounds on empty table cells.
table {
empty-cells: hide;
}
Ques: How can you add spacing between table cells?
table {
border-spacing: 10px;
border-collapse: separate;
}