WHAT I LEARNT AT BLOCKFUSE LABS THIS WEEK.
We finished everything about html ending january and started css on monday, so i,m going to be writing about css basics on this article.
CSS(cascading stylesheet) is used in designing and styling the layout of a webpage like adding color, editing font size, text decoration e.t.c.
CSS is used to work on html elements so in order to use css, you have to first of all learn html before proceeding to styling.
In css, we have selectors which are used in targetting or aiming at specific html elements namely ID, CLASS and NAME OF ELEMENT. We also have what is called a pseudo selector which is used to selector a child of a particular element.
There are three different ways of writing css namely:
1.Inline styling which is writing the style property in the opening tag of an element.
2.Internal styling which is opening a style tag and applying the properties in the style tag.
3.External styling which is opening another file in vs code and applying every style there instead of writing in the same file as webpage.
In css, there is something called a boxel model which is used to give structure to the webpage, we have the content which is the elements of the webpage, we have padding which is the space between the content and the border, we have the border which is the space between the padding and the margin and we have the margin which is the surrounding or edges of the web.the box model is used to ensure adequate spacing in a webpage.
We also learnt about the selector hierarchy which is in this order:ID>CLASS>NAME OF ELEMENT.
The name of element is used to an entire element e.g div{color:white}, class is used to select a group in an element and it is called by putting dot(.) before the name assigned to the class e.g <div class="p">hi
</div>
.p{
color:white
}
while id is used to select a particular item in an element and is called out by using # symbol.
this is why the id is at the top of the hierarchy because of it's ability to select a particular item in an element.
i also learnt about flexbox.A flexbox is used to align items in a one dimensional pattern which is either the main axis or the the cross axis and it is used in the code by writing display:flex;. once this has been used, it displays items horizontally by default.
they are other flex commands like justify content which is used to align items horizontally, align items which is used to align items vertically, flex direction which is used to set the direction of items either in rows or column e.t.c.
flexbox is basically used to make spacing easier than using boxmodel and it offer more options like changing the direction of items.
In summary:
css is used in styling the layout of a webpage.
there are three different ways of writing css which are inline styling, internal styling and external styling.
selectors are used in selecting html elements for styling.
box model ensures adequating spacing of a webpage.
the hierarchy of selectors are ID>CLASS>NAME OF ELEMENT.
Flexbox is used in aligning items on the main axis and cross axis and is easier than using box model.
I look forward to what more i can learn next week.