DEV Community

Cover image for advanced CSS
Hootan
Hootan

Posted on

 

advanced CSS

CSS3: section

Section:nth-of-type(2n)
Enter fullscreen mode Exit fullscreen mode

-

Section: last-of-type
Enter fullscreen mode Exit fullscreen mode

Read that article in css-tricks
How to section your HTML

Font Awsome

  1. Go to cdnjs.com to get the libraries link
  2. One specific class named icon to calling icons and tang class to styling it.
.icon::before{
display: inline-block;
font-style: normal;
font-variant: normal;
text -rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: “Font Awesome 6 free”;
font-weight:900; or 400;}
Enter fullscreen mode Exit fullscreen mode
  1. Tag class for styling content: “\f061”; -> witch icon character color:white;

Best codes for responsive

With:50%;   merge-left: auto;
Enter fullscreen mode Exit fullscreen mode

-

Calc(500px+20%)
Enter fullscreen mode Exit fullscreen mode

-

Clamp(2vw,5rem,5vm)
Enter fullscreen mode Exit fullscreen mode

-

Column:2;   column-span: on;
Enter fullscreen mode Exit fullscreen mode

or

column: 100px; -> maxwith(for big screens)
Enter fullscreen mode Exit fullscreen mode

Free template
Templatemo.com

Top comments (1)

Collapse
 
andrewbaisden profile image
Andrew Baisden

CSS Clamp is probably the one I have not used much of yet but it seems useful.