Firefox: no CSS errors/warnings in the log - html

I created a site with a bogus CSS code:
a {
foobar: 8888;
}
Then opened the page in Firefox. I looked in the web console and I can see no errors/warnings. Why?
My html head is:
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="http://localhost:35729/livereload.js"></script>
</head>

There is no warning in web console because wrong CSS rules simply has no effect in the page.

Related

Wordpress custom CSS for specific page not loading

I am trying to change some css for a specific wordpress page. It should be that I can just add .page-id-# before the new css rule. It seems simple but I just can't get it to work. I've tried different selectors, adding !important, trying different browser, checking the id, trying different pages etc but the custom css never loads.
Eg. In the code I've tried below the text on page 2 should be blue rather than red but the custom css doesn't load and so it stays red. Am I missing something obvious?
Page 1 -------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body>
<div class="change_colour">Hello</div>
<div>
Page link</div>
</body>
</html>
Page 2-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body>
<div class="change_colour">Hello</div>
</body>
</html>
CSS------------------------
/*
Theme Name: Testing
Text Domain: Testing
Version: 1.0
Decription:
Tags:
Author: Jonny
*/
.change_colour {
color: red;
}
.page-id-2 .change_colour {
color: blue;
}
You have to add <?php body_class(); ?> inside your opening body tag then you have to inspect the page and check the body tag for your .page-id-** class and then write CSS as per the class you get in the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body <?php body_class(); ?> >
<div class="change_colour">Hello</div>
<div>
Page link</div>
</body>
</html>

CSS won't link to HTML, tried everything

I've tried everything! My CSS file is in my root folder, every HTML file works fine.
<!DOCTYPE html>
<html>
<head>
<title>Kyra Moonrae Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
There is a HTML error. Just add > after initial-scale=1.0".

How to display SVG Sprite Icons in HTML file while working locally?

I am using SVG icons (from IcoMoon), the problem is I can't see the icons while working locally, but when I upload the page online it works fine.
<!doctype html>
<html>
<head>
<title>SVG Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<svg class="ico ico-menu"><use xlink:href="icons/symbol-defs.svg#ico-menu"></use></svg></td>
<script defer src="icons/svgxuse.min.js"></script>
</body>
</html>
I am not using any local server. It is a plain HTML file. I wonder how can I fix this issue?
Thank You

How can i create an HTML?

I want to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.
I would also like it so there aren't any extra characters, or parameters in the URL.
How can I achieve this?
There are many ways you can do this the easiest way is using a href and you can add styling to the element using bootstrap classes. The code is given below.
<!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" />
<title>Document</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
Go to Google
</body>
</html>

Internet explorer9 is opening my website in quirks mode automatically? How to fix it?

Here I am using html 5 doctype but IE9 rendering it into quirks mode automatically. I used a meta tag to fix it but it is not working.
Here is the my head section code and URl please fix it.
URL: http://www.dual-amps.com/SeeHearDemo3/hukf7vh4i/default.aspx
if full code is required please let me know..
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Dual Amplifiers</title>
<link rel="stylesheet" href="https://revenewonline.net/web/dual/dual_amplifier/LP/css/style1.css" />
<script type="text/javascript" src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/jquery.js"></script>
<script type="text/javascript" src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/tabcontent.js"></script>
<link rel="stylesheet" href="https://revenewonline.net/web/dual/dual_amplifier/LP/css/jquery.fancybox-1.3.4.css" />
<script src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/common1.js"></script>
<link href="https://revenewonline.net/web/dual/dual_amplifier/LP/images/favicon.ico" rel="Shortcut Icon" />
<meta name="Keywords" content="Powerful Amps for Powerful Sound" />
<meta name="Description" content="Powerful Amps for Powerful Sound" />
</head>
Use below line in <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >