.png)
CSS Notes
.png){kind=small}
Tables and Lists
CSS Layout
Pseudo-class
CSS
Selectors and Declarations
Box Model
Text and Image Formatting
Icons, lists and Links
Colors
Heading
Q
1
What are Selectors in CSS?
Ans
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.
Q
2
What are the different types of selectors in CSS?
Ans
Different types of selectors-
We can divide CSS selectors into five categories:
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
Q
3
Explain Element Selectors in detail.
Ans
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>
Q
4
Explain the id selector in CSS.
Ans
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>
Q
5
Explain Class selector in CSS.
Ans
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
Q
6
What is a Universal Selector in CSS?
Ans
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>
Q
7
Explain Grouping Selector in CSS.
Ans
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;
}
Q
8
What does the CSS Declaration block contain?
Ans
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.
