---
# System prepended metadata

title: 'Week 4: My CSS Baby Steps 1'

---

Hiiiii. Truth be told, I didn’t feel like writing anything at all this week. I’m writing this more out of obligation which you could say is a good thing. Pushing myself even when I dont feel like it is not bad, is it? Remember when I said we would be starting CSS this week? Well, we did.

Here’s a little breakdown of what I now know about CSS. CSS is an acronym for Cascading Style Sheets, which basically means design and presentation. In simple terms, CSS is what makes our HTML webpages look good. So if HTML is the skeleton of a webpage, CSS is the flesh.

Before I talk about styling, let’s talk about selectors.
Selectors are used to tell CSS which HTML elements to style. In other words, they help us target specific HTML elements. For example, if you want to style a particular tag like `p` or a `div`, you can target it using a selector.
There are three common selectors;
1. ID
2. Class name
3. Element name
There is also the universal selector, represented by  *.

**Ways of styling in CSS**
1. Inline styling: This is when styling is done  inside the opening HTML tag. You assign a property name and a property value, and you don’t need a selector.
For example: `p style="color: blue;"`
In this example, color is the property name, while blue is the property value.
Inline styling has the highest specificity, which means it usually takes priority over internal and external styles. The browser will override the other two when an inline style is present.
2. Internal styling: This method involves styling within the HTML document itself, inside the head tag, using the style element. This means you style your document between the opening and closing style tags in the head section.
This is where selectors come in, as you have to target elements using an ID, class name, or element name. I hope this explanation makes sense and isn’t confusing.
3. External styling: Here, the styling is done in a separate CSS file outside the HTML document. This file is then linked to the HTML document using the `link` tag. In the external CSS file, you use a dot (.) to target a class name, for example .container, assuming container is the class name, and then assign the  properties and values.

There are numerous CSS properties, and it is almost impossible to know every one of them by heart. However there are some common ones like the margin, padding, border radius, color, background-color, text-allign, font-size, etc.

We also learnt about Box model. You will notice that html elements are stacked on top of each other like a block. i.e they are block level elements always starting on a new line. Box model views html elements as a rectangular box, and helps determine the position, and spacing of html elements using the PBM,  an acroymn I now use for padding, border, and margin.

Pheww! There is so much more to talk about. We were introduced to Flexbox too, but I will have to discuss this in a different note as this is already getting longer than usual. 
Oh, we did lots of praticals as well, I built and designed a form myself and it didn't look bad for a beginner. Guess what? I used my little knowledge of CSS to try to clone The Netflix Nigeria homepage. I say try because it is still a work in progress and I got stuck at some point. It is exciting when the code works but less exciting and even frustrating when it doesnt.
I think that is the most difficult part of this journey, trying to fgure out where I made a mistake in the code. Not to worry though, I am not giving up yet.