CODEWITHSUNDEEP
htmlcss
Tariq Aziz
Tariq Aziz

Reputation: 5

CSS styling for paragraph not taking effect in head but takes effect when declared in the body

I'm fairly a newbie at HTML and CSS. I've been following procedures on w3schools and also experimenting with things on my own. One of the first problems I've faces so far is in this code:

<!DOCTYPE html>
<html>
  <head>
    <title>vector5 - Home</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
    <style>
      <!-- Link Styling-->a {
        text-decoration: none;
        color: #6a9496;
      }

      a:visited {
        text-decoration: none;
        color: #6a9496;
      }

      a:hover {
        text-decoration: none;
        color: #6a9496;
      }

      a:focus {
        text-decoration: none;
        color: #6a9496;
      }

      a:active {
        text-decoration: none;
        color: #6a9496;
      }

      <!-- Paragraph Styling-->p {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 250px;
        margin-left: 100px;
        border: 10px solid powderblue;
        color: #757575;
        text-align: justify;
        font-size: 100%;
        font-family: 'Roboto', sans-serif;
      }
    </style>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body style="background-color: #99bfc1;">
    <h1 style="color: #6a9496; font-family: 'Roboto'; font-size: 200%;">Lorem Di Ipsum</h1>
    <p style="margin-top: 0px; margin-bottom: 0px; margin-right: 250px; margin-left: 100px; border: 10px solid powderblue; color: #757575; text-align: justify; font-size: 100%; font-family: 'Roboto', sans-serif;"
      title="Lorem Di Ipsum">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry, used for <b><abbr title="Hypertext Markup Language">HTML</abbr></b>    and design in modern times. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when a unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
      but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
      the release of Letraset sheets containing cursive cursive Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum. To learn more about the <i>'Lorem Di Ipsum test'</i>,
      you can visit <a href="https://www.cs.tut.fi/~jkorpela/www/justify.html" style="text-decoration: none;" target="_blank">this website</a>.
    </p>
  </body>
</html>

The styling for the paragraph works when I attribute it as a style with the paragraph element. However, when I deleted the style attributes with the paragraph element in the body and left the paragraph css styling in the head, within the style elements, the text in the browser reverted back to the default text (black Times New Roman font). I don't understand what is going on or why my code works for the body, can anyone shed some light on this?

I also have another question. What should I do if I want to use the same font in the paragraph, but of different thickness?

Upvotes: 0

Views: 678

Answers (3)

PratapRockerss
PratapRockerss

Reputation: 71

Declare your fonts at first link element of you page.

Upvotes: 1

Alex Waddelove
Alex Waddelove

Reputation: 16

You are using a HTML comment in CSS either remove the comment or change too.

/*'Paragraph Styling' */

Upvotes: 0

krolovolk
krolovolk

Reputation: 472

What should I do if I want to use the same font in the paragraph, but of different thickness?

Use another tag inside <p>. May be <b>, <strong>, etc

the text in the browser reverted back to the default text (black Times New Roman font).

Check another css-styles for these elements (Chrome DevTools can help)

Upvotes: 1

Related Questions