Skip to content
Search

DEV Community

Cover image for advanced CSS
Hootan
Hootan

Posted on

 

advanced CSS

#css #responsive #mediaquery #frontend

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.

Read next

collegewap profile image

How to make horizontal list in HTML using CSS

collegewap -

shubhadip_bhowmik profile image

Top 5 best CSS frameworks in 2023.

Shubhadip Bhowmik -

fritzlolpro profile image

Rust-Based Web Development Tools -- The Future of Infrastructure, but be cautious!

Fedor -

m_adams1909 profile image

useState or useReducer – which to choose for your application

adams mercy -