Scribd
Upload
3 views

Css

Uploaded by

Krishna veni C
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Css

Uploaded by

Krishna veni C
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

CSS tips

CSS
Selectors
A Beginner's Guide

Selector p {
color: red ;
}

Page 1
CSS tips

1. Universal Selector (*)


Description: Selects all elements in a document.

Example:

Hint: The selected element

<html >
<head>
<title>Basic HTML Document</title>
</head>
<body>
<h1> Welcome to My Website</h1>
<p> This is a basic HTML document.</p>
</body>
</html>

Page 2
CSS tips

2. Type Selector (Element Selector)


Description: Selects all elements of a specific type (HTML tag).

Example:

Hint: The selected element

<html >
<head>
<title>Basic HTML Document</title>
</head>
<body>
<p> Welcome to My Website</p>
<p> This is a basic HTML document.</p>
</body>
</html>

Page 3
CSS tips

3. Class Selector ( . )
Description: Selects elements with a specific class.

Example:

Hint: The selected element

<html >
<head>
<title>Basic HTML Document</title>
</head>
<body>
<p class=”text”> Welcome</p>
<span class=”text”> HTML document.</span>
</body>
</html>

Page 4
CSS tips

4. ID Selector ( # )
Description: Select an element with a specific ID..

Example:

Hint: The selected element

<html >
<head>
<title>Basic HTML Document</title>
</head>
<body>
<p id=”text”> Paragraph 1</p>
<p >Paragraph 2</p>
</body>
</html>

Page 5
CSS tips

5. Descendant Selector (space)


Description: Selects elements that are nested inside a specific element..

Example:

Hint: The selected element

<body>
<div>
<p> Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<p>Paragraph 3</p>
</body>

Page 6
CSS tips

6. Child Selector ( > )


Description: Selects elements that are direct children
of a specific element.
Example:

Hint: The selected element

<body>
<div>
<p> Paragraph 1</p>
<p>Paragraph 2</p>
<article>
<p>Paragraph 3</p>
</article>
</div>
</body>

Page 7
CSS tips

7. Adjacent Sibling Selector ( + )


Description: Selects an element that is immediately adjacent
to a specific element.
Example:

Hint: The selected element

<body>
<div>
<h1> Paragraph 1</h1>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</body>

Page 8
CSS tips

8. General Sibling Selector ( ~ )


Description: Selects all elements that are siblings of
a specific element.
Example:

Hint: The selected element

<body>
<div>
<h1> Paragraph 1</h1>
<p> Paragraph 2</p>
<p> Paragraph 3</p>
</div>
</body>

Page 9
CSS tips

9. Attribute Selector
Description: Selects elements based on the presence
or value of an attribute.
Example:

Hint: The selected element

<body>
<div>
<h1> Paragraph 1</h1>
<p> Paragraph 2</p>
<input type=”text” />
</div>
</body>

Page 10
CSS tips

10. Grouping Selector ( , )


Description: Selects multiple elements by grouping
them with commas.
Example:

Hint: The selected element

<body>
<div>
<h1> Paragraph 1</h1>
<p> Paragraph 2</p>
<input type=”text” />
</div>
</body>

Page 11
CSS tips

11. Pseudo-classes ( : )
Description: Selects elements in a specific state.

Example: :hover— When an element is hovered over

Hint: The selected element will change its text color to red when
the cursor hovers over it.
<body>
<div>
<h1> Paragraph 1</h1>
<p> Paragraph 2</p>
<input type=”text” />
</div>
</body>

Page 12
CSS tips

12. Pseudo-elements ( :: )
Description: Selects part of an element.

Example: ::before — Inserts content before an element.

Hint: This inserts text beforeThe selected element

<body>
<div>
<h1> Paragraph 1</h1>
<p> Paragraph 2</p>
<input type=”text” />
</div>
</body>

Page 13
CSS tips

Hopefully You Found It


Usefull!
Be sure to save this post so you
can come back to it later

like Comment Share

Page 14

You might also like