CSS Notes

mobiprep (6).png

Tables and Lists

mobiprep (6).png

CSS Layout

mobiprep (6).png

Pseudo-class

mobiprep (6).png

CSS

mobiprep (6).png

Selectors and Declarations

mobiprep (6).png

Box Model

mobiprep (6).png

Text and Image Formatting

mobiprep (6).png

Icons, lists and Links

mobiprep (6).png

Colors

Heading

Q

1

What are Selectors in CSS?

LRM_EXPORT_207556595493866_20190724_1939

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.

LRM_EXPORT_207556595493866_20190724_1939

Q

2

What are the different types of selectors in CSS?

LRM_EXPORT_207556595493866_20190724_1939

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

LRM_EXPORT_207556595493866_20190724_1939

Q

3

Explain Element Selectors in detail.

LRM_EXPORT_207556595493866_20190724_1939

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>

LRM_EXPORT_207556595493866_20190724_1939

Q

4

Explain the id selector in CSS.

LRM_EXPORT_207556595493866_20190724_1939

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>

LRM_EXPORT_207556595493866_20190724_1939

Q

5

Explain Class selector in CSS.

LRM_EXPORT_207556595493866_20190724_1939

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

LRM_EXPORT_207556595493866_20190724_1939

Q

6

What is a Universal Selector in CSS?

LRM_EXPORT_207556595493866_20190724_1939

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>

LRM_EXPORT_207556595493866_20190724_1939

Q

7

Explain Grouping Selector in CSS.

LRM_EXPORT_207556595493866_20190724_1939

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;
}

LRM_EXPORT_207556595493866_20190724_1939

Q

8

What does the CSS Declaration block contain?

LRM_EXPORT_207556595493866_20190724_1939

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.

LRM_EXPORT_207556595493866_20190724_1939