I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
Related
Using the official Twitter widget to embed a feed into a website: on iPad the whole page temporarily shifts to the right with a large grey border appearing on the left when scrolling the Twitter feed (tested in Safari and Chrome) on iPad version 11.4.1. it works fine on desktop. Any ideas?
Basic stripped back HTML code is:
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8"/>
<title></title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- can use for nivoslider alone -->
</head>
<body>
<div id="container">
<main>
<a class="twitter-timeline" data-width="450" data-height="600" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</main>
</div>
</body>
</html>
& CSS:
body {
margin: 0;
padding: 0;
color: #333233;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6em;
background: #eee; }
html, body {height: 100%;}
container { overflow:hidden; min-height: 100%; position: relative; }
OK, so it seems that latest Twitter widget for embedding into an HTML5 website is not backwards compatible with iPad V.11.4.1 (Safari or Chrome). The official Twitter link causes same issue on same iPad. So guess that's it - no solution!
I am trying to display an image on a mock webpage I'm building as a background image. When I try using the css background-image and url it will not load. I am trying to put the image as a background image on the header section under the header class, but it just won't load. Whne I hover over the path in brackets it brings up a thumbnail of the image, so I know it can access it.
I have tried everything - moving the file, renaming the file, checked my paths are correct, using and removing quote marks, backslashes, forward slashes, checking my css path is correct in my head section, checking the file extension. When I click on the file name in the console 'sources' section and select open in new window it brings the image up in a new window just fine, but Chrome or any other browser won't seem to load the file for some reason?!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
The file loads and displays just fine if I put it into the HTML using an img tag, but won't display from css.
You just need to specify a height for your header - as it was just defaulting to 0 pixels high :-)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(https://picsum.photos/200/300);
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
I am trying to learn Bootstrap and wanted to make an exercise by building this site on my own:
https://konect.co.za/
I am seriously having trouble with overriding to Bootstrap and also adding my custom font. To add my custom Google font, I've tried this, but did not work;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
and in css
html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}
Here's the img that I cannot style;
<section class="container">
<img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
</section>
And the styling;
section img .profile-pic{
margin-left:150px;
}
Try to add in Body
body {
font-family: 'Roboto', sans-serif !important;
}
The html styles will apply to all document but it has very low precedence. it will work only until and unless their is not specified styles inside body. but in your case bootstrap added their own styles in body tag.
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Thats why your style was not working
You need to put "!important" with your custom CSS style to override any bootstrap styles. Also, CSS will always use the most specific style to style an element so if you put your styles in html{} it will be overridden by p{} h1{} etc. Remember that style sheets are cascading so any styles at the top will be overwritten by styling the same element below.
You need to put "!important" with your custom css style to override bootstrap css.
One more thing if you are using external custom css file than import after bootstrap css file.
See, below example for more.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>
html{
font-family:"Roboto", "Arial" !important;
font-size:20px !important;
font-weight:300; !important;
}
.h1-override{
font-size:12px !important;
}
</style>
<body>
<div> testing bootstrap overriding </div>
<h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>
<h1 class="text-center text-uppercase">without custom style</h1>
</body>
</html>
I'm new at this so I'm sure I'm just missing something. I can't get the background image to show up. I tried all different paths and also tried just copying the image address of a web background to see if that would work.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>REDACTED</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Open+Sans' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="logo">
<h1>REDACTED</h1>
<p>Aspiring Web Developer</p>
</div>
<nav>
<ul>
<li class="selected">About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<img src="img/julie.png">
<h2>About Me</h2>
<p>REDACTED</p>
</main>
</body>
</html>
And here's the body CSS:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../img/geometry.png');
}
In your hierarchy, you are trying to go back one directory and then go to img/geometry.png, this is the issue, because when you link the css file in your html, you don't need to use '../', you can access directly img folder!
Try this:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('img/geometry.png');
}
And don't forget to put geometry.png inside the img folder!
As a #MarcosPerezGude noted, make sure your paths match your directory structure (or possibly visa versa in this case). With what you have provided this is what your directory structure and files should look like:
/index.html
/css
/style.css
/normalize.css
/img
/geometry.png
And as others have pointed out, the following:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../img/geometry.png');
}
needs to be in in style.css or normalize.css with the directory structure given above.
Below i mentioned the html and css. but when i open it in browser,css property of background color and other properties not showing anything expect image.
HTML code
<html>
<head>
<title>Home Page One </title>
<meta http-equiv="Content-Type" content="type/html" charset="utf-8" />
<link href="home1.css" type="text/css" />
</head>
<body>
<header class="headerpart">
<img src="images.jpg"/>
</header>
</body>
</html>
CSS Property
body
{
background:#CCCCCC;
color:#000000;
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-style:normal;
margin:0px auto;
}
.headerPart
{
background:#00CCFF;
margin:0px auto;
width:1120px;
height:30px;
}
when i run this html in browser, it shows only the image expect the css propety of background and everthing. when i inspect the html, browser showing the css property not found..
am looking solution for this problem..
CSS Classes are case sensitive. You have class="headerpart" in your html but your CSS says .headerPart with a capitol P. Change one or the other, and you should see the behaviour you want.
Add rel="stylesheet" to your link tag, like following:
<link rel="stylesheet" href="home1.css" type="text/css" />