I am trying to write CSS that only applies to certain Divs. I have code that works for this example, but I would like to do it in a way that doesn't require me to put .landing in front of every line
HTML
<div class="landing">
<h1>Hey</h1>
<p>Hi</p>
</div>
<div class="notlanding">
<h1>Hey</h1>
<p>Hi</p>
</div>
CSS
.landing h1{
color: red;
}
.landing p {
color: blue;
}
This produces what I want to accomplish, but is there a way to wrap both h1 and p in .landing?
Something like this
.landing {
h1{
color: red;
}
p {
color: blue;
}
}
No this way you can not use in CSS.
But you can use SASS - Syntactically Awesome StyleSheet
http://sass-lang.com/
SASS allows you to write dynamic css like variable declaration and much more. Just check above link.
You could do that if we'd be using a css compiler like less or sass... I think you can't do it in pure css.
Another way to achieve this is using Shadow DOM (not widely supported yet). Then, your landing div cound be a shadow root and could have its own stylesheet... this basically works in Angular 2 today.
Related
For example, say I want to create text in HTML with the color blue and a size of 13px.
Is there any way I can do something like:
<h1 class = "blue 13px">Hallo</h1>
And then use CSS to make it blue and 13 px without doing:
.blue 13px {
color: blue;
font-size: 13px;
}
Instead of using CSS classes, you could use inline styling in your HTML elements:
<h1 style="color: blue; font-size: 13px;">Hallo</h1>
Because of its poor maintenance and reuse qualities, this styling strategy is generally not advisable though. Use with caution. ;)
Also note that the CSS code that you provide in your question is invalid. CSS class names have to be valid CSS identifiers. This would be more correct:
<h1 class="blue-13px">Hallo</h1>
.blue-13px {
color: blue;
font-size: 13px;
}
And also note that you can include CSS rules inside your HTML page as well (without using a separate CSS file):
<style>
.blue-13px {
color: blue;
font-size: 13px;
}
</style>
<h1 class="blue-13px">Hallo</h1>
CSS
:root
{
--css_h1_color: rgba(204,204,204,.2);
}
h1 {color: var(--css_h1_color);}
JavaScript
getComputedStyle(document.documentElement).getPropertyValue('--css_h1_color');
I'm currently messing around with Bootstrap and LESS, and tried to do the following:
LESS:
.class1 {
.jumbotron;
div {
.container();
color: white;
}
}
HTML (just the part that matters of course):
<div class="class1">
<div>
<h1>Heading</h1>
<p>Some text</p>
</div>
</div>
But the .container() mixin refuses to work when in a nest. Note that the text color is indeed white, which indicates the problem is only with Bootstrap mixins.
Indeed, if I do this:
.class1 div {
.container();
color: white;
}
It works like a charm.
But I'm sure LESS isn't supposed to work like that, so any help is much appreciated. Thanks in advance.
.class1 div {
.container();
color: white;
}
is working, so the problem comes from your selector or something between the two selectors. Look at .jumbotron; and edit it, so you will resolve the conflict.
When I want to apply a certain style to a div (specially using bootstrap 3), I create my own class like this:
.myClass {
width: 30%;
padding-right: 0px;
}
<div class="myClass"></div>
But sometimes the div style is overwritten by the bootstrap classes or another inherited properties (I don't understand completely the inheritance in CSS3), but if I apply directly in the div:
<div style="width: 30%;padding-right: 0px;"></div>
2 ways to force CSS on an element in this case :
You have you custom CSS located in a local .css file : put the <link> tag for this custom stylesheet after the Bootstrap css file.
Set the CSS rule !important after each properties so they will get an extra authority upon others
CSS inheritance
.myClass is less than div.myClass which is less than body div.myClass.
The Bootstrap is using usually more than one identifier. Like .ourClass.theirClass.yourClass which is hard to overwrite. Inspect your element in your browser to see the inheritance and try to overwrite it the css way before using any !important attributes.
The last rule defining a style of the element will be aplied to it.
So if you have various stylesheets in your page, the order of the files should be in the order you want them to be applied. example:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="secondStyle.css">
Every style rule(not an entire block) that is written in the second file will be the definitive one in the website.
the same rule apllies within files, for example:
.ClassOne {
color: red;
}
... othes styling ...
.classOne {
color: Black;
}
In this case the color in the browser will be Black because it was the last one and it overwrites the first one.
There is another rule that can affect styling - The more specific rule will be the definitive one, example:
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green;
}
<div class="one">
<div class="two">
<div class="three">
some text
</div>
</div>
</div>
Question: In which color will the text show?
Answer: red.
Why? because in the case above, we call the .three element in a more specific way when we declared the red color.
check it here:
https://jsfiddle.net/wxaw3205/
The same example with more elements:
https://jsfiddle.net/wxaw3205/1/
The last way is using the !important declaration, it provides a way for You to give a CSS value more weight than it naturally has.
For the last example, lets assume that we have the same html markup of the example above, which will be the color now?
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green !important;
}
Answer: green.
Link to live example: https://jsfiddle.net/wxaw3205/2/
And just a little tip: never style the element using the style="" attribute, unless you have too! and either the !important.
Most of the time when you have to use them its because you'r stylesheet needs to be reordered.
That's all, I hope it helped you understand.
Problem
I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.
However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.
Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?
You can use LESS wich is what bootstrap uses.
Example:
#ContainerWithBootboox {
#import (less) "bootstrap.css"; //import bootstrap
}
Doc: http://lesscss.org/
If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.
So if you had
<div class="bootbox">
<!-- bootbox html here -->
</div>
and the bootbox styles were
h1 {
color: red;
padding: 0;
}
h2 {
color: blue;
margin: 10px 0;
}
Then you'd need to change it to
.bootbox h1 {
color: red;
padding: 0;
}
.bootbox h2 {
color: blue;
margin: 10px 0;
}
That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.
Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),
If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.:
.bootbox {
/*move all bootbox CSS rules here*/
h1 { color: inherit;}
.someclass { color: red;}
}
It will be compiled into:
.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}
You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.
I have phrase as Client Testimonial and i want to change only the Client i have used only first-letter but is there any method in css to change color .. no javascript please.
How about using :before?
I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :before rule:
HTML:
<div class="word">Testimonial</div>
CSS:
.word {
color: black;
}
.word:before {
color: red;
content: "Client ";
}
Example: http://jsfiddle.net/LvZt7/
As noted by others, there is (unfortunately*) no :first-word pseudo-selector available in CSS (even version 3 or 4, so far as I currently know). However, there are two possibilities that exist without JavaScript, though both have their failings.
The first, and easiest, is to simply wrap the first word in a span:
<p><span>Client</span> Testimonial</p>
And style the span with the highlight:
p span {
color: #f90;
}
JS Fiddle demo.
While this approach does require adding an extra, in this case, span element for styling purposes it is simple to implement, and works reliably cross-browser.
The second is slightly more fragile, though avoids adding the extraneous span tag, but requires, instead, that you add an attribute:
<p data-highlightword="Client">Client Testimonial</p>
With the following CSS:
p[data-highlightword] {
position: relative;
}
p[data-highlightword]::before {
content: attr(data-highlightword);
color: #f90;
position: absolute;
top: 0;
left: 0;
}
JS Fiddle demo.
This approach relies on the addition of a single attribute to a single element, but does require extra CSS and will only work in compliant browsers. Which is almost all of them, now, with only IE 8, or perhaps 9, and below proving problematic.
<p><span style="color: #c0ff33;">Client</span> Testimonial</p>
so yes, just style it with <span></span> its perfect for that kind of situations.
Edit:
This edit is not directed for the post author but for someone just learning to use css: based on "best practises" one should consider using separate .css file for setting styles in a manner like:
.client {
color: #c0ff33;
}
and using it like:
<p><span class="client">Client</span> Testimonial</p>
If you want to specify more and be certain that you only use your span style inside <p></p> you could also introduce it like:
p span.client {
color: #c0ff33;
}
Fiddle: http://jsfiddle.net/LvZt7/97/
You could also do it other way around specifying your p class and not span:
<p class="client"><span>Client</span> Testimonial</p>
and
p.client span {
color: #c0ff33;
}
or just specifying all p span html markings to have text inside span with color #c0ff33:
<p><span>Client</span> Testimonial</p>
and
p span {
color: #c0ff33;
}
You could wrap the word in a span and style it instead. As Henrik Ammer stated in a comment, there is no :first-word.
i'd recommend doing something like this:
<span class = "redcolor">Client </span> Testimonial
CSS:
.redcolor
{
color: red
}
That way if you want anything in red, just give it a div/span with that class