I don't know why external CSS file doesn't apply to the html file.
I'm now programming on the Cloud IDE(goormIDE - it's similar to C9). I wanted to link external CSS File to the HTML File on the web server using node.js. But it doesn't apply to the HTML. I researched a lot, but can't solve the problem.
It has 3 main file (index.html, style.css, main.js) And They are in same folder.
index.html
<!doctype html>
<html>
<head>
<title>YOONJONG</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
INTRO
PORTFOLIO
BOARD
CONTACT
<p>blahblah</p>
</body>
</html>
style.css
a {
font-size: 36px;
font-weight: 800;
}
p {
font-size: 20px;
}
main.js
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url = request.url;
if(request.url == '/'){
url = '/index.html';
}
if(request.url == '/favicon.ico'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname + url));
});
app.listen(80);
try changing :
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" >
to :
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
Related
I have installed tailwindcss using PostCSS. However it's not taking effect when i try to use it to style my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/dist/output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home Page</title>
</head>
Here is the output in tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
i changed the path to ../dist/output.css
<link href="../dist/output.css" rel="stylesheet">
it is not properly pointing to the right output.css file location
I am trying different selectors using CSS. I am confused. I want to change only the the links that is pointing to secure sites (https). I want to change the color of secured links. How can I do that?
Here the code containing first two https and the rest one http:
a {
color: #333;
font-size: 20px;
}
<!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>Selectors</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="exercise.css" />
</head>
<body>
Google
Google
Google
</body>
</html>
Use [href^="https://"]. Selects all a tags whose href begins with https://.
a {
color: #333;
font-size: 20px;
}
a[href^="https://"] {
color: red;
}
<!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>Selectors</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="exercise.css" />
</head>
<body>
Google
Google
Google
</body>
</html>
More info about attribute selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Unfortunately, some http links have port 443, which also forces HTTPS. It is not possible to style such links with CSS, but you might get some hope with JavaScript:
// Get all links with href attribute
const links = document.querySelectorAll('a[href]');
for (var i = 0; i < links.length; i++) {
const link = links[i];
const href = link.href;
const split = href.replace("http://", "");
const parts = split.split("/");
if (parts[0].endsWith(":443")) {
link.classList.add('red');
}
}
a {
color: #333;
font-size: 20px;
}
a[href^="https://"] {
color: red;
}
.red {
color: red;
}
<!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>Selectors</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="exercise.css" />
</head>
<body>
Google
Google
Google
Google
</body>
</html>
I am trying to link three CSS stylesheets to my index.php file:
bootstrap-337.min.css
font-awesome.min.css
style.css
I have successfully linked bootstrap stylesheet but I am unable to link font-awesome and style stylesheet.
I had separately tested for all three and style.css is the css file I am creating for this project.
I have also tried to put css code in style tags in php file and that worked but I am unable to link css in separate stylesheet
HTML CODE:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>online store</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-337.min.css" >
<link rel="stylesheet" href="/font-awsome/css/font-awesome.min.css">
</head>
style.css:
/*
Template Name : E-commerce
Author Name : Pulkit Jain
Theme URL : localhost/e-commerce
Theme ver : 1.1
*/
/*General Styles*/
body {
font-size: 14px;
line-height: 1.40;
color: #333333;
background-color: #f0f0f0;
overflow-x: hidden;
}
/* Top Style */
#top {
background-color: #555555;
padding: 10px 0;
}
I am working on VS Code with Xampp Server for Ubuntu
I have tried using type attribute, '/' in the end of link tag, using '/' at the starting of the path in href:
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
edit: Image of the directory containing the file style.css that didn't load
edit: Image of the directory containing the file font-awesome.css that didn't load
Looking at the images you posted and from comments made I think you were not correctly referencing the files in whichever folders they were in - from the images I think the paths might be as follows.
<link rel='stylesheet' href='/e-commerce/css/bootstrap-337.min.css' />
<link rel='stylesheet' href='/e-commerce/css/style.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.min.css' />
You just have to do this:
<link rel = 'stylesheet' type = 'text/css' href = 'style.css'>
How would you make this HTML file use the css file while being run in electron?
<!DOCTYPE html>
<html>
<head>
<title>First electron html app</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
</html>
Try this: <link rel="stylesheet" type="text/css" href="styles.css">
This is my HTML head of electron APP.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="importInfo.info">
</head>
And this is importInfo.info File.
<meta charset="utf-8">
<title>HITS</title>
<script>window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');</script>
<link rel="stylesheet" href="../asset/font-awesome/css/font-awesome.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../node_modules/jquery-ui/external/requirejs/require.js"></script>
<link href="../asset/css/jquery-ui.css" rel="stylesheet">
<link href="../asset/css/style.css" rel="stylesheet">
<script src="../asset/js/frontLib.script"></script>
And I wanted to change this into the HTML below by simply copying and pasting because of this error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HITS</title>
<script>window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');</script>
<link rel="stylesheet" href="../asset/font-awesome/css/font-awesome.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../node_modules/jquery-ui/external/requirejs/require.js"></script>
<link href="../asset/css/jquery-ui.css" rel="stylesheet">
<link href="../asset/css/style.css" rel="stylesheet">
<script src="../asset/js/frontLib.script"></script>
</head>
As soon as I changed
require.js:166 Uncaught Error: Mismatched anonymous define() module: function () {
return _;
}
this error occurs.
What should I do? Can I simply stay with link rel="import"???
It says it is planned to be removed around March 2018 so I'm afraid of that, though time already passed.