Scribd
Upload
0 views

CSS_Selectors_Presentation

CSS selectors are essential for styling HTML elements on web pages, allowing for targeted application of styles. The document outlines various types of selectors, including element, ID, class, group, attribute, pseudo-class, and pseudo-element selectors, along with their syntax and examples. Understanding these selectors aids in creating organized and effective stylesheets.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

CSS_Selectors_Presentation

CSS selectors are essential for styling HTML elements on web pages, allowing for targeted application of styles. The document outlines various types of selectors, including element, ID, class, group, attribute, pseudo-class, and pseudo-element selectors, along with their syntax and examples. Understanding these selectors aids in creating organized and effective stylesheets.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

CSS Selectors

Presented by Samuel
ICT Teacher - Sabian Secondary
School
Introduction to CSS Selectors
• CSS Selectors are used to select the HTML elements you want to
style on a web page. They allow you to target specific elements
or groups of elements to apply styles like colors, fonts, margins,
and more.The element or elements that are selected by the
selector are referred to as subject of the selector.
• There are various types of CSS selectors to target elements
efficiently.
Types of CSS Selectors
• 1. Element Selector
• 2. ID Selector
• 3. Class Selector
• 4. Group Selector
• 5. Attribute Selector
• 6. Pseudo-Class Selector
• 7. Pseudo-Element Selector
• 8. Descendant Selector
1. Element Selector
• CSS element selector selects and styles specific HTML elements. The element selector is

defined by simply using the element's name in the stylesheet.

• example :

<html> <head>

<style>

div { border: 5px inset gold; width: 300px; text-align: center; }

p { color: green; }

h1 { text-decoration-line: underlunderine ; }

</style> </head>

<body>

<div>

<h1>Type selector</h1>

<p>div with border and text-aligned to center</p>


2. ID Selector
• Selects an element with a specific ID attribute.
• Syntax: #idname { style properties }

• Example:
• #unique {
• color: red;
• font-weight: bold;
• }
3. Class Selector
• 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.Note: A class name should not be
started with a number. Syntax .classname { style
properties }
• Example:. .box { background-color: lightgreen;
}
4. Group Selector
• Combines multiple selectors to apply the
same style.
• Syntax: selector1, selector2 { style properties }

• Example:
• h2, p {
• margin: 10px 0;
• }
5. Attribute Selector
• Selects elements based on an attribute or
attribute value.
• Syntax: [attribute='value'] { style properties }

• Example:
• input[type='text'] {
• border: 2px solid #333;
• }
6. Pseudo-Class Selector
• Selects elements based on their state or
position.
• Syntax: selector:pseudo-class { style properties }

• Example:
• ul li:first-child {
• color: purple;
• }
7. Pseudo-Element Selector
• Selects and styles a part of an element.
• Syntax: selector::pseudo-element { style
properties }

• Example:
• .highlight::after {
• content: ' (highlighted)';
• }
8-11: Descendant, Child, and Sibling
Selectors
• Descendant Selector (space): .container p
{ color: darkblue; }
• Child Selector (> symbol): .parent > p { color:
green; }
• Adjacent Sibling Selector (+ symbol): h3 + p
{ color: brown; }
• General Sibling Selector (~ symbol): h3 ~ p
{ color: darkcyan; }
Summary
• CSS selectors are powerful tools to style HTML
elements efficiently.
• Understanding different types of selectors
helps in creating well-structured and
manageable stylesheets.
• Practice combining selectors to achieve
specific styling requirements.

You might also like