0

I am doing my first website using xampp and I have problems while changing specific parts of the text font on it. I managed to change the font of the whole body but i want a different font for the title, what i did was to create a rule in css with the name of the font and then using it in the part i want to change (h1). It probably is a stupid mistake so forgive my ignorance.

body {
  font-family: 'Lato', sans-serif;
}

img {
  max-width: 100%;
}

.quitar-float {
  float: none;
}

.espacio-arriba {
  /*margin-top: 100px*/
}

.pacifico {
  font-family: 'Pacifico', cursive;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>

<div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal">
  <img src="imgs/descarga.png">
  <h1 class= "pacifico">hello world</h1>
  <h2>This is my first website</h2>
  <nav>
    <a href="http://google.com">Galerie</a>
    <a href="http://facebook.com">About</a>
  </nav>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
Nadia Rodriguez
  • 77
  • 7
  • No, I want to change the

    tag not the actual title of the site.

     – Nadia Rodriguez Nov 02 '17 at 19:45
  • 1
    @NadiaRodriguez It seems to work just fine. – Kushtrim Nov 02 '17 at 19:46
  • @Kushtrim When I load the site i have the same font for everything. – Nadia Rodriguez Nov 02 '17 at 19:51
  • I can't reproduce the problem either. Can you provide a link to the page? – showdev Nov 02 '17 at 19:52
  • 2
    @NadiaRodriguez These kind of errors often mean that some other CSS is overriding yours, or that yours is not getting applied in the first place. Make friends with the [inspect element tool](https://www.lifewire.com/get-inspect-element-tool-for-browser-756549) in your browser, to see what's really going on. If your style is overridden, it will show it crossed out; if it's not getting applied, it won't show up at all. – jpaugh Nov 02 '17 at 20:26

4 Answers4

1

simple and quick answer. You did everythink right but you got an blank in your h1 tag between = and ".

try: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="ccs/main.ccs">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>
    <title>The best site in the world</title>
</head>

<body>
    <div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal">
        <img src="imgs/descarga.png">
        <h1 class="pacifico">hello world</h1>
        <h2>This is my first website</h2>
        <nav>
            <a href="http://google.com">Galerie</a>
            <a href="http://facebook.com">About</a>
        </nav>
    </div>
</body>

</html>

and it should work.

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Buzzet
  • 693
  • 1
  • 7
  • 19
0

That one is quite tricky... try this: <h1 class="pacifico">hello world</h1> You put a space between class= and "pacifico"

And while it is a stupid mistake it happens to experienced developers every day so just forget that.

EDIT: While leaving this space in the code may work for newer webservers, older ones don't support it.

DeveloperTK
  • 112
  • 2
  • 9
  • [This post](https://stackoverflow.com/questions/7064095/spaces-between-html-attributes-and-values) says "any amount of whitespace is allowed and will work in all browsers". `¯\_(ツ)_/¯` – showdev Nov 02 '17 at 20:21
  • @DeveloperTK how is the server related? It's the *browser* that renders HTML – jpaugh Nov 02 '17 at 20:25
  • Old webservers used to just pass you the HTML text. newer ones deliver them as instructions. So it won't work for a few servers like Apache 1.4 – DeveloperTK Nov 02 '17 at 20:25
0

body{
    font-family: 'Lato', sans-serif;    
}
img{
    max-width: 100%;
}
.quitar-float{
    float:none;
}
.espacio-arriba{
    margin-top:100px
}
.pacifico{
    font-family:'Pacifico', cursive;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="ccs/main.ccs">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>
    <title>The best site in the world</title>
</head>
<body>
    <div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal"> 
        <img src="imgs/descarga.png">
        <h1 class="pacifico">hello world</h1>
        <h2>This is my first website</h2>
        <nav>
            <a href="http://google.com">Galerie</a>
            <a href="http://facebook.com">About</a>
    </nav>
    </div>

</body>
</html>
Billu
  • 2,733
  • 26
  • 47
-2

On your class .pacifico you need to define you are talking about the h1 tag.

It should look like:

.pacifico h1 {
font-family: 'Pacifico', cursive;
}
Alex
  • 3
  • 5