Is these style of coding correct?

Question

I just started to learn CSS and created a sample page on my local portal. I would like to know whether these style of coding is correct or not.

I came to know that these style of coding doesn't work in major extents.

Could you correct my code according to make it much more feasible and I would try to learn some of your coding styles and will adapt it to my convinience.

Sorry if these sort of questions can't be asked in this site.

<div class="initial">

<div style="position:relative; width:100%; margin-Top: 4.75%; font-size: 1.3em; font-family: Helvetica; text-align: center; background-color: #bbb;">
<center><p style='line-height:200%'>

<a href=h.php style="text-decoration: none; color:white"> Home</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<a href=click.php style="text-decoration: none; color:white">Please Click Here</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<a href=contact.php style="text-decoration: none; color:white">Contact</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href=about.php style="text-decoration: none; color:white">About Me</a></p></center>
    
</style>
</div>
</div>

Thanks,

Don't mix HTML and CSS in one file; Apply indentation to your code, so it is easier to read; Don't use for layout (use styles instead). — akasummer, Sep 25 '15 at 11:24
If you want code review, use code review http://codereview.stackexchange.com/ — Roger, Sep 25 '15 at 11:27
For this sort of lines I can mix both CSS and HTML isn't it? — Novice, Sep 25 '15 at 11:28

score 2 · Accepted Answer · answered Sep 25 '15 at 11:34

At first points to be noted..

Don't use inline CSS
Instead of using   use either margin or padding
Margin and padding let's you give space between two tags

See the snippet how i implement the padding

.initial-content {
  position: relative;
  width: 100%;
  margin-Top: 4.75%;
  font-size: 1.3em;
  font-family: Helvetica;
  text-align: center;
  background-color: #bbb;
}
p {
  line-height: 200%;
}
a {
  text-decoration: none;
  color: white;
  padding: 5px 25px;
}

<div class="initial">

  <div class="initial-content">
    <center>
      <p>

        <a href=h.php> Home</a>
        <a href=click.php>Please Click Here</a>
        <a href=contact.php>Contact</a>
        <a href=about.php>About Me</a>
      </p>
    </center>

  </div>
</div>

Thanks for the detail code according to types. – Novice Sep 25 '15 at 11:41 — Novice, Sep 25 '15 at 11:41

score 1 · Answer 2 · answered Sep 25 '15 at 11:21

1

Things to Note:

HTML skeleton is missing.
CSS can be used seperately rather inline.
Instead of nbsp you need to use margins and padding. You need to know float.

answered Sep 25 '15 at 11:21

DDphp

390
2
3
16

Thanks for sharing. Will work it out on the margins now but i would like to know why to use padding property in this code? – Novice Sep 25 '15 at 11:25
@Novice Think like this: "What information I want to deliver to user?" - your HTML should answer this question. "How I want it to look like?" - use CSS to achieve that. – akasummer Sep 25 '15 at 11:28
@Novice In this example you are using ` ` for visual purposes, that should be your trigger to substitute it with correct CSS – akasummer Sep 25 '15 at 11:30

score 0 · Answer 3 · edited May 23 '17 at 11:52

Well, if it 'doesn't work in major extents', you answered half a question: it means it's not correct. What exactly is not correct:

Inline CSS should work fine, and you can use it for testing. But you should otherwise use a css file. Use identifiers like ids and classes.
href attribute value must be inside quotes or double quotes.
</style> closing doesn't close anything. You could use css code inside these tags, but it's more appropriate to use .css files instead.
  thing: Use positioning css. For example, if you want the items aligned vertically, you can use item{clear:left;float:left;}
<center> tag is deprecated. Why? Use instead:<div class="centered(or whatever you feel like calling it)"> and style it:.centered{width: 60%;margin:auto;}

But the rest is just right.

Is these style of coding correct?

3 Answers3