CODEWITHSUNDEEP
htmlfontsfont-size
Adrian Curzon
Adrian Curzon

Reputation: 13

Editing Font Size and Style within a internal link

I have recently learnt how to create a html internal link; allowing my members to jump down the page to specific information.

However the coding I have used is set at a standard size and font. I would like to edit the font size and font style of the topic title.

a name="category-one">Under 6's</a>

Above is my current coding; how can I increase the text of the title "Under 6's"?

Upvotes: 1

Views: 415

Answers (3)

zer00ne
zer00ne

Reputation: 43880

There's much more efficient ways to refer to an object.

  • class is versatile in that you can apply it multiple times, this is the prefered way.

  • id is not as versatile because each id must be unique so your'e limited to just styling a single element.

a[name='category-one'] {
  font-size: 16px;
  font-family: "Palatino Linotype";
}
a.category-two {
  font-size: 1em;
  font-family: "Source Code Pro";
}
a#category-three {
  font: 1rem;
  font-family: "Verdana";
}
a:hover {
  font-size: 20px;
  font-family: "Arial";
}
<a name="category-one">Under 6's (refer by name attribute)</a>
<a class="category-two">Under 7's (refer by class attribute)</a>
<a id="category-three">Under 8's (refer by id attribute)</a>

There's three ways to apply styles:

  1. The prefered way is using a separate file (e.g. style.css) and then pointing to it from your main page:

    <link href="http://www.example.com/css/style.css" rel="stylesheet"/>

    It may be more work to maintain a separate file, but it can be used by multiple pages on your site.

  2. Another way to provide CSS rules is to use the <style> element and place that before the closing </head> tag. Although faster when loading, the code will become difficult to manage and it can only be used by one page (the page the <style> is on.)

    .... <style> .foo { height: 60px; } .... </style> </head>

  3. Inline styles are discouraged and should be used sparingly if at all. They are limited to only the element they are on and harder to locate and debug. One advantage is that the rules will take priority over all other non-inline style rules (or should I say, most of the time, because there's always a bug or edge cases).

    <a name="category-four" style="color: red; background: #000;">Under 9's</a>

Upvotes: 0

gio
gio

Reputation: 1

You should always use css for styling. You can give each element a separate class and style those accordingly.

Under 6's

In css:

.title a{color: blue;}

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133360

you can use inline style in a element this way 

<a name="category-one" style="font-size:18px; color: green;" >Under 6's </a>

Upvotes: 1

Related Questions