How to handle hyperlink in css?

Question

i have made 5 hyperlinks in html file but i want to give space between them how should i do it a little help!

thank you!

<body>
<div class="back">

    <div class="image">
        <img src="comp.jpg" alt="background image" style="width:100%; height:100%">

    </div>
    <h3 class="name" style="color: #d9d9d9">
        ASHUTOSH KUMAR SINGH
    </h3>

    <div class="link" align="middle">
        <a href="about.html" style="color: white">About</a>
        <a href="contact.html" style="color: white">Contact</a>
        <a href="skill.html" style="color: white">Skills</a>
        <a href="mywork.html" style="color: white">My Work</a>
        <a href="blog" style="color: white">Blog</a>

    </div>
<div class="myimg" align="middle">
    <div class="circle" align="middle">

    </div>
    <img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>

</div>
 </div>

this is my css file: in the code below i have made a class of link in which i cascaded it. i want to give some equal space between them so that it look neat.

html,body{
    margin:0;
}

div.link{
font-size: 25px;
    position: fixed;
    /*text-space: 100;*/
    margin-top:500px;
    margin-left: 250px;
}
.back{
    height: 100%;
    width: 100%;
margin: 0;
 }

.image{
    position: fixed;

}
.myimg{
    position: absolute;
    margin-top:100px;
    margin-left: 500px;
}
.myimage{

    border: 2px solid rgba(114, 114, 114, 0.55);
    border-radius: 100%;
}
.circle{
    border: 2px ;
    border-radius: 100%;
    background-color: black;
}
.name{
    position: fixed;
    margin-top:420px;
    margin-left: 530px;
}

Please reproduce what you have done so far in a fiddle or so.. — Lal, Feb 12 '17 at 16:20

score 1 · Answer 1 · edited May 23 '17 at 11:46

Try to avoid custom CSS-Styles in your HTML-File and include them in your CSS-File. You can use padding or margin in your CSS-File, see this link for the difference.

YourHTMLfile.html

<head>
  <link rel="stylesheet" href="YourStyleFile.css">
</head>

<body>

  ...

  <div class="link" align="middle">
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
      <a href="skill.html">Skills</a>
      <a href="mywork.html">My Work</a>
      <a href="blog">Blog</a>
  </div>

</body>

YourStyleFile.css

.link a {
    padding: 16px;
    color: white;
}

EDIT: make sure to create a CSS-File and add it to your <head> section of your HTML-File. They both have to be in the same directory. Another reason why my code may not work for you is that maybe you have another CSS-File which overrides the .link class.

score 1 · Accepted Answer · answered Feb 12 '17 at 16:59

I think the most easiest way you're looking for is:

.link a {margin-right:10px;}

the only problem with this is that all link elements get now a margin-right, from the first to the last one. if you want to exclude the last element to have no margin right, add an additonal:

.link a:last-child{margin-right:0px;}

remember that in css you can perfectly nest css selectors

html body .back .link a{some-css-rule}

by the way, the more specific a selector is, the more important it will be when the browser analyses them)

<div class="some_class" id="some_id" style="color:grey;">sometext</div>

#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}

the color will be grey, because inline selectors have more weight than selectors with ID, which have more weight than selectors with classes, which have more weight than selectors with html containers. This is called CSS specifity CSS-specifity calculator by keegan.st

CSS specifity explained by css-tricks

score 0 · Answer 3 · answered Feb 12 '17 at 16:37

0

Wrap them in a div and style the div with word-spacing: 10px; :)

answered Feb 12 '17 at 16:37

Shobhit

1,096
11
30

How to handle hyperlink in css?

3 Answers3