Only a part of css file doesn't work - html

I'm new to js and I was following a tutorial to learn about node.js.
I used middleware and tried to adapt my css file into pages. But only a part of css file doesn't work even though I just copied and moved the whole style part from html file to css file.
Here is my style.css.
<style type="">
body {
background: skyblue;
font-family: verdana;
color: #fff;
padding: 30px;
}
h1 {
font-size: 48px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
h2 {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
p, li {
font-size: 16px;
text-align: center;
}
And only background: skyblue this part doesn't work.
The part I handle with static files is just like this.
app.use('/assets', express.static('assets'))
All other styles does work and I have no idea what is the cause.

Remove <style type=""> from your CSS. That's HTML, not CSS.

The skyblue color is equal to #87CEEB - might try and change to a HEX color instead as it seems node.js has trouble interpreting the skyblue color.
You can see the color references here CSS Colors

It is not possible that only a part of CSS is not working.
Inspect body tag and check from where it is picking background style.
Include your CSS right after the the CSS file from which background style is currently picked.
My most probable guess is it is picking background style from some other file.
Make sure there is no in-file and inline CSS giving background style.
or use
background: skyblue !important;

Related

CSS Background image only working inline html

This is my first question (and first post) on Stackoverflow. Hope to contribute more once I become skilled enough.
Anyway, I'm having trouble understanding why my background image appears when I reference it using css that's inline with my html, but not when I put it in a separate css stylesheet that the html links to.
Here's what my inline css looks like, which works fine:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
</style>
My styles.css file is shown below, which contains the exact same code:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
p {
font-family: 'Helvetica Neue' Helvetica;
font-color: white;
}
h1 {
color: white;
font-family: 'Helvetica Neue';
font-size: 3.5em;
text-align: center
}
.textbox {
background-color: beige;
height: 100px;
width: 100px;
padding: 10px;
margin: 50px auto;
text-align: center;
font-family: 'Helvetica Neue' Helvetica;
font-weight: 200;
}
</style>
...but it no longer shows the background image. Everything else from the css file (paragraph formatting, text size/color, etc.) shows up in the browser just fine.
Also, the html file, css file, and background image are all in the same directory. So I figured I don't need to use "/background.jpg", "../background.jpg", etc. which I've seen suggested in other cases in other posts on Stackoverflow.
I tried to find an answer to this but couldn't find one. Any help is greatly appreciated!
But, in a separate .css file, I typed the exact same code as above, linking to it in the html file by using:
Did you remove the <style> & </style> tags from the CSS file ? For example, like:
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
These HTML tags are only required around your CSS rules if you're including CSS directly into your HTML.
i need to see your file and folder structure.. makes sure the the stylesheet you are referring is in the same folder where the html is, if so the same code will do.. if you css is in another folder like in css/styles.css than you have to change the link as well as the href of stylesheet to something like ../image.png
the folder structure matters here
Take the style tags out of your .css file.

Why the Roboto Mono font is not applied on an input of type submit, when using Chrome or Safari? [duplicate]

I'm trying to style the font in an input button as bold.
Here's my code:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Here's my CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
All the styles are being applied apart from the bold.
Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/
UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:
UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/
Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.
When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: 700;
}
Js Fiddle Demo

Font messes up alignment of numbers

I'm using the Raleway font, but this font doesn't align numbers properly with letters.
You can see this in this snippet:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>
Can I solve this easily? Or is this just a faulty font and should I chose another one?
You can simply change with the help of CSS
add font-feature-settings: 'lnum' 1; to your css file
so your new css will be:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
font-feature-settings: 'lnum' 1;
}
Check out this too http://clagnut.com/sandbox/css3/
The Problem
This is part of the font itself and not something you can provide a quick fix for (unless you're dealing with very little text). If we look at Google Font's page for the Raleway font, we'll see that numbers have different alignment to letters:
If you don't want the numbers to be aligned like this, you're going to have to use a different font instead.
A Fix
You can fix this by wrapping the numbers you wish to change the alignment of in a separate element and adjusting their vertical-align separately, but this is probably going to be more effort than its worth. I've given an example of this below:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
}
.raised {
display: inline-block;
vertical-align: 12%;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
<span class="raised">5</span>
Comments
</h1>
2020 speaking
Depending on the font and the browser you can add
font-variant-numeric: lining-nums;
Source : https://css-tricks.com/almanac/properties/f/font-variant-numeric/
https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals
This article explains it all and gives de fully compatible css3 "solution".
This code do the magic:
.yourclass {
-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}
It depends on "the number case setting" feature of your font supports.
still you can do it by following this
Further reading UX stackexchange
I created a version of Raleway with lining numerals as default to be used as The Definitive Solution for this problem. You can download the font files or just embed it into your HTML (using <link>) or CSS (using #import) with a single line of code, like you'd do with any other Google Font. Free, open source and available in all weights and styles:
https://h-ibaldo.github.io/Raleway_Fixed_Numerals/
I know you've posted this question a long time ago, but take a look at this property:
.class, #id, tag, * {
font-variant-numeric: lining-nums;
-moz-font-feature-settings:"lnum" 1;
-moz-font-feature-settings:"lnum=1";
-ms-font-feature-settings:"lnum" 1;
-o-font-feature-settings:"lnum" 1;
-webkit-font-feature-settings:"lnum" 1;
font-feature-settings:"lnum" 1;
}
It forces all the numerals to be correctly aligned, so you can just apply this property to * in CSS and any text containing numbers will be a lot more readable.
This code will work for Raleway, I have tested and got the result
-webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum":

font size discrepancy between tumblr and hard coded

I have an odd issue... When im comparing two elements on a website I have coded on my server compared to a tumblr site I created on their server, there is a 2px font size discrepancy.
both sites have this code:
<body>
<h1>Text</h1>
I have no font sizes set anywhere but both body css codes are:
body {
font-family: Arial;
font-size: 100%;
color: #000;
background: #FFF;
width: 4100px;
padding: 0;
margin: 0;
}
and both h1 codes are:
h1 {
font-size: 100%;
font-weight: normal;
margin: 0.67em 0 0.67em 0;
}
for whatever reason, the tumblr site has a 2px font size difference (smaller). is there any known reason why?
EDIT
I've added a base font size of 16px to both html attributes, however there still seems to be about a 2px difference. Some links to the sources:
Server:
http://goo.gl/PfyQ6r
Tumblr:
http://goo.gl/5gDfp4
Tumblr's global.css file as AR7 noted is set to 14px, the default html font size in most browsers is 16px but is also user definable.
html, body {
font-family: "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
font-weight: 400;
line-height: 1.4;
font-size: 14px;
font-style: normal;
color: #444;
}
Your question code example sets the body font-size as inherited from its parent (html) at 100%. If you did not specify the html font-size it would inherit the browser's defined default font-size to 100%.
Font size by default is 16px I believe and is usually defined in the body.
Popular frameworks like bootstrap have the font size set as 14px in the body.
That's probably why there's a difference because the default font size is what is used when you specify 100%. Tumblr's own css files, which are completely unrelated to yours, specify it as 14px by default.

no-repeat makes image disappear

I'm learning css and xhtml through a website called html.net. I'm following their instructions while working on my own website. I've just started the CSS tutorials on image background and i am encountering a small but annoying problem. When I do this, everything is fine. Meaning, there are pirate ships all over the place. It looks like the spanish armada.
body {
background-color: silver;
background-image: url("pix/pirateship.jpg")
}
h1 {font-size: 40px; font-family: arial; color:yellow; background-color:#0000a0;}
h2 {color:maroon;}
li {font-size: 20px; font-family: arial; color:#87f717; background-color:#34282c;}
table {color:black; background-color:gray;}
th {color:black;}
But... when i try and follow the next example, this is not showing any image at all.
body {
background-color: silver;
background-image: url("pix/pirateship.jpg")
background-repeat: no-repeat;
}
h1 {font-size: 40px; font-family: arial; color:yellow; background-color:#0000a0;}
h2 {color:maroon;}
li {font-size: 20px; font-family: arial; color:#87f717; background-color:#34282c;}
table {color:black; background-color:gray;}
th {color:black;}
I suspect this has something... actually, I don't know enough to start suspecting. I'm just gonna leave this one to you guys, and hopefully somebody knows the solution.
PS All of that is in a css file in the same folder as the index file. When I try and use any of the no-repeat, repeat-x or repeat-y values all of my pirates vamoose. The regular background image shows just fine when I don't use those.
you're missing a semi-colon after the background-image selector in your second example. If this is an copy and paste of your code, then that missing semi-colon is the problem.