DEV Community

Cover image for Web Smooth scrolling Pure Css

Posted on


Web Smooth scrolling Pure Css

Top comments (4)

cmuralisree profile image
Chittoji Murali Sree Krishna

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 */
Enter fullscreen mode Exit fullscreen mode

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

kirzin profile image

i would love to try that thanks

cmuralisree profile image
Chittoji Murali Sree Krishna • Edited


  • 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>
Enter fullscreen mode Exit fullscreen mode
color: red;
color: black;
Enter fullscreen mode Exit fullscreen mode
  • 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 {}

  • 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,

    .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

I tried to explain as much as possible, if you find any grammatical mistakes I am sorry, I hope you understand and won't do the mistakes I do

Thread Thread
kirzin profile image

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

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.