Hey there, I'm curious about a couple of things related to CSS

Seeking assistance as a newcomer to website creation. I am struggling with linking all my HTML pages to a single CSS sheet. The desired border effect can be seen in the image here: https://i.sstatic.net/Ojwuh.jpg

The code snippet shows attempts to achieve this:

body{
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}
   
.text {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode:multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
}
    
ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
}
 
li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 10px;
  padding-top: 30px;
  margin-left: 155px;
}
 
li a:hover {
  color: #740001;
}

 .aboutme {
    background-color: aqua;
    margin-left: 50px;
}



#major{
    
    background-color: black;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="major">
    
<h1>About me</h1>
    
    </body>


</html>
htmlcssweb

Answer №1

The formatting of your CSS body tag is correct, although the additional two tags are unnecessary. You have defined an "id" named major, which you then included (as a class) in the body tag of your website. These redundancies only duplicate the styles already specified in the CSS body tag.

Retain this portion of your CSS:

body{
  background-color: black;
  margin-top: 45px; }

You should remove this section from your CSS: 

#major{
background-color: black; }

In your HTML code, change from <body class="major"> to <body>

The link to your CSS document seems to be correct. If it's not functioning properly, open the document in your browser and double-check that it's referenced accurately within the tag. 

<link href="css/main.css" rel="stylesheet" type="text/css">

If you're using href="css/main.css", it indicates that the file may not be in the same directory as your HTML document. When using relative paths, consider the path necessary to reach the linked document. This question provides a good explanation on Relative path in HTML

Answer №2

If you're experiencing slow page loading, it might be a good idea to clear your browser cache. On a PC, simply press ctrl+shift+del in browsers like Chrome or Firefox, choose 'cached images and files,' then click 'clear data.' Don't forget to refresh the page afterwards!

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

Enlarge the image to fill the entire screen

Currently, I am working on a webpage where I am displaying data fetched from a database using Laravel framework. The code snippet is shown below: Here is how the webpage looks like - image1 What I aim to achieve is to make the div go fullscreen upon clic ...

phphtmlcsslaravel

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

javascripthtmlcanvas

Overlaying images with non-rectangular shapes

I am struggling to achieve a specific design for my bootstrap card. The card is filled with an image and I have placed text on top of it, which is made visible by using a transparent overlay. I would like the overlay to be slanted, similar to the effect se ...

htmlcsstwitter-bootstrapbootstrap-4

SwipeJS is not compatible with a JQuery-Mobile web application

I am currently attempting to integrate SwipeJS (www.swipejs.com) into my JQuery-Mobile website. <script src="bin/js/swipe.js"></script> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; ...

javascriptjqueryhtmlcssjquery-mobile

Is it possible to combine ng-switch and ng-if directives in Angular?

I attempted to combine the angular ng-switch and ng-if directives, but it doesn't seem to be functioning properly. Here is what I tried: <div data-ng-if = "x === 'someValue'" data-ng-switch on = "booleanValue"> <div data-ng-swit ...

javascripthtmleclipseangularjsangularjs-directive

Creating dynamic scrolling effects using windows.scrollBy in JavaScript

Currently, I am using window.scrollBy in the following way: <script> function scrollWindowup() { window.scrollBy(0,700) } function scrollWindowdown() { window.scrollBy(0,-700) } </script> I am wondering if there is a way to animate th ...

javascriptjqueryhtmljquery-animate

Is it possible to create a webpage where the header and footer remain static, while the content in the body can be dynamically changed

I am in the process of creating a webpage where main.html will load a page with a static header and footer that remains unchanged when navigation links are clicked. I'd like to achieve this using Javascript, with the body content being sourced from an ...

javascripthtmlcss

Using h1 tags in the code causes unnecessary blank space to appear above the

I'm having trouble with a basic issue and can't seem to figure it out. I have created a <div> for my header, inside of which there is another <div> containing an image (logo) and a title (<h1>). The problem arises when there is ...

csshtml

The exact location of the mouse is currently unknown

When I try to double click on a td, it should change the value of an input field to display the coordinates of the mouse cursor. However, instead of showing the coordinates, it just displays unidentified. How can I modify this script to fix this issue? Her ...

javascriptphphtml

Issue with jQuery .css() function malfunction in Internet Explorer

While trying to enhance my website, I experimented with the Add class method $("select[name='" + ABC+ i + "']").addClass('addBorder'); To my disappointment, it worked smoothly in Chrome, FF, and Safari but failed in IE. So I decided ...

jqueryhtmlcss

When I click the button, I would like the value of the button to be displayed in a textbox

I'm currently working on an interactive virtual keyboard project and need help with a function that will display the pressed button values in a text box located next to the keyboard. Here is the code snippet I've come up with so far: <script ...

javascriptjqueryhtmlkeyboarddhtml

How can the hreflang tag be used correctly in a React application that supports multiple languages?

I have a React application with 3 pages(routes) and I support 2 languages (English and Spanish). Should I insert the following code into the <head></head> section of the public\index.html file like this? <link rel="alternate" ...

javascripthtmlreactjsseohreflang

JavaScript code to verify if a checkbox is selected

Having some trouble making a text box value change based on checkbox status. I've attached a function to the onclick event of the checkbox, but it's not quite working as expected. <div> MyCheckbox <input type="checkbox" id="Check1" name ...

javascripthtmlcheckbox

Firefox's handling of collapsing margins

Summary: Visit this codepen for an example that works smoothly on Chrome, but shows misalignment in Firefox. I have been working on a custom jQuery plugin that enhances a text input by adding a dropdown button on the left side. To ensure proper positionin ...

htmlcss

Tips for creating dynamic row styles in a fluid table layout?

Could someone help me figure this out? I'm not familiar with JavaScript and need assistance as I've never created it, only edited existing scripts. I have a layout with two tables side-by-side. On mobile devices, the second table is pushed below ...

javascripthtmlcssresponsive-design

Achieving Proper Alignment of Dropdown Menu in CSS

Currently, I am tackling the challenge of creating a responsive navigation bar. Despite my numerous attempts to troubleshoot, I am struggling to find a solution. My current issues are as follows: 1) On wide screens, I aim to center the dropdown menu benea ...

htmlcssdropdownnavigationbar

Tips for adjusting the color of a pin without altering anything else

I have a Google Marker with a default design. By default, I can create the pin with letters inside it. However, I want to change the color of this pin. So, I attempted to use this icon: https://i.sstatic.net/gFXMR.png Unfortunately, the letters shifted ...

javascripthtmlcssgoogle-maps

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

Design a grid-like layout using flexbox styling

I am looking to design a form using a table-like structure similar to what we typically do with HTML. The image below shows the basic layout I am aiming for: https://i.sstatic.net/H6b3f.png. Can anyone provide guidance on how to code this type of structu ...

htmlapache-flex

Adapting designs within an Embedded Frame - JQuery

I am dealing with a dialog type popup that appears when a button is clicked by the user. Inside this popup, there is a form that needs to be submitted in order to change the width and height of the popup using the following code: $(document).ready(functio ...

javascriptjqueryhtmlcssiframe