Ravi Kumar Profile picture
May 3 β€’ 7 tweets β€’ 2 min read
Do You Know about CSS variables?

know everything about CSS variables.

πŸ§΅πŸ‘‡
1⃣ Intro of a CSS variable

It is a custom property of a CSS that is defined by a CSS author that contains some specific values that are reusable through a document.

it is used in the google chrome browser.
2⃣ Syntax or how to use

πŸ‘‡πŸ‘‡

:root{
-- color-primary: #001f3f;
}

p {
color: var(--color-primary);
}
3⃣ use case of a CSS variable

1. colours
2. font sizes
3. SVG
4. Grid layouts
5. column proportions
6. Buttons
4⃣ TipπŸ’‘

always defined variable in root section because it gives you global reach through your entire Html document

you can define it in the Html section also so it can be
treated as a global variable.
5⃣ conclusion

So many good uses, and we’re barely getting started Use the comments to ask follow-up questions or share your ideas for using CSS custom properties (variables).
Thanks for reading the thread.

If you find it useful. Give the first one a retweet and if you have any feedback, let me know in the comment.

πŸ”—

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Ravi Kumar

Ravi Kumar Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @ravikmmr

May 4
Do you know the HTML "SEO" meta tags?

πŸ§΅πŸ‘‡ Image
1⃣ Title tag

πŸ“Œthe title tag is the most important tag that tells about the name of your website and tells what the page is all about. ImageImage
2⃣ Meta tag

πŸ“ŒThis tag is used to give a short description of a website below the title tag. ImageImage
Read 11 tweets
May 2
Top CSS Frameworks.
1⃣ Bootstrap

πŸ”—getbootstrap.com
2⃣ Tailwind

πŸ”—tailwindcss.com
Read 7 tweets
May 1
Best websites for coding interview preparation.

πŸ§΅πŸ‘‡
1⃣ GeeksForGeeks

πŸ”—geeksforgeeks.org
2⃣ Interviewbit

πŸ”—interviewbit.com
Read 8 tweets
Apr 30
Projects to brush up on your Html skills.

πŸ§΅πŸ‘‡
1⃣ HTML personal website

create your portfolio website and use as many tags as possible for your portfolio like <table> tag , <img> tag,<hr> tag etc.
2⃣ Documentation page

create your own documentation page for your notes and report with your own functionality and practice all links, heading, and paragraph tags.
Read 8 tweets
Apr 29
Do you Know HTML Special symbols?

πŸ§΅πŸ‘‡
Read 8 tweets
Apr 28
Advance CSS Sizing Units for Responsive web page.

πŸ§΅πŸ‘‡
1⃣ Absolute vs Relative Sizing.

There are two types of sizing units in CSS.

Absolute units like px, pt, cm and in stay the same size regardless of the parent element of windows size.

Relative units like%, em, rem, vh, vw, scale up or down, depending on the size of the screen.
2⃣ When to use what?

Use Relative Units when responsiveness is not a factor.

Use Relative units when scaling or responsiveness is important.
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(