Incorporating CSS Styles into an HTML Page

I'm encountering an issue where the CSS layout doesn't load when I try to view the document. Here's the content:

<!DOCTYPE html>
<html>
   <head>
   <body>
      <title>Waden B. Greaux Jr.</title>
      <link href="Style/Waden_Greaux Website.css" type="text/css"
         rel="stylesheet" />
      </head>
      <div id="header">
         <p>Hi! Welcome to the official site of Waden Greaux!</p>
         <hr />
         <p>
         <ul>
         <li><a href="Biography.html">Biography</a></li>
         <li><a href="Tips_and_Wisdom.html">Tips and Wisdom</a></li>
         <li><a href="Contact.html">Contact Me</a></li>
         <ul>
      </div>
      <!-- end of header -->
   </body>
   </p>
   <h1>Overview</h1>
   <p>Waden Greaux, age 16, is a high school student dedicated to making a positive impact on the world. He possesses skills in graphic design, professional writing and journalism, programming in multiple languages, and is a devoted scholar in various subjects like philosophy, mathematics, logic, and sciences. Additionally, he has a keen interest in computers, as well as investments in precious metals and stocks.</p>
</html>

Check out the CSS stylesheet below:

body {
    background-color: #fbbdf6;
}
title {
    font-family: Verdana, sans-serif;
    font-size: 60px;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    line-height: 1.6em;
    text-align: center;
}
h1 {
    font-family: Georgia, serif;
    font-size: 12px;
    text-align: justify line-height: 1.6em;
}
p {
    font-family: Arial, sans-serif font-size: 24px text-align: justify line-height: 1.5em;
}

Answer №1

It seems like there might be a mix-up with the 'head' and 'body' elements in your code. Remember, meta data belongs in the head section, while all content should go in the body!

<!DOCTYPE html>
<html>
  <head>
    <title>Waden B. Greaux Jr.</title>
    <link href="Style/Waden_Greaux Website.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <div id="header">
      <p>Hi! Welcome to the official site of Waden Greaux!</p>
      <hr />
      <p>
      <ul>
      <li><a href="Biography.html">Biography</a></li>
      <li><a href="Tips_and_Wisdom.html">Tips and Wisdom</a></li>
      <li><a href="Contact.html">Contact Me</a></li>
      <ul>
    </div>
    <!-- end of header -->
    </p>
    <h1>Overview</h1>
    <p>Waden Greaux, age 16, is a high school student dedicated to making positive change. He excels as a graphic designer, writer, journalist, programmer, philosopher, mathematician, logician, scientist, computer enthusiast, and investor in stocks and precious metals.</p>
  </body>
</html>

For more information on the head element, visit here. For details on the body element, click here.

Thank you for reaching out; it appears that I am still unable to access the CSS file.

 <!DOCTYPE html>
        <html>
        <head>
        <body>
        <title>Waden B. Greaux Jr.</title>
        <link href="Style/Waden_Greaux Website.css" type="text/css"
           rel="stylesheet" />
           </head>
                    <div id="header">
                <p>Hi! Welcome to the official site of Waden Greaux!</p><hr />
        <p>
            <ul>
                <li><a href="Biography.html">Biography</a></li>
                <li><a href="Tips_and_Wisdom.html">Tips and Wisdom</a></li>
                <li><a href="Contact.html">Contact Me</a></li>
            <ul>
        </div><!-- end of header -->
        </body>
        </p>
        <h1>Overview</h1>
        <p>Waden Greaux, age 16, is a high school student dedicated to changing the world for the better. He is a graphic designer, professional writer and journalist, programmer in 4 languages, and a full-time scholar in philosophy, mathematics, logic, and the sciences, in addition to being a computer enthusiast and investor in precious metals and stocks.</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to use Python Selenium to locate the parent element

Here is a snippet of my HTML code: <li> <div class="level1"> <div id="li_hw2" class="toggle open" </div> <ul style="" mw="220"> <li> <div class ="l ...

Tips for executing a jQuery function on multiple sets of elements

Currently, I have a list with all items sharing the same class name. There is a jQuery plugin that identifies the tallest element and sets the height of all list items to match the tallest one. My goal is to run this method for each UL group individually. ...

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

Using jQuery to Generate an Automatically Updating Timer for Slideshow - Pausing on Mouse Click

My first slideshow with jQuery is up and running, but it's very basic and hard coded. I want to add an automatic scrolling effect every 8 seconds to the next item before looping back to the beginning. I have an idea on how to achieve this, but I want ...

Why is my CSS media query failing to increase font size?

I can't seem to get the "media query" function to work properly. I've tried multiple times and searched for a solution without any luck. Below is the code snippet where I'm attempting to increase the font size from 44px to 70px on small devi ...

Can you apply transparency to a hex color variable in SCSS and then use that variable again?

In my app, I have a set of scss variables that represent colors used throughout the interface. For example: $primary-color: #00755E There are also colors that are variations of this primary color with different opacities. For instance, $primary-color with ...

Converting Ajax to JSON with Jquery offline and Manifest for enhanced offline web applications

Looking to create an offline web application, I'm in the process of transitioning from Ajax to JSON using JQuery offline. Here is the initial Ajax code: $.ajax({ url: contentpage, data: contentpagedata, cache: false }).done(function( html ) { ...

Enhancing TextFields with React Material Margins

I am facing a simple issue where I attempted to add marginButtom to the TextFields but for some reason, it is not applying any margin. Please take a look at this codesandbox link CLICK HERE CODE <label>Schedule</label> <Te ...

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

I want to create a unique effect with an image in the background and a button above it. When the mouse hovers over the button, I want its opacity to decrease while the image's opacity increases simultaneously. I have experience applying fade effects ...

How can I prevent a repetitive div from appearing in a JQuery show/hide function?

Whenever I trigger my AJAX function, the loading image keeps repeating every time I click on the next page. I want to prevent this repetitive loading image and only display it once when I go to the next page. To address this issue, I created a <div cla ...

Guide on connecting MySQL 'id' to an HTML element

I need assistance with setting up a functionality on my website. I have a database containing rows of data, and each row has an 'ID' field in MySQL. I want to connect each ID to a button so that when the button is clicked, a PHP script will run t ...

Issue with parsley customized error message functionality not functioning as expected

I'm currently dealing with an issue related to the input field below: <input id="name" name="real_name" type="text" placeholder="ie. Your full name or company name" class="form-control input-lg parsley-validated" data-required="true" parsley-er ...

React Native Bug: Border Radius Issue at the Bottom

I'm struggling with adding a border on the bottom and left sides. Even though I've specified the properties, the border is covering the circle instead of surrounding it. <View style={{ borderBottomColor:'red', borderBotto ...

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

Various web browsers (display: -webkit-inline-box;)

Recently, I encountered an issue with my CSS code: .tudo ul { width: 100%; margin: 0px; display: -webkit-inline-box; } Surprisingly, Mozilla Firefox does not recognize the following line: display: -webkit-inline-box; Is it possible to set d ...

Using the ampersand symbol in an email address hyperlink

I am currently dealing with an email address that contains an ampersand, and the user wants a 'contact us' link to open a new message with their address populated. I typically use href for this purpose, but due to the presence of the ampersand, i ...

A guide on accessing a WebElement through a Hover Menu using Selenium with JAVA

Greetings, I am a beginner user of selenium and I have been experimenting with executing tests on a web page. Below is the code I am using: System.setProperty("webdriver.gecko.driver","C:\\DRIVERS\\geckodriver.exe"); WebDriver dr ...

programming selenium to interact with a specific element on a webpage

I need to automate the process of opening a specific page and clicking on the performance button using Python. from selenium import webdriver import time browser = webdriver.Chrome('../Downloads/chromedriver.exe') browser.get('https://www. ...

Is there a way to use JavaScript to convert HTML code into plain text?

I am looking to convert an input from an API in the following format: <p>Communication that doesn&#8217;t take a chance doesn&#8217;t stand a chance.</p> into something like this "Communication that doesn’t take a chance do ...

Modify the color of the chosen value on the sidebar using Angular 6

I am looking to update the color of the selected value in the sidebar. Sample <div class="card c-setting"> <div class="card-header" title="Data Uploader"(click)="clickDataloader()"> <a class="card-link" data-toggle="collapse" href="# ...