Table of Contents
- introduction of css
- Basic selector
- Pseudo-class selector
let understand css
Cascading Style Sheets is languages which used for described presentation of HTML.
CSS also described how the element are going to rendered on screen.
css types
- External: link tag is used to
link:css
!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>External CSS Example</title>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
extenalcss
h1 {
background-color: yellow;
color: blue;
border: 1px solid black;
}
p {
color: red;
}
- internal :
<style>tag used to inside head element
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>My CSS experiment</title>
<style>
h1 {
background-color: yellow;
color: blue;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>AXM||internal css!</h1>
<p>This is my first CSS example</p>
</body>
</html>
- inline: style tag used html element
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title> inline CSS t</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
Hello World!
</h1>
<p style="color:red;"> inline CSS exm</p>
</body>
</html>
let talk about selector
selector target the html css to applt style/css.
some selector we are going to understand by using example for better understanding.
let start with our first selector ,that is any guess let me give u hint it apply in whole body , u get or not , yes, we are talking or going to guseess about
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS||AXM</title>
</head>
<body>
<div class="div-1"> welcome to class live </div>
<span > span is nothing ,it just line of code mean in-line , it doesnt take any space </span>
<p id="para-1"> we know already what is paragraph </p>
<ul>
<li class ="bg-blue text-white" > AXM </li>
<li class="sibling">AXM 2</li>
<li>AXM 3</li>
<li>AXM 4</li>
<li>AXM 5</li>
</ul>
<div>
<p>lorem</p>
<li>awesome</li>
<ul>
<li>highlight me <a id="para-1" href="#">Test</a></li>
<li>higlisht me</li>
</ul>
</div>
<section>
<p class="sibling"> Test 1</p>
<p>Test 2</p>
<p>Test 3</p>
<p>Test 4</p>
</section>
</html>
universal Selector
universal selector denoted by * (Asterisk)
<style>
* {
background-color: #DE4839;
color: #ffffff;
}
</style>
individual selector
individual Selector use tag/element of html
<style>
p{
background-color: #686868;
color: #ffffff;
}
</style>
class&id : using class and id we target the html element using (.) and for id
<style>
.div-1{
background-color: #ef9325;
color: azure;
}
/* id */
#para-1{
background-color: #efefef;
color: #e93916;
}
</style>
and selector
is also know as chained selector
it used sub class element to target
li.bg-blue.text-white{
background-color: rgb(0, 22, 94);
color: #f1f1f1;
}
combined selector : we can used more than one html tag to target the html.
p,span{
background-color: rebeccapurple;}
/* inside element */
div ul li {
background-color: #000000;
}
Direct child selector : child combinator (>) is placed between two CSS selectors
/* direct -child seclector */
div>li{
background-color: rgb(60, 248, 60);
color: blue;
}
sibiling: sibling selector is used to select an element that is directly after another specific element
.sibling+p{background-color: lightyellow;
color:#686868 ;
}
/* sibling */
.sibling+li{
background-color: lightyellow;
color:#686868 ;
}
Top comments (0)