Some Basics of CSS that you should have a look at. ( Part 1 )

In this post, I will be summarising some basics of CSS, which, you need to know if you are diving into Front-end development.

SAVE and stay tuned for the next one

Last week, I was brushing up some basics, so I thought to summarise it here on Dev.
Topics covered in this part:

• Selectors
• CSS Units
• Overriding Properties
• Colours
• CSS Variables

Keep calm and code on !

Firstly, let’s talk about what a “Selector” is and about Classes and IDs.
Whenever you need to find or select an HTML element, you do that with CSS selectors.
For example:

//HTML
<p class=”paragraph”>
Namaste World !
</p>

// CSS
.paragraph{         
background-color:#232323;
}

It is always advised to name colours with their Hex Code instead on colour name.

Here we created a class in the CSS file, and assigned an HTML element to that class.

• Classes are reusable, i.e., you can provide same class name to any number of elements.
• Whereas, IDs are unique, you cannot assign the same ID to more that one element.

You can read more about CSS selectors Here

Absolute and Relative Units

• Absolute units measure the actual length on the screen, hence having some differences depending on screen size and resolution. Example: Pixels(px), Millimetre(mm) etc.
• Relative units are relative to another value. For example: em, rem, vh, etc. em is based on the font-size of the element.(If you use em for defining the font-size itself, it takes reference from the parent element.)

Read More about CSS units here at MDN.

Overriding properties

• ID have more precedence over classes
• Inline CSS overrides all external CSS
• In case of classes only, the most latest declaration overrides the previous ones ( imagine it like a stack ) Example:

body{
    color:red;;
}
.pink-text{
    color:pink;
}
,blue-text{
    color:blue;
}

Say an HTML element exists with some text in it

<p class=”pink-text blue-text”> Sample Text </p>

1. First the body styling goes into the stack.
2. Then next declared “pink-text” class overrides it.
3. Finally the color of element’s text will be blue as blue-text class overwrites the pink one.

NOTE : the overriding doesn’t depend on the order you assign the class to the element, it depends only on the order of declaration..

As said earlier, IDs have more preference over classes. So if you assign some ID to <p> and define some style to it, it will override the conflicting class styling.

Most powerful approach of doing the same will be using the “important” keyword.

.pink-text{
    color:pink !important;
}

Now this will override all kind of other conflicting classes or Ids.

Providing Colours

• Hex Codes
• The rgba funciton rgba( red-element , green-element , blue-element , alpha-element or opacity )
• The hsl function hsl( hue , saturation , lightness )

CSS Variables
Declaration :

.any-class{
--col : red;
//some css
background-color: var( --col , blue );
}

• The blue declared here is the fallback, which is used in the case when variable isn’t available.
• The variable declared inside of any selector, is also accessible in any of its descendants. > For making a variable global scope, we declare it in the :root element.

That's it for this part, follow me for further updates.
Part 2 will be covering:

• The CSS Box Model
• Media Queries
• Keyframes
• CSS Animations.

Want to connect?

Connect with me here.