Stylesheet:-

It is a set of formatting instructions that can be applied to a piece of text.

Style are defined with the help of rules.
Syntax:-
Selector{
Property:value;
Property:value;
}
The above syntax contains selector followed by set of declarations.
Declaration has two parts .one is property and other is value.
A CSS style rule is made of three parts:
1. Selector: A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1>, <p> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put simply, all
the HTML attributes are converted into CSS properties. They could be color,
border, bgcolor etc.
3. Value: Values are assigned to properties. For example, color property can
have the value either red or #F1F1F1 etc.
CSS selectors
CSS selectors allow us to choose specific elements and apply styles to them.
Suppose we want to add a custom style to only a specific tag(s). There, We
can make use of CSS selector.
There are different types of CSS selectors, which are as follows:
Universal Selector
Element Selector
Id Selector
Class Selector
Group Selector
Attribute Selector

Element Type Selectors

An element type selector matches all instance of the element in the
document with the corresponding element type name.
p { color: blue; }

Id Selectors:-
The id selector selects the HTML element with a unique identifier (id) and
adds CSS to it.The id selector is specified using the hash (#) character,
followed by the id of the element.

#ID {

property : value;

Example:-
#id1{background-color:blue;color:white;}
To apply the above style rules to any particular html element we must add
id attribute and its value equal to “id1”
Example:-<h1 id=”id1”> Heading1</h1>
Ex2:-
P#id1{color:blue;font-size:24px;}
The above id selector only applicable to paragraphs that are having id
attribute and its value equal to id1.

Class Selectors
The class selectors can be used to select any HTML element that has
a class attribute. All the elements having that class will be formatted
according to the defined rule.
The class selector is defined with a period sign (.) immediately followed by
the class value.
.blue {
color: blue;
}
The above style rules renders the text in blue of every element in the
document that has class attribute set to blue. You can make it a bit more
particular. For example:
Example
Try this code »
p.blue {
color: blue;
}The style rule inside the selector p.blue renders the text in blue of only

those <p> elements that has class attribute set to blue, and has no effect on other
paragraphs.

Group Selector:-The group selector allows you to select multiple elements

and apply the same style to all of them.The group selector is used to
minimise the code. Commas "," are used to separate each selector in a
grouping. This reduces the number of lines of code. The code also looks
clean.
syntax :-div, p, a { color:blue;}
Attribute Selectors

CSS Attribute Selectors provide a simple and efficient way to apply styles to
HTML elements based on the presence of a particular attribute or attribute
value. This is a great way to style HTML elements by grouping them based
on certain attributes, and the Attribute Selector will select those elements
with similar attributes. You can create an Attribute Selector by putting the
attribute in square brackets:
CSS Selector Example Description
[attribute] [translate] Selects all elements with an
attribute name of translate.
[attribute=value] [translate=no] Selects all elements
with translate="no". Represents
elements with an attribute name
of translate whose value is
exactly no.
[attribute~=value] [title~=flower] Selects all elements with
a title attribute containing the
word flower.
[attribute|=value] [lang|=de] Selects all elements with
a lang attribute value equal
to “de” or starting with “de-”. It is
often used for language subcode
matches.
[attribute^=value] a[href^="#"] Selects every <a> element
whose href attribute value is
prefixed, begins with "#" (internal
links).
[attribute$=value] a[href$=".html"] Selects every <a> element
whose href attribute value is suffixed
(followed) by value, ends
with ".html".
[attribute**=*value] a[href*=“aspose”] Selects every <a> element
whose href attribute value contains
the “aspose” anywhere in the URL.
23) CSS Combinators
A combinator is something that explains the relationship between the
selectors. A CSS selector can contain more than one simple selector.
Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a
specified element.
The following example selects all <p> elements inside <div> elements:
div p { background-color: yellow; }
Child Selector (>)
The child selector selects all elements that are the children of a specified
element.
The following example selects all <p> elements that are children of a <div>
element:
div > p { background-color: yellow; }
Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly
after another specific element. Sibling elements must have the same parent
element, and "adjacent" means "immediately following".
The following example selects the first <p> element that are placed
immediately after <div> elements:
div + p { background-color: yellow; }
General Sibling Selector (~) :-The general sibling selector selects all
elements that are next siblings of a specified element. The following example
selects all <p> elements that are next siblings of <div> elements:
div ~ p { background-color: yellow; }
24) CSS pseudo-classes
A pseudo-class can be defined as a keyword which is combined to a selector
that defines the special state of the selected elements. It is added to the
selector for adding an effect to the existing elements based on their states.
For example, The ":hover" is used for adding special effects to an element
when the user moves the cursor over the element.
The names of the pseudo-class are not case-sensitive.
Syntax
A pseudo-class starts with a colon (:).
selector: pseudo-class {
property: value;
}
pseudo-class Description
: active IIt is used to add style to an active
element.
: hover I It adds special effects to an element
when the user moves the mouse pointer
over t he element.
: link I It adds style to the unvisited link.
: visited I It adds style to a visited link.
: lang I It is used to define a language to use in
a specified element.
: focus I It selects the element which is focused
by the user currently.
: first-child It adds special effects to an element,
which is the first child of another
element.

CSS Pseudo-elements
A pseudo-class can be defined as a keyword which is combined to a selector
that defines the special state of the selected elements. Unlike the pseudo-
classes, the pseudo-elements are used to style the specific part of an
element, whereas the pseudo-classes are used to style the element. As an
example, a pseudo-element can be used to style the first letter or the first
line of an element. The pseudo-elements can also be used to insert the
content after or before an element.
Syntax
selector::pseudo-element {
property: value;
}
pseudo-element Description
: :first-letter (:first-letter) It selects the first letter of the text.
: :first-line (:first-line) It styles the first line of the text.
: : before (:before) It is used to add something before the
element's content.
: :after (:after) I it is used to add something after the
element's content.
: :selection I It is used to select the area of an
element that is selected by the user