Learn CSS Selectors Step by Step
- 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 Step by Step
Type of CSS Selector (element)
- Universal selector (*)
- Element Selector
- Class Selector(.)
- ID Selector(#)
- Grouping Selector
- Attribute Selector
- Pseudo-class Selector
- Combinator Selectors
1) Descendant Selectors
2) Child Selector(>)
3) Adjacent Sibling Selector(+)
4) General Sibling Selector
Learn CSS Selectors Step by Step
Syntax
selector
{
property: value;
property: value;
}
Learn CSS Selectors Step by Step
Example
<!DOCTYPE html>
<html>
<head>
p{ text-align:center;
color:rgb(19, 47, 253);
}
</style>
</head>
<body>
<p>Hello every one</p>
<p>learn to programming language</p>
<p>https://webdesigningtheory.blogspot.com/</p>
</body>
</html>
Learn CSS Selectors Step by Step
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]
<style> p{ text-align:center; color:rgb(19, 47, 253); }
</style>
<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 Step by Step
Output
RelatRelated Post :-
