(CSS & HTML) CSS doesn't load - html

I'm having some weird trouble with my css, It doesn't load!?
So I'm using google chrome to preview it on and it always had worked fine,
until I started to ad meta tags. This is the code that I'm using;
body {
margin: 0;
overflow: hidden;
}
mainContainer {
position: absolute;
width: 100%;
height: 600px;
background-color: black;
}
<DOCTYPE! html>
<html>
<head>
<title>Sander™ - Code & Design</title>
<link href="stylehome.css" type="text/css" rel="stylesheet">
<meta name="description" content="Welcome to my website - Sander™ - Code & Design">
<meta name="author" content="Sander™ - Code & Design">
<meta name="keywords" content="Minecraft Server, RPG, Nederlands, 24/7, Beste Minecraft Server, NL server">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="javaScript.js"></script>
</head>
<body>
<div id="mainContainer">
</div>
</body>
</html>
And I don't know why it's not previewing, I can't find any spell mistakes,
and overall I always had done it this way (only not the meta tags) and I always worked fine. So if somebody can spot something wrong please tell me.
Thanks in Advance!

mainContainer is a type selector that matches all <mainContainer> elements, which you don't have any of and aren't allowed in HTML anyway.
You need an ID selector, which starts with a # character.

Related

Relational Selectors in html and css

So, I'm currently learning #html & #css and I'm on the topic of relational selectors.
In the example, the code below is suppose to display a web page with orange text. The
text is still black even after trying several variations. Can someone help?
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">
<title>Document</title>
</head>
<body>
<section id="products">
<p>Lorem ipsum dolor sit.</p>
</section>
</body>
</html>
styles.css
body {
margin: 10px;
}
#products p {
color: orange;
}
It works just fine,but you have to link the css file using tag
<link rel="stylesheet" href="style.css">
You have to connect your CSS file to the HTML by linking to it in the <head>, like so:
<link rel="stylesheet" href="./style.css" />
(and if the CSS file is in a folder, it will be ./foldername/style.css)
There are three ways you can implement style to HTML documents:
External CSS
Internal CSS
Inline CSS
You could include your style code in the document (Internal CSS). To do so you would need to enclose it in style tags like this:
<style>
body {
margin: 10px;
}
#products p {
color: orange;
}
</style>
Hide that element in your , or at the end of your , and you should be fine. Generally, it's frowned upon to use Internal or Inline CSS, but you can do if you want to!

HTML/CSS: Background image is always relative to paragraph

I am creating a test website with Angular, just to learn some things. First I put everything into the index.html, and this is the look I came up with:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
I then copied this html code and entered it into the app.component.html. Back in the index.html, I changed
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
to
<body>
<app-root></app-root>
</body>
But then my Site started to look like this:
Where did I make the error? My app.component.css is empty, so there is nothing able to change the look of that background. I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill. When I put this into the app.component.css:
body {
position: absolute;
}
,then i get this:
I'm just a starter in html/css, but all the tutorials about background images changed nothing for me
Looks like you have two body tags, according to your answer ofc :)
One here (index.html) and second in app.component.html:
<body>
<app-root></app-root>
</body>
You can probably keep body into app.component.html, but you should remove it from index.html. And apply display: block; height: 100% for app-root, I suppose.

Having Trouble Linking my SASS to my HTML in Atom

I'm looking to start coding in Atom and I am having trouble getting things started. I can't seem to connect my style.scss to the index.html. This is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel"stylesheet" type="text/css" href="style.min.css">
<title>Document</title>
</head>
<body>
<h1>This is a square</h1>
<div class="square"></div>
</body>
</html>
and this is what I have in my style.scss which when complied makes style.min.css
//Variables
$lightblue: #b8fdfb;
//CSS
.square {
width: 100px;
height: 100px;
background-color: $lightblue;
}
This is all that shows up in my local server
You cannot attach SASS to HTML. You first need to compile it first to CSS & then link it to your HTML using <link> tag in the header. Like:
<link rel="stylesheet/css" type="text/css" href="style.min.css" />
You need a preprocessor to convert SASS into CSS. You can use many tools such as Webpack, Prepros, etc.
Have a look at this reference. Hope this helps!

iOS Web App not working properly

I'm trying to make an extremely basic web app for iOS. apple-mobile-web-app-capable does not allow my app to be run in standalone mode. I've followed Apple's own tutorial to set this up and have been surfing the web for a solution for too long at this point. I've tried clearing the cache and re-adding the app. I also tried removing the meta tag and altering it and then setting it back along with removing the bookmark, which was mentioned in another answer and it did nothing for me.
Anybody have a solution?
<DOCTYPE! html>
<html>
<head>
<title>Test App</title>
<meta name="apple-mobile-web-app-title" content="Test App">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
#testButton {
-webkit-appearance: none;
font-size: 500%;
font-weight: bold;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script>
function output(){
alert("window.navigator.standalone = " + window.navigator.standalone);
}
</script>
<button id="testButton" onclick="output()">Test</button>
</body>
</html>
I've encountered the same issue as you in the past. Apparently web apps don't work as expected since iOS 9 (i believe); however, I've found you can solve it with the tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
<meta name="apple-mobile-app-capable" content="yes">
It worked for me, hope it does as well for you ;)

The id and class attributes don't work

I'm trying to make a HTML-code but when I try to use 'div' with a class or id it won't do what's written in the class. Only when I write it between the tag (so the when I write width between the tag it works, but not if I wrote it in the class).
.header {
width: 100px;
height: 10px;
background: blue;
}
<!doctype html>
<html>
<head>
<link type="text/css" rel="OIM11 - CSS" href="OIM11 - CSS.css" />
<title></title>
</head>
<body style="background-color:#666666">
<div class="header"></div>
</body>
</html>
Any idea why this doesn't work?
When in doubt, open developer tools on literally any website and look at the way they include stylesheets. I don't know how you came up with that format. This is the proper way:
<link rel="stylesheet" type="text/css" href="path/to/main.css">
Also, avoid spaces when naming files. In your shoes, I would rename the current file to OIM11-CSS.css.