My stylesheet isn't linking to my HTML - html

Really new to HTML & CSS but have created sites in the past and linked the CSS to the HTML quite easily. I can't understand where I'm going wrong (although I am sure it's massively obvious!) Any help would be great, thank you in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Katgrog</title>
<meta name="description" content="My first try at my own website">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>

<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
Copy and paste it in your html, it will work. It seems you are forgetted to add slash(/) at the end before >.

you need to specify the type, so do something along these lines: (The type is not required)
<link rel="stylesheet" type="text/css" href="theme.css">

Related

Why my layout doesn't work properly in welcome.blade

i'm working on a laravel project and i prepared a layout for welcome.blade but css and html don't work properly . somehow the project can't read them .
i make you sure that my paths is correct
even i change folders and paths in public but it didn't work
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="description" content="MealOrder">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="HiBootstrap">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Fafo - قالب رستوران و فست فود</title>
<link rel="icon" src="/assets/images/tab.png" type="image/png" sizes="16x16">
<link rel="stylesheet" src="/assets/css/bootstrap-reboot.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/bootstrap.rtl.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/animate.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.carousel.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.theme.default.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/responsive.css" type="text/css" media="all" />
#livewireStyles
</head>
<body>
.
.
.
.
<script src="/assets/js/jquery-3.5.1.min.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/jquery-ui.js"></script>
#livewireScripts
</body>
</html>
I assume you use Laravel 9 because Laravel now is using vite instead of webpack/laravel-mix as we used to see, and the way vite injects styles & scripts in layouts pages are not the same as it was.
you will need to add the following blade directive into your layout file:
#vite(['resources/css/app.css', 'resources/js/app.js'])
and then re-run npm run build or npm run dev to re-bundle your assets.
more about Bundling Assets (Vite)
its better change all src to asset() for example:
instead of
write
<link rel="stylesheet" src="{{asset('assets/css/animate.min.css')}}" type="text/css" media="all" />
and for scripts do same

html and css not linking

My html and CSS files are not linking even though they're in the same directory.
here's my html code:
<!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, maximum-scale=1">
<title>temp</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
I also tried using href="/main.css" and href="./main.css" but to no avail.
would appreciate any help!
Use this app.use(express.static('public')); awesome talking to you guys.
<link rel='stylesheet' href='./main.css' />
i don't know why it is not working for you. but it should work!!!
have you tried restarting your app??
try it.
close and then restart.
Try adding this snippet after title block
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

CSS is not working, What I do, I checked all parts and also do hard refresh but it is not working?

This is my index.html file. This is head part of result.html and the name of css is result.css which is in same folder
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="./result.css" type="stylesheet" type="text/css">
<title>Document</title>
Your link tag should be like this:
<link href="./result.css" rel="stylesheet" type="text/css">
It seems you've accidently typed type="stylesheet" instead of rel="stylesheet"
Take a look at the reference : https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

Head element's going inside body

The code is....
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Videos - Pranked Bros</title>
<link rel="icon" type="image/png" href="img/logo-7.png">
</head>
<body>
<!-- other codes -->
</body>
in the browser it's like:
So the code inside head tags goes inside the body tag. In this case, what should I do?
There's probably something wrong with the tags before the part, maybe this is the problem.

How to Avoid conflict between jquery UI and Bootstrap

I am creating jquery collapsible set with sidebar and a search button. I need to apply bootstrap for this. If i include the bootsrap css file the collapsible is not visible.
Please help me to solve this problem.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/demo_collapsible.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<link href="css/jqueryscripttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
<!--<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />-->
</head>
<body>
</body>
</html>
This might help you jquery-ui-bootstrap
Also look at jQuery.noConflict().
You can customize your bootstrap to omit some features in order to prevent confliction: http://getbootstrap.com/customize/