Skip to content

Commit 756cea2

Browse files
navnit0707navnit0707
committed
ways to add css
1 parent 6972a66 commit 756cea2

5 files changed

+171
-0
lines changed

‎Readme.md

+90
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,93 @@
4242
}
4343

4444
## Pseudo-class Selector
45+
46+
A pseudo-class is akeyword added to a selector that specifies a special state of the selected element.
47+
a state example can be when we hover over the element
48+
49+
<p class="hoverME">hi</p>
50+
51+
in css we can write a pseudo-class on hoverME class by using a : (colon)
52+
53+
ex
54+
hoverME:hover{
55+
color:blue;
56+
}
57+
58+
this will change the color from default to blue when we will hover and reback to default when cursor leave
59+
60+
## Multiple selector
61+
62+
grouping many selector to apply the css style to all in one go . by using comma we can do this
63+
for example
64+
p,h1,h2{
65+
color:red;
66+
}
67+
68+
## Universal Selector
69+
70+
*{
71+
72+
}
73+
thers more read mdn
74+
75+
## Nested Selector
76+
77+
-> descendant Selector ( seperated by a space while write slector name in css for one level child )
78+
ex h1 h2 {
79+
color : red;
80+
}
81+
this can be grouped by comma for other descendant
82+
-> Child Selector
83+
For the cases where you only want to target direct children (nested only one level under)
84+
85+
use > greater than symbole .
86+
ex h1 > h2{
87+
color: red
88+
}
89+
90+
read more why 3 level nesting not working i have doubt about this
91+
92+
-> Adjacent Sibling Selector
93+
to apply style on siblings
94+
use add symbol
95+
ex two siblings h1 and p .
96+
97+
h1+p {
98+
color:red;
99+
}
100+
-> General sibling Selector
101+
instead of just one sibling , selscting all by using tilde ~
102+
h1 ~ p{
103+
color: red;
104+
}
105+
106+
## Attribute Selector
107+
108+
-> The CSS attribute selector matches elements based on the presence or value of a given attribute.
109+
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
110+
111+
div[lang] {
112+
font-weight: bold;
113+
}
114+
115+
this one is cool , read more in mdn
116+
117+
# add styling in HTML
118+
119+
-> Inline
120+
write in element tag <p style="font :red">hi</p>
121+
-> INternal
122+
write css in style tag inside head in html
123+
-> External
124+
write css in an external file.css and add it in head of html by using link
125+
126+
<link rel="stylesheet" href="file.css" />
127+
rel is here saying relationship between current html file and the external file i am refrensing to
128+
129+
priority : inline> internal>external
130+
131+
# Specificity
132+
133+
if we add multiple rule to the same leemnt then it will be hard to guess which one gonna overwrite
134+
so for this Specificity rules comes handy

‎topics/04-pseudo-class.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
<style>
9+
#hoverMeId:hover {
10+
color: yellow;
11+
}
12+
.hoverMeClass:hover {
13+
color: red;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<p id="hoverMeId">Hello</p>
19+
<p class="hoverMeClass">Hover on me to change color</p>
20+
</body>
21+
</html>

‎topics/05-Nested-Universal-Atteribut.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
9+
<style>
10+
* {
11+
color: red;
12+
}
13+
14+
div h1 {
15+
color: yellow;
16+
}
17+
div > h2 {
18+
color: black;
19+
}
20+
div ~ h2 {
21+
color: pink;
22+
}
23+
div[lang] {
24+
font-weight: bold;
25+
color: green;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
hello i am universal
31+
<div>
32+
hello i am div
33+
<h1>hello i am h1</h1>
34+
<h2>hi i am h2</h2>
35+
</div>
36+
<h2>hi i am not nested to h1</h2>
37+
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
38+
</body>
39+
</html>

‎topics/06-addingStyle.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
<link rel="stylesheet" href="./css/06-addingStyle.css" />
9+
<style>
10+
p {
11+
color: red;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<p style="font-style: italic">hey</p>
17+
</body>
18+
</html>

‎topics/css/06-addingStyle.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
p {
2+
font-size: 56px;
3+
}

0 commit comments

Comments
 (0)