Web Smooth scrolling Pure Css

#codepen #css #beginners #html

Top comments (4)

You can also add the, scroll behaviour and stuff in the select all elements instead of fixing to a container

*{ 
padding: 0;
margin: 0;
scroll-behavior: smooth;
/* Rest remaining to the scroll that applies to the entire page */
}

However few might not agree with it, but it's my opinion

i would love to try that thanks

Good,

always use classes for styling instead of I'ds,
bcz I'ds are unique and cannot overwrite itself like an class,
and I'ds have special browser functionality like scrolling to a particular div or section, and I'ds have higher specificity value than css, so I'ds should be unique

<h1 I'd="red_id" class="red_class">Hello world</h1>

#red_id{
color: red;
}
.red_class{
color: black;
}

But here the text output will be red
If you wantedly styled the page like that means it's okay, but always prefer to use the classes for styling
Final stuff you doesn't need to mention this tag before attributes like ex:

section ul li a {}
Or
section#home
Instead use there own class attribute, bcz it won't look that good to use the entire parents tag of that tag or attributes, if you use that you are styling for that section only, Instead use only attributes bcz if you need to add any div or span tag in between you have to change the css also, if not you will loose the styling that will be very time taking, so always prefer to use only attributes, if you want to vary between other attributes then you can use like aren't attributes and child attributes,
Ex:

.class_parent .class_child{ background: red;}
.class_parent2 .class_child {background: white;}
Here both the child attributes are same but differed by the parent attribute

thank u for the tips sir highly appreciated i'm still studying css