It seems like there could be an issue with the CSS file not properly connecting to the HTML, or possibly the Jumbotron is not allowing the

Question

It seems like there could be an issue with the CSS file not properly connecting to the HTML, or possibly the Jumbotron is not allowing the

Need help with text color! Trying to set h1 element to #513271, but it's not working. Check out my code and failed solutions below.

CSS saved as stylesheet.css in same folder as tributePage.html.

jumbotron h1 {
  color: #513271;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />

<html>

<head>
  <title>Lizzy McGuire, an Evolution</title>
</head>

<div class="container">
  <div class="jumbotron">

    <body>
      <h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
    </body>
  </div>
</div>

</html>

Tried several solutions. All attempts listed below.

Change the CSS file path
- C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
- C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
- \stylesheet.css (I've used \ through \\\)
- stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
- < link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
- < link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
- h1, #h1, .h1
- jumbotron h1, #jumbotron h1, .jumbotron h1
- jumbotron-h1, #jumbotron-h1, .jumbotron-h1
- purple text, #purple text, .purple text
- purple-text, #purple-text, .purple-text
Change the font color with an inline element
- < h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.

Thank you for your assistance!

html css bootstrap-4

Answer 1

Answer №1

When styling your webpage with CSS, make sure to use the following code:

.banner h1 {
    color: #513271;
}

Don't forget to include the period before 'banner' to signify it as a class.

Answer 2

When styling your webpage with CSS, make sure to use the following code:

.banner h1 {
    color: #513271;
}

Don't forget to include the period before 'banner' to signify it as a class.

Answer 3

Answer №2

I trust that my response will be beneficial to you:

Here is your initial code:

<html>
  <head>
    <title>Lizzy McGuire, an Evolution</title>
  </head>

  <div class="container">
    <div class="jumbotron">
      <body>
        <h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
      </body>
    </div>
  </div>
</html>

It is not permissible to have a div element outside of the body tag.

You must add the link to the CSS file in the head tag. Revise your code as follows:

<html>
  <head>
    <title>Lizzy McGuire, an Evolution</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>Hey now, hey now.</h1>
      </div>
    </div>
  </body>
  </html>

Upon examination, it appears that in your CSS file you defined a 'jumbotron h1', but in your HTML code, jumbotron seems to be a class. To style a class in an external CSS file, you need to use a dot (.) before the class name. Your CSS should be structured like this:

.jumbotron h1 {
  color: #513271;
}

I hope this explanation clarifies the issue.

Answer 4

I trust that my response will be beneficial to you:

Here is your initial code:

<html>
  <head>
    <title>Lizzy McGuire, an Evolution</title>
  </head>

  <div class="container">
    <div class="jumbotron">
      <body>
        <h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
      </body>
    </div>
  </div>
</html>

It is not permissible to have a div element outside of the body tag.

You must add the link to the CSS file in the head tag. Revise your code as follows:

<html>
  <head>
    <title>Lizzy McGuire, an Evolution</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>Hey now, hey now.</h1>
      </div>
    </div>
  </body>
  </html>

Upon examination, it appears that in your CSS file you defined a 'jumbotron h1', but in your HTML code, jumbotron seems to be a class. To style a class in an external CSS file, you need to use a dot (.) before the class name. Your CSS should be structured like this:

.jumbotron h1 {
  color: #513271;
}

I hope this explanation clarifies the issue.

Answer 5

Answer №3

Your tag is not properly placed nor your external css tag is missing.

and

the class is not used for styling (except if you used bootstrap).

Here is the correct one:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Lizzy McGuire, an Evolution</title>
    <link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>

<body>
  <div class="container">
    <div class="jumbotron">
      <h1>Hey now, hey now</h1>
    </div>
  </div>
</body>

</html>

CSS:

  jumbotron h1 {
    color: #513271;
    text-align: center;
}

I suggest practicing with external css files instead of inline/internal for a better coding style.

Answer 6

Your tag is not properly placed nor your external css tag is missing.

and

the class is not used for styling (except if you used bootstrap).

Here is the correct one:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Lizzy McGuire, an Evolution</title>
    <link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>

<body>
  <div class="container">
    <div class="jumbotron">
      <h1>Hey now, hey now</h1>
    </div>
  </div>
</body>

</html>

CSS:

  jumbotron h1 {
    color: #513271;
    text-align: center;
}

I suggest practicing with external css files instead of inline/internal for a better coding style.

Answer 7

Answer №4

Encountered a similar issue where my CSS styling wasn't showing up in my HTML document. After some investigation, I discovered that my supposed .css file was actually saved as a .css.txt file, named "mystyle.css.txt".

To fix this issue, I navigated to any directory containing the HTML and CSS files, clicked on view at the top, then selected options. From there, I went to the view tab and unchecked the option "Hide extensions for known file types". This allowed me to remove the .txt extension from the CSS file, turning it into a proper .css file, which then displayed correctly in my HTML document.

Answer 8

Encountered a similar issue where my CSS styling wasn't showing up in my HTML document. After some investigation, I discovered that my supposed .css file was actually saved as a .css.txt file, named "mystyle.css.txt".

To fix this issue, I navigated to any directory containing the HTML and CSS files, clicked on view at the top, then selected options. From there, I went to the view tab and unchecked the option "Hide extensions for known file types". This allowed me to remove the .txt extension from the CSS file, turning it into a proper .css file, which then displayed correctly in my HTML document.

It seems like there could be an issue with the CSS file not properly connecting to the HTML, or possibly the Jumbotron is not allowing the

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Buefy: Secure the header of the table in place while allowing the rows to scroll freely

How to center the navigation list vertically with double lines and maintain the href block?

Seeking an efficient localStorage method for easy table modification (HTML page provided)

Create a circular div that fills in when hovered over using CSS

Adjust jQuery UI's resize functionality to maintain the current total width

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

Blank space on the lower portion of my website as I attempt to implement a responsive layout

Semantic UI Footer allows you to easily create a stylish

unable to clear form fields after ajax submission issue persisting

perfecting the styling of a tab management system

Error in compiling: Incompatibility between oncommand and CommandArgument attributes within LinkButton

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

problem encountered when converting SVG HTML into SVG paths

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

In Angular, a white screen may suddenly appear if the scrolling speed is too fast

Printing from a Windows computer may sometimes result in a blank page

Guide to placing an image below a <div> using HTML?

Struggling to connect HTML elements with AngularJS and TinyMCE?

The sliding hamburger menu children fail to move in unison with the parent