I'm experimenting with a lot of success with CSS3 Custom Properties (aka CSS Variables). I'm talking about the --black: #000; and background: var(--black); type variables. However, I'm having no luck when variables are declared in separate linked documents.
With CSS Custom Properties being at over 72% browser compatibility (src: https://caniuse.com/#search=css%20variables), I'm keen to start using them in a very specific app where I know my audience are using compatible browsers.
I'm wondering whether these CSS Custom Properties are global in scope across all linked CSS documents or whether they are only global (at the :root element) per document?
I'm not able to find an answer (even in the spec)!
Some of the research I read:
https://drafts.csswg.org/css-variables/#defining-variables
http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties
https://css-tricks.com/css-custom-properties-theming
https://www.sitepoint.com/practical-guide-css-variables-custom-properties
https://www.toptal.com/front-end/dynamic-css-with-custom-properties
https://googlechrome.github.io/samples/css-custom-properties/
https://tympanus.net/codrops/css_reference/custom-properties/
My specific problem is occurring in a Ruby on Rails application, where I'm including the CSS Custom Properties in a <style> block ahead of an SCSS stylesheet include which when deployed is to be pre-compiled. If I include the variables at the top of the SCSS, everything works just fine. However the <style> block is to contain theme variables and needs to be compiled by ERB at runtime.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
:root {
--primary-color: #000;
}
</style>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
</html>
In MDN:
Custom properties participate in the cascade: each of them can appear
several times, and the value of the variable will match the value
defined in the custom property decided by the cascading algorithm.
It works just like any other CSS properties. It should be declared in the ancestor of the target element. So usually it would be declared to the top-level element html or root:.
It does not matter whether CSS custom properties are declared in an external CSS file or the same file.
The following is a sample using two external CSS files. It works on Firefox, Safari and Chrome.
https://thatseeyou.github.io/css3-examples/basics/customproperty.html
variables.css :
:root {
--red: #f00;
--green: #0f0;
--blue: #00f;
}
style.css :
.red {
background-color: var(--red);
}
.green {
background-color: var(--green);
}
.blue {
background-color: var(--blue);
}
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="customproperty/variables.css" rel="stylesheet">
<link href="customproperty/style.css" rel="stylesheet">
<style>
.module {
--red: #800;
--green: #080;
--blue: #008;
}
</style>
</head>
<body>
<div class="red">red</div>
<div class="green">green</div>
<div class="blue">blue</div>
<div class="module">
<div class="red">red in module</div>
<div class="green">green in module</div>
<div class="blue">blue in module</div>
<div>
</body>
</html>
Related
On my layout page, in the <head>, I have the following styles:
<link rel="stylesheet" href="/dist/vendor.css">
<style>
.bg-dark {
background-color: #240000;
}
</style>
I have added the link to my layout page. The style block is added dynamically by Angular & webpack. From what I know about CSS, that last .bg-dark class should win over any .bg-dark class declared in `vendor.css. Yet I see the following:
Is this something caused by the magical pre-rendering of Angular? Is there some way to prevent this?
The background-color attribute in vendor.css has the !important flag, which elevates its priority:
background-color: #222222 !important;
To override that setting, you should set the !important flag in your layout page CSS:
<style>
.bg-dark {
background-color: #240000 !important;
}
</style>
or remove that flag in vendor.css, if your can.
I'm a real noob at CSS/HTML, so please forgive me.
I tried to change the background page color on the CSS file linked to my html file, and it doesn't work. Whereas when I just flat out change it between the style tags in my HTML file, it works. What gives?
Plain and simple:
Ex1.css
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
SamplePage.html
<!doctype html>
<html>
<head>
<title> Sample Page </title>
<link rel = "stylesheet" href="Ex1.css">
</head>
<body>
Hello. This is a sample Page.
</body>
</html>
Your HTML is correct, and links to your CSS correctly (assuming Ex1.css is in the same folder as your HTML).
Your CSS is almost correct; the only problem is that you shouldn't include any HTML tags in your CSS document. Ex1.css should only contain the actual CSS declarations themselves (body { }).
body {
background-color: lightblue;
}
<body>
Hello. This is a sample Page.
</body>
If in doubt, you can validate your CSS with W3's CSS Validator.
Hope this helps! :)
Reduce the contents of your Ex1.css file to this:
body {
background-color: lightblue;
}
(no HTML code in CSS files!)
your css file will just have. Plain and simple
body {
background-color: lightblue;
}
change your css file to this:
body {
background-color: lightblue;
}
I have Bootstrap loaded and working all fine, via CDN, and I'm trying to override the bootstrap default size and color stylings for a <caption> tag. So, I've placed some css in my stylesheets/application.css file:
caption {
font-size: 150%;
color: #000000;
}
My application.html.rb head looks like this:
<head>
<title>Odot2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
Even though bootstrap is listed after the application.css manifest file the font-size css selector i defined in application.css does take effect, yet the color selector will only work if i move the bootstrap link before the application manifest link?
Why does one selector work and not the other and what is the correct way to be doing this? Thanks in advance.
Bootstrap css defines caption as:
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #777;
text-align: left;
}
Note, there is no font-size there, but there is color.
In css, if the same property is defined in exactly same selector more then once, the second definition overrides the previous one. Hence if you define color first in your assets and you load bootstrap later on, bootstrap will override your definition. Since font-size is not used in bootstrap for this selector, order doesn't make any difference.
Thats how CSS works - if two rules have the same specificity than the latter rule always wins:
a.css
p { color: blue; }
b.css
p { color: red; }
--
<html>
<head>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
</head>
<body>
<p>I'm red</p>
</body>
</html>
That's why you always place libs at the top and your overrides under. That is unless you want to start a specificity war...
The correct way, if you want to override a style defined in a library, is to put your own stylesheet after the stylesheet for the library, as you noticed.
Now the Bootstrap CSS does not define the caption color font size, so it doesn't matter where you put the size in your CSS; that's the size it will take. However, it does define the color, so in that case, the order in which the styles appear is important. The last one takes precedence.
Use the custom style CSS at the last, after bootstrap CSS..it will over write the caption style. Hope it will resolve ur issue
Just add important to your css attribute value to override default bootstrap CSS
caption {
font-size: 150%;
color: #000000!important;
}
Hope that will be quick and work for you well.
thanks
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I have an issue with the background-image property in an external CSS file. I can't seem to get the image to show up. Its been while since I have coded so maybe it's just me forgetting everything I know but I'm pretty sure I have the link right. The website is set up like this
/Root/
index.html
/styles/
webstyles.css
/img/
header.jpg
The background works when I use it inline so it's starting to annoy me.
HTML
<html>
<head>
<meta charset="UTF-8">
<title>MYSITE</title>
<link rel="stylesheet" type="text/css" href="/styles/webstyles.css">
</head>
<body>
<div class="headerBar">
<h1 class="Hlogo">Title</h1>
</div>
</body>
</html>
CSS
body
{
background:#999999;
}
headerBar
{
background: url(/styles/img/header.jpg);
}
Thanks for any help.
If this style is in webstyles.css, then you need to use this way.
.headerBar{
background: url('img/header.jpg');
}
Based on the folder structure, "styles/img/header.jpg" is still a wrong path.
And also, I'm not sure why, but you are missing . for CSS class selector when selecting the headerBar. Fix that one too.
You can use:
background: url("styles/img/header.jpg");
Replace
background: url(/styles/img/header.jpg);
with
background: url('img/header.jpg');
You can use:
.headerBar
{
background: url("styles/img/header.jpg");
}
since styles folder is the same level as your HTML file.
However, if your img folder is not placed inside styles folder (which makes more sense), then you want this path instead:
.headerBar
{
background: url('img/header.jpg');
}
Also you're missing . to target class .headerBar