DEV Community

Mihaidev-cloud
Mihaidev-cloud

Posted on

How to create an section HTML and CSS!

Hi, Welcome To tutorial called "How to create an section with html and css"

First we need to create an section in html and link the css file or you can just tags in html

<style>

we put the code css in case if we don't want to link the css file!

</style>

<!--Creating section in html and creating an class which will help us to specify it  in css --!>

<section id="chooseyournameforid">
<h1>A very cool Heading!</h1>
<p>A very cool paragraph!</p>
</section>

<link rel="stylesheet" href="yourstyle.css">
Enter fullscreen mode Exit fullscreen mode

Now we are Create the css file or the tag style

and we are paste this code!

#yournameid {
    background-color: !color you want!;
    width: 100%;
    height:70%; !here we can change our height and width based on text and more!
    position: absolute;  !here we can change position in case if you want but don't change to fixed because the section will come every tiem you scroll down on page!
    left:0px; you can as well on right position too!
    top: 100%; !here we put how far we want to be the bottom when we scroll down!
    color: black; !color for texts!
}
Enter fullscreen mode Exit fullscreen mode

And after this, you should have your new section made by yourself!

Here should look our new section:

https://codepen.io/mihaidev-cloud/pen/xxXWVrK

Top comments (0)