DEV Community

loading...
Cover image for Web Smooth scrolling Pure Css

Web Smooth scrolling Pure Css

kirzin profile image KirzinCss ・1 min read

Discussion (4)

pic
Editor guide
Collapse
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

Collapse
kirzin profile image
KirzinCss Author

i would love to try that thanks

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna • Edited

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>
Enter fullscreen mode Exit fullscreen mode
#red_id{
color: red;
}
.red_class{
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 {}
    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

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
KirzinCss Author

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