I'm a beginner and I'm creating my first website, but I've stumbled with one page that will not recognize the CSS it's linked to.
I've linked each html page of the website to its own CSS style sheet and they all work, except for one. All the files are in the same root folder and if I check the 'Page Source' when opening my problematic page in a browser (FireFox) there are no errors showing up, so I'm really lost.
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>About X</title>
<LINK rel="stylesheet" type="text/css" href="about.css">
</head>
<body>
<header>
<img src="images\logo.jpg" width="100" height="80" alt="logo">
<h1>Mister X</h1>
<nav>
<a href=///C:/Users/Soniaa/Desktop/web%20design/webpage.html>Pictures</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/News.html>News</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/About.html>About</a>
Shop
</nav>email#gmail.com</address>
</header>
<figure><img src="images/pic.jpg" width="300" height="300" alt="Portrait">
<figcaption>Short Bio... </figcaption>
</figure>
<h2>Education</h2>
<ul>
<li>this</li>
<li>that</li>
</ul>
<h2>Personal Exhibitions</h2>
<dl>
<dt>2010</dt>
<dd>...</dd>
<dt>2006</dt>
<dd>...<dd>
<dd>...</dd>
<h2>Group Exhibitions</h2>
<dl>
<dt>2008</dt>
<dd>...</dd>
<dd>...</dd>
<footer>© Mister x <br>
<IMG SRC="images/fb.png" width="30" height="30" ALT="Facebook">
<br>
Webdesign by me </footer>
</body>
</html>
The actual page has a lot of definition lists in it (no idea if that would have anything to do with it).
The same CSS works with my "Home" page, for example, which has the same header.
Maybe I'm missing something very obvious, but any help would appreciated!
EDIT: Thank you to everyone who took the time to answer!
Unfortunately I didn't find the problem but I think maybe I didn't give enough details so I'll rephrase and repost the question (I didn't want to delete this because someone else might find a helpful answer for themselves).
Hope that's okay...
Is your CSS in the same directory as your HTML file? If it's not you probably should do something like
<link rel="stylesheet" type="text/css" href="css/about.css">
Also make sure you did not make any typo's. If what you are describing is really true it should work.
Your markup is fine there seems to be no problem with it.The files are working perfectly on my computer.Try erasing the history of your browser and then reload it, or change the browser and see if it works.
Related
body {
background-color: red;
font-family: arial;
}
h1 {
text-align: center;
}
.thumbail {
height: 600px;
width: auto;
}
<!doctype html>
<html>
<head>
<title>Services - Salazar's Stickers</title>
<link rel='stylesheet' type='text/css' href='./style.css'>
</head>
<body>
<header>
<h1>Salazar's Stickers</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<h2>Personalized Name Stickers</h2>
<p>
These stickers can be customized with your name or initials, making it easy to add a personal touch to your belongings.
</p> <br>
<img src="./nameStickers.png" class='thumbnail' alt="Personalized Name Stickers">
<h2>Decorative Sticker Packs</h2>
<p>
Our decorative sticker packs include a variety of designs, perfect for adding a touch of creativity to your notebook, phone case, or any other item.
</p> <br>
<img src="./decStickers.jpg" class='thumbnail' alt="Decorative Stickers">
<h2>Vinyl Wall Decals</h2>
<p>
Our vinyl wall decals are a great way to decorate your living space. They are easy to apply, remove, and won't damage your walls, making it the perfect solution for apartment dwellers or those who prefer not to make permanent changes to their walls.
</p>
<img src="./vinylWallDecal.jpg" class='thumbnail' alt="Vinyl Wall Decals">
<div class='content'> </div>
<footer>© Salazar's Stickers 2023 </footer>
</body>
</html>
It was working initially, but now, any changes that I implement do not seem to work?
I can't change the color or the text-alignment.
The thumbnail class doesn't seem to be working either.
I'm new to CSS and HTML, so I'm probably sure that this is some simple mistake, but I searched the web and nothing seems to be working.
Not sure if this helps, but your css has .thumbail, and your html classes have thumbnail. You are missing the letter n.
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
here is the code I used for index.html
<!DOCTYPE html>
<html>
<head>
<title>Github Hub </title>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
<div><img src="C:\Users\Maryam\Pictures\Saved Pictures\github.logo.jpg" width="205" height="150" /></div>
<div>This is <i>site for Github</i> to search for interesting peojrcts.</div>
<nav>
<ul>
<li> Home </li>
<li> Contact </li>
<li> About </li>
</ul>
</nav>
</header>
<section id="main">
<p>We will show you a list of <b> Github projects</b><span> and the dates</span>, (click here for more information Gethub).</p>
<form action="http://wilder.azurewebsites.net/echo" method="post">
<label for="SearchPhrase">Search Phrase:</label>
<input name="SearchPhrase" id="Searchphrase" /> <br />
<input type="checkbox" name="UseStars" /> <label for="UseStars"> Use Stars?</label> <br />
<label for="LangChoice">Languages:</label><br />
<select name="langChoice" id="langChoice">
<option selected>All</option>
<option>JavaScript</option>
<option>Java</option>
<option>C#</option>
<option>Ruby</option>
</select>
<br />
<input type="submit" value="search" />
</form>
</section>
<footer>
© 2020 Mariam Shabou LLC
</footer>
here is the code I used for site.css
i linked HTML with CSS but the problem once i run the work doesn't appear in the web
/*site.css*/
header, footer {
background: lightgrey;
border: solid 1px black;
/**font-family: 'Times New Roman', sans-serif,**/
}
footer{
padding: 10px;
border-radius: 3px;
}
body{
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#main{
border: solid 1px #ccc;
border-radius: 5px;
margin: 20px 0;
padding: 5px;
}
#main > form > label
{
font-weight: bold;
}
here is what i got when i run the code of index.html and the problem is the code that i wrote in site.css is not linked to index.hmtl means the modyified in site.css doesnt exists.
Double check your relative path. On everything else, you're leading with a slash, which makes me think you probably need one before your CSS path, but without looking at your filesystem it's impossible to tell.
Judging by your screenshots this appears it might be a classic File Path error. It looks like your index.html is located in localhost/img/index.html
Where does your CSS live?
If it lives in localhost/img/css/style.css your code should work fine.
If it lives in localhost/css/style.css then you need to change the location of your CSS to the following;
<link rel="stylesheet" type="text/css" href="../css/site.css">
the ../ tells the href to go back a directory, then go in to CSS. Without the ../ you are telling it to look in the current directory, which by your screenshot it would be; localhost/img/css/style.css.
When using File Paths that way; you have to be mindful that it is RELATIVE to where the current document exists.
Take a read of these articles relating to File Paths;
https://www.w3schools.com/html/html_filepaths.asp
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
https://css-tricks.com/quick-reminder-about-file-paths/
It would be better if you share the folder structure of your current project.
However, there are few common mistakes seems obvious in your code such as loading something from absolute file directory (C:\) which makes me believe you are using static files only and is not recommended at all.
If these front-end code is part of a bigger project such as using c#, php etc., you could easily use base_url concept and load the files via the publicly accessible absolute url such as http://localhost/yourproject/site.css or http://yourdomain.com/css/site.css.
In any cases, like many of us trying to point to you that, it is about the relative path of the CSS file you have. That should fix your problem now and will guaranteed to work even if you move the server.
body { background-color: bisque;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
I have tried many styles to see what's wrong, but I can't seem to change the background color. This webpage works, but it's just plain. I am required to use CSS in order to compare both styles.
I copy and paste you're code and its working fine
i guess the problem is that you didn't refresh the page
try to do hard reload
CTRL+ F5 or in mac command+R
It actually does. I edited your question so it should be a snippet, and it worked in your source too. The only change I made was to change the p tag into div tag since p tag is meant for a paragraph, and what you wanted is a block.
Look how I changed the background color to blue:
body {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
Maybe the page is not refreshing right
PRESS Ctrl + F5
I'm trying to run this simple code, but it appears that some declarations in css are not taking effect (mainly centering of text and images being placed side by side w/o bullets).
When I ran the code using StackOverflow's code snippet tool, the styles seem to apply. But when I run the code in Chrome, IE, and Firefox, the styles to the <ul> and text don't seem to be working.
#smedia-container {
position:relative;
max-width: 302px;
max-height: 110px;
text-align: center;
}
.smedia-header {
background-color: #b90021;
color: #fff;
min-height: 32px;
}
.smedia-icons li {
float: left;
display: inline;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>social media bar</title>
<link rel="stylesheet" type="text/css" href="smedia-bar.css">
</head>
<body>
<div id="smedia-container">
<div class="smedia-header">
Social Media
</div>
<p> Follow Us </p>
<ul class="smedia-icons">
<li><img src="instragram.png" alt=" "> </li>
<li><img src="facebook.png" alt=" "></li>
<li><img src="twitter.png" alt=" "></li>
<li><img src="flicker.png" alt=" "></li>
<li><img src="youtube.png" alt=" "></li>
<li><img src="tumbler.png" alt=" "></li>
</ul>
</div>
</body>
</html>
I validated both the html and css using online validators and both came back valid.
Waiting a while after clearing my cache, updating my text editor (sublime3) restarting my computer, deleting all styles associated with the ul.smedia-icons li elements, saving the doc and reinserting the style in the code, it seems to work fine now. Even the text-centering style seems to work now. It even works across multiple browsers so I think it might have been a bug in either my text editor or computer system. Just glad to know my syntax and logic was correct. Thanks for all who helped me through this!
If it is working in the snippet and not on your desktop the issue is most likely your link reference to the CSS file. With the code you've shown us the css file must be in the same directory as your html file. They cannot be in separate folders.
As a side note, you will want to update all your external links to also include "http://" in front of them. Otherwise none of the links will actually work.
e.g. <a href="www.instragram.com"> should actually be
<a href="http://www.instragram.com">
I don't know, but I assume that text-decoration: underline not work, try adding
.smedia-icons li a {
text-decoration: none;
}