<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="bg-green-400 h-screen">
test
</body>
</html>
Doesn't work. What can be the reason for this?
Any of the utility classes added to the body tag won't work
Your sample HTML doesn't include a stylesheet, so the bg-green-400 and h-screen classes aren't defined.
In production you should use a proper purged CSS file, but for testing you can load Tailwind from a CDN using this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Here's a fiddle of your HTML with this stylesheet included, and both of the classes you've used are working: https://jsfiddle.net/vrung30L/
Related
(I have extensively searched for a solution but nothing that has happened to someone seems to be the problem)
I am a beginner working on a very simple project. I uploaded it to github but github pages won't show the CSS. It works just fine when I run it locally.
It's supposed to look like this:
snapshot of the project
This is the repo: https://github.com/padnama/odin-recipes/
This is the pages link: https://padnama.github.io/odin-recipes/
Your wrongly refered your CSS in 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>receitas</title>
<link rel="stylesheet" href="./style.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
<img src="recipes/images/main.png" alt="the best cook">
<div class="writings">
<h1 id="title">receitas</h1>
<ul id="recipes">
<li>risotto</li>
<li>strogonoff de cogumelos</li>
<li>macarrão com amendoim apimentado</li>
</ul>
</div>
</div>
</body>
</html>
That should work better
Add the link of CSS file to your HTML page, see the attached picture below:
I don't really understand, as whenever I try to use one (example: https://codepen.io/plavookac/pen/QMwObb) whenever I try to apply it to my index.html (the global one), it goes on TOP of my content and makes everything else unclickable. Probably something simple I'm missing, right?
My main index:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
In my global styles file I just import bootstrap and put in the css that I linked above.
You should make main.component.html that manages routing and view order then you can tweak z-index on your css
<div class="background"></div>
<router-outlet></router-outlet>
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
so this is how I did it but for some reason, it won't make a difference in what I do but this stylesheet won't work.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
ALKALINE ENERGY
</title>
<link rel="stylesheet" type="text/css" href="screen.css">
</head>
You need to include a link to the external stylesheet in order for that stylesheet to be applied to anything!
<link rel="stylesheet" href="url_to_your_stylesheet.css">
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
I have written a website using HTML and CSS and, basically, I'm trying to get it to display now. The code is just a page of text and a few images. Currently when I go to the domain, the source code from start to finish is displayed instead of the actual content.
I just got cPanel hosting with godaddy (who naturally weren't of any help). I downloaded cyberduck. Uploaded the file containing the HTML text and called it index.html.
A CSS file was uploaded, and saved as index.css This might be the issue if something was incorrect.
On cyberduck it says there is a file called layout-style.css, perhaps I should edit that and add my CSS code to it?
Possibly the top few lines of the HTML code are missing some important command? [updated]:
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class = enterprise> <br>
<p>text<p>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Also, does Bootstrap have to be installed anywhere?
I appreciate your responses.
The content must be in the body tag
The structure of an HTML document is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- CONTENT HERE -->
<div >
<h1>Site name</h1>
</div>
</body>
</html>
You should not have in the part.
This is a html5 structure :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Then you should put inside the part like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class= top>
</div>
<div class = enterprise>
<p> text goes here </p>
</div>
</body>
</html>