Learn CSS Selectors
This Blog You Will Learn
ஃ what is the CSS Selectors?
ஃ Syntax
ஃ Learn CSS Selectors
ஃ Explain Program
ஃ Outputwhat is the CSS Selectors?
- CSS is Cascading Style Sheets selector determines which HTML elements your style apply.
- CSS rule consists of selector and block of declaration inside{...} define properties.
CSS Selectors
- css selectors patterns use css identify and select HTML element on webpage that styles can be applied to them.
- CSS selector type refers to different way can select HTML element.
- CSS selector has specific target elements.
Learn CSS Selectors
Type of CSS Selector (element)
1) Universal selector (*)
Universal selector selects all HTML elements on the page
(code CSS )
* {
margin: 2px;
padding: 1px;
}
- * Selector all html element.
- * selector use to reset default browser spacing.
- * seletor applies styles to the entire page.
2) Element Selector
css code
p {
color:blue;
}
- Element Selector all (paragraph) <p> Elements.
- change text color of every paragraph to blue.
3) Class Selector(.)
css code
.box {
background-color: yellow;
}
- . use before class name
- style all elements with class box
- classes can be used multiple
4) ID Selector(#)
css code
#title
{
font-size:30px;
}
- # used before ID name
- ID unique
5) Grouping Selector
code css
h1,h2,p
{
color:red;
}
- Applies same style to multiple elements
- Save time and avoids repeated css
6) Attribute Selector
code css
input[type="email"]
{
border:2px solid green ;
}
- selects elements based on attributes
- style only email input fields
7) Pseudo-class Selector
code css
a:hover{
color: orange;
}
- :hover activates mouse over the link
- use for interaction effects
- example: :focus, :active, :visited
Learn CSS Selectors
Syntax
css
selector
{
property: value;
property: value;
}
Learn CSS Selectors
Explain Program
Step 1] <!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
- <head> section
- head section contains metadata about page. not visible on the page itself.
- <title> tag title section set the title of the page shows the browser tab.
Step 4] <body>
- Contains all visible of the webpage.
- Everything inside <body> tag visible content of the webpage.
- User will display/see their browser.
Step 5]
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
- <head> section
- head section contains metadata about page. not visible on the page itself.
- <title> tag title section set the title of the page shows the browser tab.
Step 4]
<body>
- Contains all visible of the webpage.
- Everything inside <body> tag visible content of the webpage.
- User will display/see their browser.
Step 5]
css <style> p{ text-align:center; color:rgb(19, 47, 253); }
</style>
css
<style>
p{ text-align:center;
color:rgb(19, 47, 253);
}
</style>
- <style> use to css directly (internal CSS) in the HTML file.
- <style> inside anything is css code that applies to the HTML page.
- <P> tag use to type selector.
- target all paragrapha <P> elements on the page.
- contains CSS {. . .} rules that apply to elements.
text-align:center;
text-align:center this rule centers the horizontally inside each <P>
color:rgb(19, 47, 253);
color sets text color is blue
Step 6]
<body> <p>Hello every one</p> <p>learn to programming language</p> <p id="pro">HTML,CSS,PHP</p> <p>https://webdesigningtheory.blogspot.com/</p>
<body>
<p>Hello every one</p>
<p>learn to programming language</p>
<p id="pro">HTML,CSS,PHP</p>
<p>https://webdesigningtheory.blogspot.com/</p>
- <P> stands for paragraph
- create paragraph on the web page with text.
- hello every one
- default paragraphs are displayed on new line.
<p id="pro">HTML,CSS,PHP</p>
paragraph a unique identifier.
Step 7]
closing the Tag
</body></html>
</body>
</html>
Learn CSS Selectors
Example
Learn CSS Selectors Step by Step
Output
RelatRelated Post :-
