Scribd
Upload
35 views

Presented By: Onkar Kale

The document discusses various CSS selectors including: 1) Simple selectors that select elements based on name, id, or class. 2) Combinator selectors that select elements based on their relationship using descendant, child, adjacent sibling, and general sibling selectors. 3) Other selectors like the id selector that selects a unique element by id, and the class selector that selects elements by class.

Uploaded by

manjit kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
35 views

Presented By: Onkar Kale

The document discusses various CSS selectors including: 1) Simple selectors that select elements based on name, id, or class. 2) Combinator selectors that select elements based on their relationship using descendant, child, adjacent sibling, and general sibling selectors. 3) Other selectors like the id selector that selects a unique element by id, and the class selector that selects elements by class.

Uploaded by

manjit kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

CSS

Presented by: onkar kale


Placeholder
The placeholder attribute specifies a short hint that describes the
expected value of an input field (e.g. a short description of the expected
format).

<input type="tel" id="phone" name="phone" placeholder="Enter phone


no"
required Attribute
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before
submitting the form.
<form action>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>
css
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.


<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
Selectors
In CSS, selectors are patterns used to select the element(s) you want to
style.

We can divide CSS selectors into five categories:

We can divide CSS selectors into five categories:


● Simple selectors (select elements based on name, id, class)
● Combinator selector (select elements based on a specific relationship between
them)
● Pseudo class selector(select elements based on a certain state)
● Pseudo element selector (select and style a part of an element)
● Attribute selector (select elements based on an attribute or attribute value)
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:

<style>

div p {

background-color: yellow;

</style>
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:

<style>
div > p {
background-color: yellow;
}
</style>
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".

<style>
div + p {
background-color: yellow;
}
</style>
General Sibling Selector (~)

The general sibling selector selects all elements that are next
siblings of a specified element.

<style>
div ~ p {
background-color: yellow;
}
</style>
CSS id Selector

➢ The id selector uses the id attribute of an HTML element to select a specific


element.
➢ The id of an element is unique within a page, so the id selector is used to select
one unique element!
<style>

#para1 {

text-align: center;

color: red;

</style>

<p id=”para1”> this is my para</p>


CSS class Selector
➢ The class selector selects HTML elements with a specific class
attribute.
➢ To select elements with a specific class, write a period (.)
character, followed by the class name.

<style>

.center {

text-align: center;

color: red;

</style>
CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.

<style>

*{
text-align: center;
color: blue;
}
</style>
CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style
definitions.

h1, h2, p {
text-align: center;
color: red;
}
</style>

You might also like