.png)
Mobiprep has created last-minute notes for all topics of Selectors and Declarations to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on Selectors and Declarations.
Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.
Selectors and Declarations
Question 1 - What are Selectors in CSS?
Answer - CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc. There are several different types of selectors in CSS.
Question 2 - What are the different types of selectors in CSS?
Answer - Different types of selectors-
We can divide CSS selectors into five categories:
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
Question 3 - Explain Element Selectors in detail.
Answer - Element Selectors-
The element selector selects all elements with the specified element name i.e The element selector selects the HTML element by name.
Syntax- element { css declarations; }
Example-
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1"Me too!</p>
<p>And me!</p>
</body>
</html>Question 4 - Explain the id selector in CSS.
Answer - The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element. An id name cannot start with a number!
Example-
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue; }
</style>
</head>
<body>
<p id="para1">Hello Javatpoint</p>
<p>This paragraph will not be affected.</p>
</body>
</html>Question 5 - Explain Class selector in CSS.
Answer - The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.
Let's take an example with a class "center".
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector
Question 6 - What is a Universal Selector in CSS?
Answer - The universal selector is used as a wildcard character. It selects all the elements on the pages.
Example-
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px; }
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>Question 7 - Explain Grouping Selector in CSS.
Answer - The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}Question 8 - What does the CSS Declaration block contain?
Answer - The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
A CSS rule-set consists of a selector and a declaration block:
Example
In this example all <p> elements will be center-aligned, with a red text color:
p {
color: red;
text-align: center;
}Example Explained-
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value text-align is a property, and center is the property value.