-2

I have created the logo of my website as text, but the first part of my logo "hello" needs other styling than the second part "Kitty"

requirements:

  • both words have to be italic, so I created a h1 class "logo-text" DONE

  • the seconds word "Kitty" needs to be bold NOT DONE

    <h1 class="logo-text">

  <a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'name' ); ?>" rel="home">hello

     <span class="logo-text-kitty>"Kitty</span>
  </a>
</h1>

What is the right way to make "Kitty" bold? Using a span?

Black Sheep
  • 6,604
  • 7
  • 30
  • 51
Engin
  • 135
  • 1
  • 10
  • 2
    Is that entire php stuff relevant to your question? – Jongware May 17 '14 at 20:26
  • 1
    @Jongware We left presentational markup like `
    ` and `` in the dust years ago. HTML should describe content, not appearance. The fact that `strong` makes something bold by default is not enough reason to use it whenever you want bold text. It's nit-picky, but I believe this is the essence of the question.
     – Wesley Murch May 17 '14 at 20:37
  • the css is not important for me, its just about the html semantic – Engin May 17 '14 at 20:42

3 Answers3

3
<style>
.bold-class{
font-weight: bold;
}
</style>
<h1 class="logo-text"><a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'name' );?>" rel="home"><span class="bold-class">helloKitty</span></a></h1>
FBC
  • 1,047
  • 8
  • 18
  • 2
    I dislike everything about this answer. You don't need to call a class "-class", since we already know it's a class. You don't need to name things as 'bold', as that's not really describing the data (that's the entire reason as defined as 'bold' was redefined in later html standards), and you're continuing to use a when a would make a lot more sense. – Josh from Qaribou May 17 '14 at 21:34
  • oh and as pointed out on my other answer, might be better than . Not the most important point, as is the least of the offences in this answer. – Josh from Qaribou May 17 '14 at 21:44
2

You can style each word separately by giving it a class

HTML

<h1 class="logo-text">
    <a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'name' ); ?>" rel="home">
        <span class="logo-first-word">hello</span>
        <span class="logo-second-word">Kitty</span>
    </a>
</h1>

CSS

.logo-first-word{
    //some CSS code
}

.logo-second-word{
    font-weight:bold;
    //some CSS code
}
Community
  • 1
  • 1
MujtabaFR
  • 5,956
  • 6
  • 40
  • 66
  • 1
    thank you for your help, but Flamur was 4 minutes faster so :) – Engin May 17 '14 at 20:45
  • Inline-styling like your first answer is very bad form. HTML describes your content, and CSS describes the style. There's an occasional use for style elements, generally if it's rendered content (e.g. including a background-image from your PHP), but in this cases you're directly splitting the same styling across html and css. Your second approach, however, is sound. – Josh from Qaribou May 17 '14 at 21:38
1

Use a tag that best describes the content. In this case, <strong>. Alternatively, <b> would be a better choice if 'kitty' isn't really more important than 'hello', simple meant to be formatted different.

Josh from Qaribou
  • 6,776
  • 2
  • 23
  • 21