How to HTML CSS stands for Cascading Style Sheets

Welcome to the 22nd post in the HTML and CSS Beginner Tutorial Series We've seen the HTML code to create a layout, in the previous post in this post, let's take a look at how to style that layout using CSS and set the spacing and arrangements the way we desire.so, let's get started(intro music)We need a file called style.css right?We had discussed the importance of file organization in a previous post.So, I'm opening this folder called "css" and creating a new file Let's call this file "style.css"Now we want to link this css file to our HTML file for that, let's open index.html let's come below this title tag inside of head section and write in this, the href is the path of our CSS file rel means the relationship that file has to this HTML file let's give its value as stylesheet now let's savenow let's do one thing to ensure that this linking properly worked let's come to this css file let's try writing a simple rule in this I'm writing body in here.now let's save and seenow look, the page background has become red So, now we're sure that our css file is properly linked now let's change this background color to whatever we want let's change this red to a different color I had picked a color palette from the internet So, in here, let's give color as the background color Now I am going to css font stack website...Copy and paste the Century Gothic font family from there to here.Now let's set oru font size as 18px Let's leave body style as it is now.Now let's do one thingLet's open our html file and see which is the first element in it, again here the first element is the header element So let's style it first,let's come back to css file let's write header and put curly brackets note that this header is an element tag we are not using class selector or id selector to style it just write header as an element selector to select it now let's give a background color to this header I am giving a darker shade color from my color palette as the background color here.#42C2FFNow let's see the pageThe body background color that we had set is visible in there.the darker color that we had given to header is also present But look at the margin of this header.Can't you see an unnecessary spacing in there?Can't you see that it has a gap on top, left and right sides?It is there because, every webpage has a default format...therefore, every element in a page has a default margin value our body tag has such an 8px margin around it If it weren't there...all these text would touch the border of the page and would look boring that is why such a default value exists for all these.But most of the time, when we style the page, this default value becomes annoying to us therefore the first thing that most web designers do is to reset this default margin value to 0 for that, let's come to the style of this body tag and simply give margin: 0; now let's save and look at the page...we can see that the margin issue on the left and right side has gone...but the gap on the top is still there...the reason for that is, that the h1 tag inside of the header also has a margin on top and bottom...in order to fill this gap, we can explicitly style that h1 tag and set margin: 0; in that.but in here, since we need a little bit of size on our header let's do one thinghere, in the style of header, let's give padding-top and padding-bottom as 30px now let's look at the pagenow you can see, that header section is big and neatly arranged let's open the inspect element window for this page even though we had given 30px padding in here, we can see that, actually it is more than that remember that the reason for this is that, the h1 tag inside of the header also has default margin values...there are ways to reset the default margin of all tags...but since this is a beginner tutorial, let it be like this for now.now let's come to the style of this header.I am writing text-align: center; in this.now we can see that our heading has come to the center of the page.now let's set color : white; and let's give text-transform: uppercase; when we are giving like this, we can see that all letters has become uppercase.okay. for now, header style is enough as it is.now let's come to the htmllet's take a look at what all things are there.here we have a div with class as container inside of that, there is a section and inside of that there are some contents.below that is a sidebar called in this, we know this sidebar is supposed to be placed on the right side of the section see how the section and aside are currently arranged in the page.in a default format, they are arranged one below the other..so, let's come to the csswe know that the parent element is the div with class name container so let's come below here and write .container to style that div with class container.let's give width: 80%; to this container now look at the pagewe can see that its width has reduced.now let's center this container.I am giving margin: 0 auto; now we can see that container is aligned in the center of the page.the style for container is enough for now.now let's style the section and aside which are inside of this container.for that, below here, I am writing section and opens and closes curly bracket.just like that, also write aside and open and close the curly brackets here we know that this section is supposed to be on the left side and this aside is supposed to be on the right side.I believe that you remember the concept of FLOAT which was discussed in a past post.so I am giving float:left; in the style of section and float: right; in the style of aside now you might be thinking that these two lines are enough to align them on either sides.but you can see that is not what happened here.the reason for this is that...our section...occupies the 100% width inside of the container therefore, our sidebar which is the can only be right aligned in the next line..also, we can see our footer comes into the gap on the right of it...we can fix this very easily. let's set a width to this section I am setting width: 70%; in here Remember that this 70% is not the 70% width of the entire body of the page.Instead, it means that it occupies the 70% width of its parent element which is the container okay! as of now, we can see that alignment is coming into place...still, to have a little bit of gap between the section and sidebar, let's set width: 25%; inside of the style of aside because of this, there will be a little bit of gap between the section and sidebar otherwise, we will see the text inside of both these touch each other.Now, notice that our footer has come up to here?this paragraph is the paragraph inside of our footer.we actually need this footer to be on the bottom of everything So let's style the footer next let's come below here and write footer and select the footer to style in this, the first thing that I am giving is...clear: both;now you can see it has come to the bottom...we are giving this clear: both; in order to clear the float value that we recently set up You will understand this in detail, if you watch the post I did on FLOAT and CLEAR okay, now let's give this footer a background-color I am giving the same old dark shade color that I had given to the header #42C2FFnow let's give a padding value to this as well Let's write padding: 50px 0; to set padding on top and bottom as 50px and left and right as 0px now let's write text-align: center; to center the text in the footer as well now, in order to give a little bit of gap below this container, let's write margin-bottom: 100px; in the style of this section now we need a similar gap in the top as well for that, let's write margin-bottom: 100px; in the style of this header okay, now we can see that our layout is almost done we can say that, if you can create such a layout, you can create pretty much any layout therefore, we can say that, you have covered almost all basic things in the web design there is a lot more advanced things to learn...if you have reached this level, it means that you have learned all the basic things...now in order to make this layout a little bit more beautiful, let's do a few more things let's give a background white to this section and aside lets give padding 5px to both of these also, let's give border radius as 0.2em to both okay, now our page looks beautiful and became a good looking page there is a lot more things that can be done on this page but I don't want to lengthen this post and make you bored..If you have watched all 22 posts in this series, I would like to thank you very much! HUGE THANKS!!!thumbs up if you liked the post, comment down your opinions and doubts...SUBSCRIBE for more posts like this...Until we see next time with more informative posts