Here is the example
main.css
mobo.css
styleguide.css (Where all CSS variables are mentioned)
Can I use them in main.css and mobo.css ???
"CSS variables" is the colloquial name for Custom Properties.
Like any other property, it doesn't matter where it is set from¹, only that it applies to the element. Therefore it doesn't matter which stylesheet sets the properties or which one reads it.
<style>
#foo {
background: var(--example);
height: 35px;
}
</style>
<style>
#foo {
--example: red;
}
</style>
<div id="foo">
</div>
Footnotes
If multiple sources try to set the same property then it might start to matter since document order is one of the decision points when calculating the cascade order.
Yes, just link your file with all the variables in the HTML
<link rel="stylesheet" href="var.css">
Or if you are using SASS, in your main css file you can do :
#import('file.css');
Related
<va-input
label="Device ID"
type="text"
v-model="deviceid"
required />
i am using vuejs, i need to change font-size and color of above label tag . whenever i write style like below
label{
color:red,
font-size:20px
}
it will effect all other pages.
Use scoped attribute
Use CSS module
Use BEM naming convention
Use your naming convention
Or use a libary's convention.
Of course you could mix match between naming approach with the other approach. I myself prefer combine the (1) with (4). At first I thought scope attribute is safe enough for scope style, but when working with projects, it turned out it's not, because of the mechanism it's used under the hood for the scope attribute is just automatically add some data attribute like [data-v-f3f3eg9]..
An example of my approach:
//MyComponent.vue
<template>
<a class="MyComponent-button">The Button<a>
<template>
<style scoped> // scoped
// use `MyComponent-` prefix for scope naming convention
.MyComponent-button {
color:red;
backgroundcolor:blue;
}
</style>
In the style block you can specify scoped like so:
<va-input label="Device ID"
class="label-style"
type="text"
v-model="deviceid"
required>
</va-input>
<!-- above is in the template -->
<style lang="css" scoped>
.label-style label {
color:red,
font-size:20px
}
</style>
This will make this style dependent on data tags and won't affect things globally. This can be a bit slow so you may want to look into something like BEM or CSS modules for a more performance-oriented solution.
It won't work because from what I'm seeing the label element is generated in the 'va-input' component. Scoped styles are only applied to the elements in the current component.
What you can do is either add the following tag to the va-input component
<style scoped>
label{
color:red,
font-size:20px
}
</style>
or add a specific class or id to your label in your va-component and then you can style only that label from anywhere...
Hope this helps
I have three big CSS files which have many classes. Same of those classes have the same name but are in different files.
Example:
CSS1:
...
.btn-primary {
background: #000;
}
...
CSS2:
...
.btn-primary {
background: #fff;
}
...
and CSS3:
...
.btn-primary {
background: #4285F4;
}
...
Let's assume that all three CSS are called in my HTML page.
Is there a way to select in my web page only the .btn-primary class from CSS3? If yes, how could I do it?
No.
If a stylesheet is loaded into a page, and it has a ruleset with selector that matches an element, then it will apply to that element.
Rules which provide conflicting information for a particular property will overwrite each other in the standard cascade order.
Not as is, but you could alter your style sheets so that it reads like this:
.btn-primary, .btn-primary.style1 { ... }
.btn-primary, .btn-primary.style2 { ... }
.btn-primary, .btn-primary.style3 { ... }
Then you could get the specific styles by using the following class:
<a class='btn-primary style2'>Stylesheet 2</a>
In short, you'll need to add some sort of additional method of narrowing down the different styles.
--
Another possibility would be to convert your css files to scss like so:
.style1 {
.btn-primary { ... }
}
You could then use the styling from specific sheets like so:
<div class='style1'>
<a class='btn-primary'>Stylesheet 1</a>
</div>
An apologetic into: the following is, in my opinion, a wrong solution. I wanted to add it as I can think of situations where you have to find this kind of hacky ways rather than change the css files.
Generally speaking, as Quentin and Bryant pointed out - there is no "namespacing" for css files and so if you load all the css files you will end up with the last overriding file's selector classes (among the name-conflicted ones) and won't be able to choose between them.
If (for some odd reason) you don't care about Chrome users - you can probably use the cssRules or rules properties of the document.styleSheets[i] object - for each loaded stylesheet file (i being the number of the file). As noted, this method does not work for Chrome. Fore some reason both cssRules and rules are null in Chrome for each of the styleSheets[i].
My hacky solution:
After loading all the css files as you need,
In javascript code, read the css file you choose as a text file. You can use AJAX for that - see this question and its answers
Search for the selector you want in the text you got and extract that string. You can parse the whole file for example and take the relevant part.
In searching how to help with this step I came across the document.styleSheets[i].cssRules object and the method that doesn't work in Chrome.
Build a style element around it and append that style element to the head element (here's an answer that shows how to create and append style elements to the head element).
This seems like a wrong way to do it from several reasons (performance, elegance, readability) - and probably means the design of the css files is not right for your project (look at Bryant's suggestions) - but I wanted this answer to be here, as there is a way to do it, albeit a hacky one, and if for some reason you can't change the css files and have to use them as is - then here you go.
I don't know what is the usage of this, I mean having three files and storing different styles and even same styles into them.
But there are some tools that will normalize and minify your CSS, for example, take a look at Nano CSS
But, as other answers says it is not possible to say what class from what file apply to this page, and they will overwrite and the last style will apply for the element.
Here is also an example to find out how overwrite works:
#test-link {
display: block;
text-decoration: none;
background: red;
color: white;
}
#test-link {
background: green;
}
#test-link {
background: orange;
}
#test-link {
background: black;
}
<a id="test-link" href="javascript:void(0);">Test link</a>
As you see, just the last style applied for the background color
im trying to learn Polymer, but i cannot understand how to style elements in version 1.0.
The exemple just show this..
Custom property | Description | Default
----------------|-------------|---------- --paper-tabs-selection-bar-color | Color for the selection bar |
--paper-yellow-a100 --paper-tabs | Mixin applied to the tabs |
{}
But i cannot to undderstand wher i use this, or how i use. Someone can give me a basic example?
thanks in advance
Polymer 1.0 introduced the concepts of custom CSS properties and custom CSS mixins.
Custom CSS properties
Rather than exposing the details of an element’s internal
implementation for theming, instead an element author defines one or
more custom CSS properties as part of the element’s API.
These custom properties can be defined similarly to other standard CSS
properties and will inherit from the point of definition down the
composed DOM tree, similar to the effect of color and font-family.
Custom CSS mixins
It may be tedious (or impossible) for an element author to anticipate
and expose every possible CSS property that may be important for
theming an element as individual CSS properties (for example, what if
a user needed to adjust the opacity of the toolbar title?).
For this reason, the custom properties shim included in Polymer
includes an experimental extension allowing a bag of CSS properties to
be defined as a custom property and allowing all properties in the bag
to be applied to a specific CSS rule in an element’s local DOM. For
this, we introduce a mixin capability that is analogous to var, but
allows an entire bag of properties to be mixed in.
Checkout the links to learn more. Below you will find a simple example that contains the paper-tabs element and custom styles.
<!DOCTYPE html>
<html>
<head>
<title>Paper Tabs Style Example</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html" />
<style is="custom-style">
:root {
--my-custom-color: red;
--paper-tab-ink: var(--my-custom-color);
/* custom CSS property */
--paper-tabs-selection-bar-color: blue;
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
}
</style>
</head>
<body>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
</body>
</html>
Key parts to this example:
For styles in the main document you can use <style is="custom-style">.
You can create your own custom CSS variables like --custom-color: red; and use them like --paper-tab-ink: var(--custom-color);.
You can assign any valid, appropriate CSS to a defined custom CSS property like --paper-tabs-selection-bar-color: blue; or --paper-tabs-selection-bar-color: rgba(0,255,0,0.5);.
Many elements include predefined CSS variables. paper-styles, for example, includes color.html and default-theme.html. These files define various CSS variables for colors that can be used to customize the style of elements. --default-primary-color is one of these variables. See below.
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?
The IFRAME solution works like this:
In your main HTML file, you'll have your DIV:
<div id="myspecialdiv">
<iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>
Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:
<html>
<head>
<link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>
<body>
<!-- The contents of your DIV -->
</body>
</html>
If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:
<div>
<style scoped>
// Styles here
</style>
</div>
This will helps you a lot:
http://css-tricks.com/saving-the-day-with-scoped-css/
Applies only style to a certain delimited escope. Good luck!
IMHO better than the iframe solution..
related: Limit scope of external css to only a specific element?
If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:
p { font-size: 12px; }
You'd modify that to:
.mydiv p { font-size: 12px; }
And format your DIV as
<div class="mydiv">...</div>
You would then load the script as a stylesheet, rather than the external stylesheet directly.
<link rel="stylesheet" href="path/to/internal/script.php" />
I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
Hope this helps.
I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/
You could assign a CSS prefix to target the section of your document you want to style.
scoped is a good idea, but has browser compatible issue.
I solve this problem by adding pre-class before all selector in css file:
https://github.com/ericf/grunt-css-selectors