Table of contents
What is css ?
CSS Selectors:
- Universal selector
- Individual selector
- Class & ID selector
- Chained selector
- Combined selector
Pseudo Selectors
What is CSS
CSS-cascading style sheets
CSS is used to style the web pages.It describe the formatting of a document written in a markup language such as HTML,XML etc...
Why we learn CSS
- Styling the HTML tags.
- Responsive website.
- Animation on webpage.
- 2D & 3D Transformation of HTML Elements.
- Website development process fast
Implementation of CSS 3 Ways to implement css-
1. Inline style:-We use style attribute in any HTML tag.
Example
<h1 style="color:green;">
Manas Ranjan Sahu
</h1>
2.Inpage style tag:-We use style tag and put CSS inside it and it use under HTML.
Example
<html>
<head>
<style>
h1 {
color:green;
}
</style>
</head>
<body>
<h1>Manas</h1>
</body>
</html>
3.External style sheet:-Make a different file and then use it in HTML.The file is saved by .CSS extension.
Example
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS Selector:- Selectors are just used to select elements or tags on the webpage to style it.
p{
background-color:yellow;
}
Here p is the Element selector.
There are different types of CSS selectors... They are as follows:
Universal Selector: It is used to select all the elements on the HTML page.
()* is denotes the universal selector.
syntax
* {
property:value;
}
Example
* {
margin: 0px;
padding: 0px;
color:red;
Individual Selector: In this selector we select a specific element on a web page that we want to style.
Example
h1{
background-color:blue;
}
All the h1 tags in the webpage changed to blue.
Class and ID selector: These selectors are used to select the content we want to style. ID can be used to identify one element and Class can be used to identify more than one element..
(.) used for identify the class.
(#) used for identify the ID.
Syntax
#idName{
property:value;
}
.className{
property:value;
}
Example
<html>
<head>
<style>
.heading{
color:green;
}
#color{
background-color:yellow;
}
</style>
<body>
<h1 class="heading">Hey what's your name</h1>
<p>sushree sangita panda</p>
<h1 id="color">About</h1>
<ul>
<li>Lorem,ipsum.</li>
<li>Lorem,ipsum.</li>
<li>Lorem,ipsum.</li>
<li>Lorem,ipsum.</li>
</ul>
</html>
Chained selector: It is also known as and selector.It is used when we want two conditions to be true.
syntax
element.element{
propery:value;
}
Example
<html>
<head>
<style>
.white.red {
background-color:red
color:white;
}
</style>
<body>
<ul>
<li class="white red">Lorem,ipsum.</li>
<li class="white">Lorem,ipsum.</li>
<li class="red">Lorem,ipsum.</li>
<li>Lorem,ipsum.</li>
</ul>
</html>
Combined selector:
In this type selector we use more than one elements and give them one style component.
syntax
element,element{
property:value;
}
example
<html>
<head>
<style>
h1,h2{
color:green;
}
</style>
<body>
<h1>Hey what's your name</h1>
<p>sushree sangita panda</p>
<h2>About</h2>
</html>
Pseudo Selectors: These are used to add style to selectors.
(:) is used to express pseudo selector.
Followings are some pseudo selectors:-
/* for unvisited link*/
a:link{
color:blue;
}
/*for visited link*/
a:visited{
color:black;
}
/*color show by mouse over link*/
a:hover{
color:yellow;
}
- : : before Pseudo Selector :
The ::before pseudo element creates content before the mentioned element. We have to use element::before syntax to create content before the element. The ::before element will only create a child element before the mentioned element only if the content property is defined.
syntax :-
span::before {
content: " ";
display: block;
background-color: #A46C84;
height: 20px;
width: 20px;
border-radius: 10px;
}
- : : After Pseudo Selector :
This is Pseudo Element is exactly the same like the ::before element. The only difference is that it creates a child element after the mentioned element when the content property is defined. syntax :-
span::after {
content: " ";
display: block;
background-color: #E07C24;
height: 20px;
width: 20px;
border-radius: 10px;
}
CHILD SELECTOR:
A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements. For example, the selector will match all elements that have a class of target and that are immediate children of the #killer element. That means, unlike the descendant combinator, there can’t be another element wrapping .box it has to be a direct child element.
syntax :-
#killer > .target {
float: left;
padding-bottom: 15px;
ELEMENTS SELECTORS:
It's the most basic CSS selectors. where we have to give a element name which is must present in the HTML program. For an example we want a unordered list to have list style and a border then the program
syntax :-
ul {
list-style: none;
border: solid 1px #4c59a5;
}
SIBLING SELECTOR:
A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling.
For example
syntax :-
<style>
p + p
{
text-indent: 1.5em;
margin-bottom: 0;
color: blueviolet;
}
</style>
</head>
<body>
<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="target">
<p>Paragraph example.</p>
<p>Paragraph example.</p>
</div>
</body>
</html>
Thanks for Reading hope you get something beneficial topic here.
