My First Website using HTML and CSS

65 Comments / Projects / By

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.

Table Of Contents
  1. Body
  2. Header
  3. Menu
  4. Main
  5. Footer
  6. Example

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….

65 thoughts on “My First Website using HTML and CSS”

  5. https://sashawinner20227.Wixsite.com/icelandcasino

    First of all I want to say superb blog! I had a quicck
    question in which I’d lie to ask if you do not mind. I was curious to know how you center yourself and clear your thoughts prior to writing.
    I have had a toygh time clearing my mind iin gertting my thoughts out.
    I truly do enjoy writing however it just seems like thhe first
    10 tto 15 minutes are usually wasted simply just trying to figure out how too
    begin. Anny ideas or hints? Cheers! https://sashawinner20227.wixsite.com/icelandcasino

    Reply
    1. MeenaSubash

      Thank you. whatever I want to write the topic, I searched deeply that particular topic and sort it out then write it. I can’t write the article in one day. I posted the article weekly once. so I planned for it. You try it slowly then you will reach it one day. All the best.

      Reply
  7. Ernestine

    An outstanding share! I’ve just forwarded this onto a colleague
    who has been doing a little homework on this.
    And he in fact bought me lunch ddue to the fact that I found itt for
    him… lol. So allow me to reword this…. Thanks for the meal!!
    But yeah, thanx for spending the time to talk about this issue here on your internet site. https://iclcasinos.mystrikingly.com/

    Reply
  14. Bret

    I’ve been surfing online more han three hours today, yet I never found any attention-grabbing article like yours.
    It’s pretty worth enough for me. In my opinion, if
    all website owners and bloggers made jus right content
    material as you probably did, the net might be a lot more useful than ever
    before. https://www.flickr.com/people/200292951@N07/

    Reply
  15. http://forum.altaycoins.com/viewtopic.php?id=840180

    Heyy there I am so grateful I found your web site, I really found you by accident, while I was searching oon Askjeeve for something else, Regardless I am here now and would just like to say kudos for a remarkable post and
    a all round exciting blog (I also love the theme/design),I
    don’t have time to look over it all at the moment but I have
    bookmarked it and also added your RSS feeds, so when I have time I will be back to read a
    great deal more, Please do keep up the fantastic work. http://forum.altaycoins.com/viewtopic.php?id=840180

    Reply
  31. https://educarconamor.com/community/profile/lemuelfuhrmann9/

    Hello there, I discovcered your blog viaa Google whilst looking for a reloated subject,
    your web site came up, it appears good. I have bookmarked it in my google bookmarks.

    Hi there, simply changed into aware of your blog vvia Google, and located that it is truly informative.
    I’m gonna watch out forr brussels. I’ll be grateful
    should you proceed this in future. A lot of folk can be
    benefited from yoour writing. Cheers! https://educarconamor.com/community/profile/lemuelfuhrmann9/

    Reply
  41. https://www.pearltrees.com/alexx22x/item622632700

    Hi there, I discovered your web site by means of Google even as
    lookking for a related matter, your web site got here up, it appears good.
    I’ve bookmarked it in my google bookmarks.
    Hello there, simply was aware of your blog thru Google, and located
    that it’s really informative. I’m going tto watch out for brussels.

    I wil appreciate should you proceed this in future.
    Numerous other folks will probably be benefited from your writing.
    Cheers! https://www.pearltrees.com/alexx22x/item622632700

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top