Overview of some commonly used CSS Properties every Developer must know about.

Greetings to all CSS Lovers, 😇😇

CSS is MAGIC, CSS is a poetry, It is a way of getting colors in your black and white world

Why we use CSS?

Easier to maintain and update.
Greater consistency in design.
Lightweight code.
SEO benefits.
Greater accessibility.

Now to our main topic,

What are some useful CSS Properties?

Color.
Font Size.
Background Color.
Height/Width.
Border Radius.

1. Color

A magical property use to add the magic of color in your work

Syntax

color: red; /* color name */
color: #00FFC8; /* using HEX value */
color: color: rgb(34, 12, 64, 0.6) /* by using rgb value */
color: hsl(30.0 100% 50% / 60%);/* by using hsl() */
color: inherit; /* by using global vals */

2. Font Size

Another magical property use to specify the height and size of the font

Syntax:

font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;  
/* these are the absolute keywords  */
font-size: larger|smaller;
/*these keywords are for relative*/

Difference between Relative and Absolute

Relative is basically for main text that users are going to have to read a lot of (so they'll want to be able to read it comfortably); Absolute is for text that has to be sized to match other elements on the page . If you use absolute sizes then any visually impaired reader might find it hard to read. If you use relative sizes then you are merely specifying which text is larger / smaller than other text on your page.

Units:

Relative: em, rem, %, vw, vh, vmin, vmax Absolute: px, pt, pc

3. Background Color

This property sets the color for the whole background

Syntax

body {
   background-color: #80ced6
}

Same like color property values in rgb, color name, hsl() etc can be used in this.

4. Height/Width.

These are used to set height and width of the elements in CSS Syntax

body {
  height: %|length|auto|initial|inherit;
  width: %|length|auto|initial|inherit;
}

5. Border Radius

This is used for setting radius of elements in CSS

Syntax:

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Fun Tip: This property can be used to make a circle directly

Hope you guys like it. Thank You

Link

You can find me at: aishthecoder.hashnode.dev , codepen.io/aishthecoder , twitter.com/AishTheCoder