I have included a CSS file in my project for my own CSS use, but it is not working or having any effect on my page
the file default.css
.feedbackText{
display: none;
text-align: center;
margin-left: 50px;
color: blue;
}
in the HTML file:
<!-- Bootstrap core CSS -->
<link href="<?=THEME_CSS?>bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?=THEME_CSS?>default.css" rel="stylesheet">
Later in the HTML file
<span id="invalidPasswordFeedback" class="feedbackText"></span>
The path is right, i checked it from the source in the browser, the PHP code is just a path to CSS files.
Thank you
As some commenters allready said, your rule is probably overridden by another, more specific rule.
You can fix that by making your CSS-Selector more specific, e.g.:
span#invalidPasswordFeedback.feedBackText{
/*Your rules*/
}
Related
I have read and learned that internal stylesheets will override external ones. And also, I learned that the stylesheet last to be called will override the previous one.
With that said, when I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal. It would make sense, as the external sheet was called last, but with what I have learned so far about internal CSS as having higher precedence, it shouldn't matter if it was placed before the external one, right?
There are only three types of styles:
Inline
Embedded
External
And the inline styles are very powerful, because, they are included along with the tag:
<div style="/* rules */">
The embedded styles are almost similar to external styles. Embedded styles are defined by using the <style> tag inside the same page. The main difference between embedded styles and external are, embedded are specific to the page, which they are contained, while external are generic to any page that uses it.
<!-- External Style -->
<link rel="stylesheet" href="style.css" />
<!-- Embedded Style -->
<style>
/* Page Specific */
</style>
And specificity matters in the way of how you import the styles. Always load your external styles <link /> first and then your page specific embedded <style> tags.
The specificity is as follows:
* Image credits CSS Tricks.
I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal.
Consider I am using bootstrap library, and Google Fonts. I will load them first, and then override them in my own styles.
<link rel="stylesheet" href="googlefonts.css" />
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="custom-styles.css" />
There's no difference between having your embedded or internal styles in CSS file or using <style> tag. The order of loading precedence matters.
A CSS file, say style.css with the following contents:
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
And having a style tag like this:
<style>
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
</style>
Both of them have no difference in them. The order you load matters very much.
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 am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
I like to have the navbar-inner element in my Bootstrap Layout to be customizable by the jQuery UI framework.
<div class="navbar-inner ui-widget-header">
</div>
But the background of the navbar is always black.
How can overwrite the Bootstrap Background with the background from the ui-widget-header class without changing the bootstrap css file?
Create your own CSS file which you will use to overwrite styles from the bootstrap.css and add its reference to your HTML after the reference to bootstrap.css. Also, to ensure that your styles overwrite the bootstrap ones you can use the !important keyword in your css.
So, create a CSS file and call it something like bootstrap-overwrite.css.
Add the bootstrap class you want to overwrite -
.navbar-inner
{
background: none !important;
}
Add the reference to your HTML after the bootstrap reference -
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />
Twitter Bootstrap is a framework that is supposed to be restyled so you shouldn't be afraid of overwriting the default styling.
Make the ui-widget-header selector more specific, so that it overrides navbar-inner in the cascade. For example,
#pageid .navbar .ui-widget-header {
background: red;
}
Is more specific than simply...
.ui-widget-header {
background: red;
}
I am attempting to bypass the need for a PDF component by building a good print stylesheet.
I have two CSS files, site.css and print.css. They are loaded via the following:
<link href="site.css" rel="stylesheet" type="text/css" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
site.css is a large, long and boring css file with the addition of
.printonly
{
display: none;
}
This is applied to elements in the document I have added for the sole intention of printing which I do not want on the page. It only exists in the site.css file.
When I have the image loaded through <img class="printonly" src="image.png" id="logo" alt="logo"/> It is not visible on the printed sheet.
If I drop the class="printonly", then it places the picture on the printed page just fine.
This makes me believe that it is picking up site.css even when trying to print.
Is there any way around this, or can anyone suggest anything?
For completion sake, I have included the entire print.css, however, I am not sure it is really needed:
body {
width: 210mm;
height: 297mm; }
#logo {
margin-left: 50%;
margin-right: 50%; }
.noprint {
display: none; }
You can either make the first stylesheet for screen media only, or you can change the display value for those images back to inline in your print media stylesheet.