Member-only story

For more questions and answers visit our website at Frontend Interview Questions
1. Selectors
CSS selectors allow you to target specific HTML elements to apply styles. Selectors can be based on element type, class, ID, attributes, and more. The flexibility of CSS selectors makes it easier to apply styles to specific elements without repeating code.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Targeting all paragraphs */
p {
color: blue;
}/* Targeting elements with class "highlight" */
.highlight {
background-color: yellow;
}
/* Targeting the element with ID "main-heading" */
#main-heading {
font-size: 24px;
}
</style>
</head>
<body>
<h1 id="main-heading">Welcome to CSS</h1>
<p>This is a paragraph.</p>
<p class="highlight">This paragraph has a highlighted background.</p>
</body>
</html>
Output:
- The
h1
with IDmain-heading
has a font size of 24px. - All paragraphs have blue text.
- The paragraph with the class
highlight
has a yellow background.
2. The Box Model
CSS treats every element on a web page as a box. The CSS Box Model consists of four areas: content, padding, border, and margin. Understanding…