We have already created My First HTML Website . Here, we will write the CSS code of My First HTML Website. This code can be used inline CSS. It is in inside of the HTML page. we will see the CSS code the HTML page.
Body
Here, we will start <style> tag in inside of the HTML Page. Here, Style of the body of HTML page. It will start from <head> tag. we will set the font-family, margin, padding and background color of the HTML page.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}Header
Next, we will create a CSS code for the header section of the HTML page. Here, we will set the background -color,color, padding ,text-align of the header of the HTML page.color means colour of the text.
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}Menu
Next, we will create the CSS code for the navigation menu like Home, About, Contact. Here, We will set the background color , padding, and text align of the Menu section.
nav {
background-color: #666;
padding: 10px;
text-align: center;
}Then, We will create the CSS code for anchor link navigation menu. We will set the color, text decoration, margin of the navigation menu. Here, we will eliminate underline of the anchor link. we will use text-decoration:none; and color of the menu text and margin of the menu.
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}Main
Then, We will create the CSS code for the Main Content of the HTML page.we will set the padding of this page. Padding means creating a space around the main content.
main {
padding: 20px;
}Footer
Then, We will create the CSS code for the Footer of this Page. we will set the background color, color of the text, width,bottom ,position,text alignment and padding of the footer.
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}Then , we will close the </style> tag. And then, we will close the</head> tag also. This code can be written in inside of the <head> tag .
Example
See the Pen
My first html website by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.
This is the CSS code of the HTML page. It is useful for building a website at beginner level. If you have any questions, please feel free to ask me. Happy Coding….
Your writing is so eloquent and persuasive You have a talent for getting your message across and inspiring meaningful change
This is exactly what I needed to read today Your words have provided me with much-needed reassurance and comfort
Your blog has quickly become one of my favorites I always look forward to your new posts and the insights they offer
I appreciate how well-researched and informative each post is It’s obvious how much effort you put into your work
I absolutely value the information you publish on this blog!
Have you ever considered about adding a little bit more than just your articles? I mean, what you say is fundamental and everything. Nevertheless just imagine if you added some great pictures or video clips to give your posts more, “pop”! Your content is excellent but with images and video clips, this blog could undeniably be one of the greatest in its niche. Great blog!
My brother recommended I might like this blog. He was entirely
right. This post truly made my day. You cann’t imagine just how much time I
had spent for this information! Thanks!
thanks good jobs
Excellent beat ! I would like to apprentice at the same time as you amend your site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I had been tiny bit familiar of this your broadcast provided bright transparent concept
I would like to thnkx for the efforts you’ve put in writing this website. I am hoping the same high-grade website post from you in the upcoming also. In fact your creative writing skills has inspired me to get my own web site now. Actually the blogging is spreading its wings rapidly. Your write up is a good example of it.