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
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>
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".
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
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>
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" >