So I originally created my webpage all in one php file, and all the css styling worked as intended. However, now that I've gone ahead to try to split up the code by putting all the css in its own file, my php page is does not include any of the styling from the css page. I'm sure i've made a simple error, but I can't seem to figure out what I've done wrong. The the link to my folder is Computer --> MWebsite --> Login --> login_template.php and css folder ( --> design.css ).
Here's the top of the php page...
login_template.php
<html>
<head>
<title>CarPals</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="design.css">
</head>
<body>
and here's the top of the css page just to show how I have it laid out...
design.css
h1 {text-align: center; color: #bdd0d9 }
a {color: #f75d59; text-decoration: underline; }
yy2 {color: #808080; font-family: "Comic Sans MS", cursive, sans-serif; font-size:12px;}
yy3 {color: #6D9BC6; font-size: 30px; font-family: "palatino linotype", Book Antiqua, Palatino, serif; font-weight:bold;}
body {width:100%; background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #4D4D4D))}
.dotted {margin:-7px; border: 1px dotted #808080; border-style: none none solid; color: #000; background-color: #F2F2F2; }
#outline {background:#696969; position: absolute; top: 0px; margin: -10px; width:1287; height:80px;}
#outline-text {position:absolute; top:-12px; left:200px; width:300px;}
#break {height:15px}
#break2 {height:10px}
#break3 {height:15px}
#frm {
background: #6e6e6e;
margin:auto;
top:320px; left:857px; width:243px; height:230px;
position:absolute;
font-family: "Comic Sans MS", cursive, sans-serif; font-size: 7px; font-style: italic;
line-height: 24px;
font-weight: bold;
color: #C0C0C0;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.7);
}
It looks to me that you are just missing the type attribute for the link tag. Try with type="text/css" and see how that goes.
Also, you may want to add the media attribute as well which will help define what type of media this CSS document is for. Here is some information regarding the media attribute
EDIT
Here how Stack Overflow's CSS is included (exact HTML at time of edit):
<link rel="stylesheet" type="text/css" href="http://cdn.sstatic.net/stackoverflow/all.css?v=0f0c93534e2b">
EDIT
Further checks that would be worthwhile include doing CSS Validation and if fixing any issues with that doesn't solve your problem, it may be actually accessing the CSS file.
Check that the page you visit in the browser is relative to your CSS document. If the page you are physically accessing in the URL (ie. http://youwebsitehere.com/youPage.php) is not relative to the CSS (as your CSS href is relative - "css/design.css") so you would want to be able to access your CSS via http://youwebsitehere.com/css/design.css
In the style for the body tag you're missing a closing parentheses at the end of the line, that might make the rest of the code invalid.
right after color-stop, the inner nested parentheses.
Related
I'm new to HTML and CSS. The following lines I wrote in the Atom text editor are not properly shown in the preview. The font is not changing from the default Times New Roman. Even after adding extra font-packages. However, I did not use any fancy kind of fonts. Is their something wrong with my code instead?
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Text</title>
</head>
<body>
<p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
<ul>
<li id="point1">This list item uses the Verdana font and color orange.</li>
<li id="point2">This list item uses the Impact font and the color red.</li>
<li id="point3">This list item uses the Georgia font and the color pink.</li>
<li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
<link href="http://www.spiced-academy.com"></link>
</ul>
<p>This is another paragraph. Each item in the list above has a top and bottom
margin of 10 pixels.</p>
</body>
</html>
I'm not sure that is the problem but try to add the attribute type on the link css stylesheet:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Well, in the code preview window I see it works (Chrome, Mac). Try to clear your browser cache or write font-family: Tahoma !Important;
Make sure that your CSS page is saved as stylesheet.css because this is what is referenced in your code.
Check that your HTML file and CSS file are saved in the same directory.
For testing, you could have the CSS in a <style> tag, before even trying to link to a stylesheet. You can place this in the <head> tag. Then tackle the external stylesheet once you can successfully see the styles here.
<head>
<style>
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
I was wondering if someone had an answer as to why the CSS for my HTML file only appears to be formatted in Google Chrome, but appears not formatted in Microsoft Edge, or Internet Explorer. First time post over here, so feedback would be much appreciated.
Here's my CSS and then my HTML:
html {
margin: 0;
padding: 0;
background-color: #777;
}
body {
width: 70%;
margin: 0 auto;
font: 100% Arial, Helvetica, sans-serif;
padding: 1em 50px;
background: white;
border-bottom: 10px solid gold;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: normal;
font-style: italic;
margin: 0 0 .4em;
color: #ddd;
background-color: rgb(44, 45, 140);
padding: 5px 10px;
}
p {
line-height: 1.6;
text-align: justify;
width: 60%;
margin: 0;
margin-bottom: 1em;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: black;
}
//And here's my HTMl
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>External styles</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML and CSS</h1>
<p>Page 2</p>
<p>One way to visualize how HTML and CSS work together is to think about a new building under construction. As the building goes up, the structure of the building is built first. At just the structural level, all you see is the frame of the new building, and other than the basic shape, you don’t really know how the building is going to look. Once the frame is complete, the “skin” of the building is added. This could be brick, wood, glass, stucco, or any number of outer materials that determine what the final look of the building will be.</p>
<p>HTML and CSS work much the same way. HTML gives us the structure, or “frame”, of our pages. We can use CSS to then control how this structure looks, where elements are positioned, and add additional decorative styling. What’s more, much the same way a building can change dramatically by adding a new façade; web pages can change their visual design by simply changing the page’s CSS.</p>
<p>This separation of structure and presentation creates a very flexible and efficient workflow where the structure of pages is independent of how the pages are presented. This allows you to update styling without changing page content, and provide different visual designs based on the context of where the page is being displayed.</p>
</body>
</html>
if your structure project
root
index.html
style.css
If you include style.css,
<link href="style.css"/>
But if your structure project
root
index.html
assets
style.css
You can include location style.css
<link href="assets/style.css"/>
I am doing this assignment for school and I need to side the background behind the slogans and little images so that it perfectly encloses the words. However, I can't get the width tag to work. Please help me find the source of this issue. Sorry for poor formatting. I am in a bit of a time crunch.
<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300}
h2 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h3 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h4 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h5 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h6 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
</style>
<body>
<center>
<h1><img src="Twins.gif">Twins
get wins!<img src="Twins.gif"></h1>
<!--Twins-->
<h2><img src="Wild.png">Crack a
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
<h3><img src="Vikings.png">Buy
things for the Vikings.<a href="http://www.vikings.com/"><img
src="Vikings.png"></a></h3><!--Vikings-->
<h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img
src="Wolves.jpg"></a></h4><!--Timberwolves-->
<h5><img src="UofM.png">Beat
the Gophers? No sir!<a href="http://www.gophersports.com/"><img
src="UofM.png"></a></h5><!--UofM-->
<h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>
All your settings for the width property (not tag) lack a unit, so those settings are ignored according to CSS specs. They work if you append e.g. the px unit (for CSS pixel) to them: width: 500px. Pixels are what you probably meant to use. It’s a completely different question how to set the background so that it “perfectly encloses the words”; you probably need a different approach, like using inline elements (which take just as much width as needed).
<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300px}
h2 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h3 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h4 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h5 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h6 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
</style>
<body>
<center>
<h1><img src="Twins.gif">Twins
get wins!<img src="Twins.gif"></h1>
<!--Twins-->
<h2><img src="Wild.png">Crack a
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
<h3><img src="Vikings.png">Buy
things for the Vikings.<a href="http://www.vikings.com/"><img
src="Vikings.png"></a></h3><!--Vikings-->
<h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img
src="Wolves.jpg"></a></h4><!--Timberwolves-->
<h5><img src="UofM.png">Beat
the Gophers? No sir!<a href="http://www.gophersports.com/"><img
src="UofM.png"></a></h5><!--UofM-->
<h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>
htmlcssimagewidth
Header tags, like h1 are block level elements, so the "try" to stretch over the width of parent or window.
You can change its display style to block to change this:
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300px;display:inline-block}
See the fiddle I"ve made here: https://jsfiddle.net/v3f13vtb/
You should put your CSS stylings in a different file and then link to it, I think the reason your styling isn't working inline is because of the fact that you aren't telling it what to do. 500(of what) 500px? 500%? Try writing it more semantically and see what happens.
Hello I am just getting started with HTML and CSS but having a weird issue.
If I use border:0; and padding:0; I still get a white space all the way around my div. I can fix the issue by doing margin:-8; but that doesn't seem right to me. I am using Dreamweaver if that matters. thanks!
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar">Home - Introduction - Stakeholders - Implementation Plan - Proposal - Training</div>
</body>
</html>
and the CSS:
#charset "utf-8";
#navbar {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
font-weight: bold;
text-decoration: none;
background-color: #CCC;
height: 25px;
text-align: center;
border: 1px solid #000;
margin: 0px;
}
I figured it out thanks!
Adding a body tag in my CSS and setting the margins to auto fixed this.
I have this CSS code:
html {
overflow-y: scroll;
}
body {
background-color: #e4e4e4;
font-size: 12px;
font-family: Verdana, 'Lucida Grande', Arial, Sans-Serif;
line-height: 1.6;
color: #555;
}
#wrapper {
width:950px;
position: relative;
margin: 20px auto;
background-color: #fff;
border: 1px solid #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
In Chrome it works perfectly, the wrapper is in the middle of any screen resolution and has curve border.
But very big trouble when it comes to IE9, the wrapper sticks to the left, the border doesn't show and other stuff.
See this post regarding rounded corners and IE 9 - IE9 border-radius
PS - Went to go troubleshoot this in IE9 on my VM and jsfiddle doesn't work in IE9 lol.
Think you need this
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
paste it between the <head></head> tags
Did you specify a correct doctype? This is just guesswork since you didn't share any HTML code.