TPIP BATCH-31

RUCHITHA RACHAMALLA
CSS
 CSS stands for Cascading Style Sheet
 It is used to style the web pages
 CSS applies style rules to HTML elements
CSS Syntax
CSS-TEXT
 Text-color
 Text-Alignment
 Text-Decoration
Text-Color
 The color property is used to set the color of the text

 body {
background-color: blue;
}
 h1 {
color: green;
}
Text-Alignment
 The text-align property is used to set the horizontal
alignment of text

 h1 {
text-align: right;
}
Text-Decoration
 Line
 Color
 Style
 Thickness
Text-Decoration Line
Text Decoration-
color,style,thickness
 CSS Selectors

 CSS selectors are used to "find" (or select) the HTML elements you want
to style.
 We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
 Simple selectors:
 These selectors target HTML elements based on their name, id, or class.
 Syntex :
1. Element name selector: p { /* styles */ } targets all <p> elements
2. ID selector: #myElement { /* styles */ } targets an element with id="myElement".
3. Class selector: .myClass { /* styles */ } targets elements with class="myClass".
 Example:
1. Select elements based on name
<p>This is a paragraph.</p>
p { color: blue; }
2. Select elements based on id:
<div id="myDiv">This is a div.</div>
#myDiv { background-color: yellow; }
3 . Select elements based on class
<p class="highlight">This is a highlighted paragraph.</p>
.highlight { font-weight: bold; }
Combinator selectors:
 These selectors establish relationships between elements and target them
accordingly.
 Example :
1. Descendant combinator:
<div> <p>This is a paragraph inside a div.</p> </div>
div p { color: green; }
2 . Child combinator:
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
ul > li { list-style-type: none; }
3 . Adjacent sibling combinator:
<h2>Heading</h2> <p>Paragraph directly following the heading.</p>
h2 + p { font-style: italic; }
Pseudo-class selectors:

 These selectors target elements based on their state or position.

 Example:
1 . Hover state
<a href="#">Hover over me</a>
a:hover { text-decoration: underline; }
2 . First-child:
<ul> <li>First item</li> <li>Second item</li> </ul>
li:first-child { font-weight: bold; }
 Pseudo-element selectors:
 These selectors target and style specific parts of an element.
 Example :
1. Before pseudo-element:
<p>This is a paragraph.</p>
p::before { content: "Before "; color: red; }
2. After pseudo-element:
<p>This is a paragraph</p>
p::after { content: " (after)"; color: red; }
 Attribute selectors:
 These selectors target elements based on their attributes and attribute values.
 Example :
1.Attribute presence
<a href="#">Link</a> <a>Text</a>
a[href] { color: blue; }

2.Attribute value:
<input type="text"> <input type="password">
input[type="text"] { border: 1px solid black; }
THANK YOU