LEARNING ABOUT CSS SELECTORS
Tags: css, beginners, webdev, tutorial
Published: 2022-06-04 02:21:43

## **HOW IT ALL STARTED**...
I remember seeing the #100daysofcode trend on twitter and deciding to participate with zero programming background or knowledge. I decided to start in March, started out with python and instantly gave up along the line mainly because of procrastination. I wasn't extremely busy in my life, i mean i had a lot of free time but the fact that i had to watch tutorials and read stuff bored the hell out of me. Fast forward to somewhere in April when i decided to take my coding journey seriously again because i saw a lot of people making progress on twitter. I always use this phrase to motivate myself 'if someone else could do it, what exactly is stopping me from also doing the same thing?

I asked myself how i could make this journey easier and fun for me. So, i checked YouTube and listened to the stories of other self-taught developers and they mentioned a 'roadmap' i quickly checked out 'roadmaps for beginners in web development' and realized i needed to know some front-end knowledge before delving into back-end. Mind you, i wanted to go straight into back-end development because i suck at creativity. Fast forward that's what brought me to CSS and HTML. Learning both simultaneously. 

## **WHAT I COVERED TODAY**
I learnt about CSS selectors and i am going to highlight the important things i noted out whiles reading and practicing;

- CSS selectors are basically a set of rules which tell the browser the set of HTML elements that should have a specific CSS style. For example, 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftruq08vob0fhldsi0dc.JPG)

This set of code will be displayed on the web browser as;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dty7rwnu12phxtaqn1v8.JPG)

If i want to display the block of code above, i have to write a CSS code for that in order for the '<em>select</em>' to actually display on the web browser as _italics_. The CSS selectors then come in handy because i want to style a specific part in my HTML. 
This is how to CSS selectors would then look like in my external CSS style sheet;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glcx4a3t0dvi8ntgf93u.JPG)

- CSS selectors make coding less stressful because you get to make changes on your external style sheet easily without having to use inline styling, which is tedious and difficult to maintain.

- Before i learnt about CSS selectors, i used to style all my <p> codes with the inline styling and trust me, it was so so stressful because i sometimes mix them up. And imagine me, a beginner having to go through all that stress! I wanted to give up at that point (gosh, i have wanted to give up so many times... even up till now i want to give up 😂😂😂)Anyways, i don't want my documentation to look 'too serious' so i am not being informal. I am making it public as well so i am accountable and try my best to post what i am learning and my progress.

## **WHAT I DID AFTER THE TUTORIALS**
After watching tutorials after tutorials, the realistic thing that mostly happens to me is, i forget what i learnt when it's time for me to do stuff on my own because i mostly just follow blindly to whatever code i see on the tutorial. I was supposed to post this like yesterday but my procrastination kills me every time :/. Anyways i decided to create a super simple website and I'm going to be talking about that in my next post! Documenting my process helps me 'revise' in some way because i get to go over everything i learnt. I hope this pays off one day because learning how to be a programmer is super hard...but achievable :).