I looked at other people who asked this and nothing seemed to work. My HTML page can't find my CSS page although they are in the same folder. I am working in Dreamweaver but writing the code myself.
Here is my HTML code:
<!doctype html>
<html>
<meta charset="UTF-8">
<title>home</title>
<head>
<style type="text/css">
<link rel="stylesheet"
<href="style.css"
type="text/css" />
</head>
<body>
<div class="background"></div>
</body>
</html>
Here is my CSS:
#charset "UTF-8";
/* CSS Document */
.background {
background-color: rgba(0,0,0,0.98);
background-image: url(images/me_atsunsetbackground.JPG);
background-repeat: repeat-y;
margin-left: 50px;
margin-top: 200px;
margin-right: 50px;
margin-bottom: 200px;
}
do it like this :
<html>
<meta charset="UTF-8">
<title>home</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="background"></div>
</body>
</html>
<head>
<link type="text/css" rel="stylesheet" href="any_style_you_want.css">
</head>
Related
Here is my information
.error{
color:rgb(20, 213, 220);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Basics</title>
</head>
<body>
<div>
<p class="error">abcdefghijklmnopqrstuvwxyz</p>
<p>12345678901234567890123456</p>
<p>doremifasolatidodotilasofa</p>
</div>
</body>
</html>
Add css in style tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Basics</title>
</head>
<body>
<div>
<p class="error">abcdefghijklmnopqrstuvwxyz</p>
<p>12345678901234567890123456</p>
<p>doremifasolatidodotilasofa</p>
</div>
</body>
</html>
<style>
.error{
color:rgb(20, 213, 220);
}
</style>
Oh my bad! I fixed it---I had just forgotten to put the styles.css file in the same folder as my .html file, haha '^_^ my bad
I working with images at this moment, in my html document. A don't want, that adjust image width for each img element, so I made separated class (for e. thumbnail) for img tag in my style.css, but that doesn't works. Then I'd created style in my head tag, and placed the thumbnail class in there. That works, but now my style.css doesn't works at all. What I should do?
EDIT:
Working example:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#">
<img src="plug.png" class="thumbnail">
</a>
</div>
</div>
</div>
</body>
</html>
style.css:
body{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.thumbnail{
width: 30px;
height: auto;
}
link should have a href instead of src
<link rel="stylesheet" type="text/css" href="style.css">
It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id=="container header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
And the CSS is:
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(../images/header_background.jpg);
background-position: center;
background-size: cover;
}
I have added all of the background-properties in the css and the div has a size.
My file structure is like this:
I see several things that can cause the issue:
There is double equal here: <div id=="container header_div">. Should
be single. In addition, I see two words in the id separated by
space. ID's cannot be chained like classes, and this is not a valid
syntax. Since you style #header_div, the id attribute on the div
should be id = "header_div".
The relative path to the image starts with two dots. As a result, you step out of the current directory. Since your images folder is in
the same directory as the page.html, the filepath should be:
url(/images/header_background.jpg);
To see the image you would need to declare the height in the #header_div element as well.
By doing this, I was able to see a background image in my test. I hope this helps.
Not exist <div id="container header_div"> in you css, change to <div id="header_div">
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id="header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I had a similar issue like this before. This is what I did. I set the div background to just this background: url("./images/header_background.jpg");
HTML:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Hello World!</h1>
<h2>A few facts about the world we live in</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" />
</body>
</html>
CSS:
img {
width: 300;
}
h1 {
font-family: Georgia;
background-color: red;
}
I have saved my html and css in the same folder. My css file is named as stylesheet.css.
I am able to edit but not through my css file which means my css file and html are linked but I somehow can't seem to edit images. Somebody help me!
the issue is your units. 300 of what? You need to add a % or px or em.
img{
width:300px;
}
Fiddle with 300px
https://jsfiddle.net/jL7Lqfv8/
Are you sure your CSS is being pulled in? Check your network tab in your browser to ensure it is. Also, try giving some units to the image width:
img {
width: 300px;
}
I just wanted to know how to refer the stylesheet which is under css folder in assets/www path. Here is my HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>EazyTutor</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/stylesheet">
</head>
<body>
<div id="top_header">Home Page</div>
</body>
</html>
Here is my CSS Code:
#charset 'UTF-8';
#main_wrapper
{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#top_header
{
height:5%;
background-color:#CCC;
}
Please help guys...
Problem is the line
<link rel="stylesheet" href="css/style.css" type="text/stylesheet">
It should be
<link rel="stylesheet" href="css/style.css" type="text/css">
see Difference between type="text/css" and type="text/stylesheet"?