Skip to content

Commit b1dd5ab

Browse files
HarshvdevHarshvdev
committed
Practiced Cascading and Box Methods
1 parent 16c68d4 commit b1dd5ab

File tree

10 files changed

+269
-0
lines changed

10 files changed

+269
-0
lines changed

‎Day-26/01-cascade-fix/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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>Fix the Cascade</title>
8+
<link rel="stylesheet" href="sol.css">
9+
</head>
10+
<body>
11+
<p class="para">I'm just a paragraph with extra bold text!</p>
12+
<p class="para small-para">I'm a smaller paragraph, also with extra bold text!</p>
13+
14+
<button id="confirm-button" class="button confirm">Confirm</button>
15+
<button id="cancel-button" class="button cancel">Cancel</button>
16+
17+
<div class="text">I'm a div with thin text!</div>
18+
<div class="text">I'm a div with thin text and a child div!
19+
<div class="text child">I'm a smaller child div with extra bold text.</div>
20+
</div>
21+
</body>
22+
</html>

‎Day-26/01-cascade-fix/sol.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
body{
2+
font-family:Arial, Helvetica, sans-serif;
3+
}
4+
5+
.para,
6+
.small-para {
7+
color: hsl(0, 0%, 0%);
8+
font-weight: 800;
9+
}
10+
11+
.para {
12+
font-size: 22px;
13+
}
14+
15+
.button {
16+
background-color: rgb(255, 255, 255);
17+
color: rgb(0, 0, 0);
18+
font-size: 20px;
19+
}
20+
21+
div.text {
22+
color: rgb(0, 0, 0);
23+
font-weight: 100;
24+
font-size: 22px;
25+
}
26+
27+
/* SOLUTION */
28+
29+
/*
30+
For the following rule, we removed it from its original position in the file:
31+
32+
.small-para {
33+
font-size: 14px;
34+
font-weight: 800;
35+
}
36+
37+
Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity.
38+
39+
Another solution would be keeping it in its original place and just chaining selectors, giving this rule a higher specificity:
40+
41+
p.small-para {
42+
font-size: 14px;
43+
font-weight: 800;
44+
}
45+
*/
46+
47+
.small-para {
48+
font-size: 14px;
49+
font-weight: 800;
50+
}
51+
52+
/*
53+
For the following rule we removed the original .confirm selector:
54+
55+
.confirm {
56+
background: green;
57+
color: white;
58+
font-weight: bold;
59+
}
60+
61+
Then we used an ID selector instead, since it has a higher specificity than the .button selector.
62+
63+
Other solutions would be to simply move the .confirm rule below the .button rule, or to use the .button.confirm selector without moving it:
64+
65+
.button.confirm {
66+
background: green;
67+
color: white;
68+
font-weight: bold;
69+
}
70+
*/
71+
72+
#confirm-button {
73+
background: green;
74+
color: white;
75+
font-weight: bold;
76+
}
77+
78+
/*
79+
For the following rule we first removed it from its original position in the file:
80+
81+
.child {
82+
color: rgb(0, 0, 0);
83+
font-weight: 800;
84+
font-size: 14px;
85+
}
86+
87+
Then we added another selector to create a descendant combinator. If we only created a descendant combinator, the specificity would be tied with the
88+
div.text selector and it would come down to rule order, and if we only moved it, the div.text selector would still have a higher specificity.
89+
90+
Another solution would be to keep the rule where it was and just replace the div selector with the .text selector:
91+
92+
.text .child {
93+
color: rgb(0, 0, 0);
94+
font-weight: 800;
95+
font-size: 14px;
96+
}
97+
*/
98+
99+
div .child {
100+
color: rgb(0, 0, 0);
101+
font-weight: 800;
102+
font-size: 14px;
103+
}

‎Day-26/01-cascade-fix/style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
body {
2+
font-family: Arial, Helvetica, sans-serif;
3+
}
4+
5+
.para,
6+
.small-para {
7+
color: hsl(0, 0%, 0%);
8+
font-weight: 800;
9+
}
10+
11+
.para {
12+
font-size: 22px;
13+
}
14+
15+
.small-para {
16+
font-size: 14px;
17+
font-weight: 800;
18+
}
19+
20+
21+
.confirm {
22+
background: green;
23+
color: white;
24+
font-weight: bold;
25+
}
26+
27+
.button .cancel {
28+
background-color: rgb(255, 255, 255);
29+
color: rgb(0, 0, 0);
30+
font-size: 20px;
31+
}
32+
33+
.text.child {
34+
color: rgb(0, 0, 0);
35+
font-weight: 800;
36+
font-size: 14px;
37+
}
38+
39+
div.text {
40+
color: rgb(0, 0, 0);
41+
font-size: 22px;
42+
font-weight: 100;
43+
}

‎Day-26/02-cascading-exercise/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Button Styling</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<button class="primary">Click Me</button>
10+
<button class="secondary">No, Click Me</button>
11+
</body>
12+
</html>

‎Day-26/02-cascading-exercise/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
button {
2+
color: white;
3+
font-weight: normal;
4+
}
5+
6+
.primary {
7+
background-color: blue;
8+
}
9+
10+
.secondary {
11+
background-color: green;
12+
font-weight: bold;
13+
}
14+

‎Day-26/Box-Experiment/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Box-Exp</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="one">First Div</div>
11+
<div class="two">Second Div</div>
12+
</body>
13+
</html>

‎Day-26/Box-Experiment/style.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.one {
2+
background-color: gray;
3+
text-align: center;
4+
padding: 50px;
5+
margin: 50px;
6+
box-sizing: content-box;
7+
border: 2px solid red;
8+
height: 300px;
9+
width: 700px;
10+
}
11+
12+
.two {
13+
background-color: pink;
14+
text-align: center;
15+
padding: 500px;
16+
margin: 50px;
17+
box-sizing: border-box;
18+
border: 2px solid green;
19+
height: 300px;
20+
width: 700px;
21+
}

‎Day-26/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Day 26 of #100DaysOfCode
2+
3+
- Learned about cascading in CSS and how style priority works
4+
5+
- Box model: margin, padding, border—everything’s a box 📦
6+
7+
- box-sizing: border-box made layouts cleaner
8+
9+
- Got introduced to DevTools & Inspect Element
10+
11+
I couldn't solve the cascading exercise in The Odin Project, but I'll revisit it tomorrow.
12+
13+
#frontend #css #webdev

‎Day-26/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Experiment</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<!-- index.html -->
11+
12+
<div class="parent">
13+
Parent ID
14+
<div id="child">Child Class</div>
15+
</div>
16+
</body>
17+
</html>

‎Day-26/style.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* styles.css */
2+
3+
#child {
4+
color: blue;
5+
}
6+
7+
.parent {
8+
color: red;
9+
}
10+
11+

0 commit comments

Comments
 (0)