I can't figure out the way how can I change font color of h1 to pre-defined class text-primary. Is there any way that I can assign text-primary to h1 class?
something similar to this:
h1 {font-size: 28px !important;
font-weight: normal;
color: text-primary;
}
just add that class to h1
<h1 class="text-primary">your title</h1>
Is text-primary a class? If yes:
.text-primary, h1 {
...
}
You can add it to class attribute inside h1 tag as in below way :
<h1 class="text-primary">Some heading</h1>
It depends whether you use LESS and Bootstrap's LESS sources or not.
You have to search for the definition of the style of class text-primary in Bootstrap's sources. If you use LESS, you will want to look in the LESS sources, otherwise in the resulting complied CSS sources of the Bootstrap frame work.
In LESS in v3.3.4 the style is:
.text-primary {
.text-emphasis-variant(#brand-primary);
}
Copy that style into your h1 style and compile again:
h1 {
font-size: 28px !important;
font-weight: normal;
.text-emphasis-variant(#brand-primary);
}
The mixin text-emphasis-variant creates several style rules. You do not have to take care about it because LESS does it for you.
If you work with CSS directly, you simply search for the style definition of text-primary in the CSS and copy all styles to your h1 style definition.
Related
I'm finding very random when I can or cannot override Bootstrap classe/ id with a custom .css
For example, to change default navbar-dark, Background and font-style overriding is acceptable.
But font colour and size cannot change unless I force a change applying "style" inside of element or as an "id" linked to an external css file.
What does not works:
<nav class="navbar navbar-dark"style="background: red; color:
yellow; font-family: cursive font-size: 50px;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Applying style on element works, such as:
<nav class="navbar navbar-dark"style="background: red; font-family:
cursive;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Being able only to use id inside of each element becomes a problem when I have a big navbar and I want to apply a class to all of them.
What can I do to customize or how can I learn about those limitations?
Thank you :)
Well it depends if the color style is set in Bootstrap on parent element and then it descends or it is set directly on child... And it is set on the child... so you need to set it directly on that child.
But use CSS, or LESS, SASS etc.. dont use inline classes, set it globaly for all children you want to target.
Like that:
.navbar-dark .navbar-brand {
color: yellow;
}
The problem you are facing is directly related to CSS Specifity. CSS specifity applies when there are two or more conflicting CSS rules that point to the same element.
The specifity of the CSS rules determines which one of the conflicting rules will aply to your html element. In general, more specific CSS rules go over less specific ones. This is, from more specific to less specific:
Inline styles: styles defined in the "stype" attribute, inside the html tag.
ID: a CSS rule that references an element by its id instead of a class (for example #navbar).
Classes, attributes and pseudo-classes: most common css rules. In example:
.blueBackgroundClass {
background: blue;
}
Elements and pseudo-elements: usually only used to make site-generic styles, such as:
p {
font-family: "Times New Roman", Times, serif;
}
a {
color: blue;
}
For more information about it I strongly recommend you to see the CSS Specifity documentation.
I have the following problem:
I have a font with a given style in a css class:
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
And now I have a css that gives me the size of a div in a given situation:
.a_div_test {
width:300px;
max-width:350px;
}
I want the a_div_test to have the properties of the font_arial_36, like an inheritance.
Somethin like (this is wrong just posting what I wanted):
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}
and now the .a_div_test should also have the font_arial_36 properties.
Is it possible with css?
PS: I do not want to add multiple classes to an Html Element like that:
<div class="font_arial_36 a_div_test"></div>
Because I should rewrite my code in many places where .a_div_test appear.
This is not possible in CSS. What you do is you assign the 2 classes to the element you want.
<div class="font_arial_36 a_div_test"></div>
CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.
That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.
That is, the inheritance is defined by the HTML structure, not the CSS itself.
why you need to extend when you can add multiple classes with space on HTML element.
<div class="font_arial_36 a_div_test">Like this</div>
As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:
<button class="uiButton disabledButton">Click Here</button>
For below CSS:
.uiButton {
background-color: gray;
color: lightgray;
font-size: 20px;
font-family: "Segoe UI", Helvetica, sans-serif;
text-align: center;
text-decoration: none;
padding: 10px 10px;
border:none;
display: inline-block;
margin: 5px 5px;
cursor: pointer;
}
.disabledButton
{
background-color: gray;
color: lightgray;
cursor: not-allowed;
}
In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).
But, there is a better way:
Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide
Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).
if you don't want to add multiple classes to html element then
.font_arial_36, .a_div_test {
font-family:Arial;
font-size:36px;
}
.a_div_test {
width:300px;
max-width:350px;
}
other than this no other possible way seems to be there for inheritance in css, we have to use sass
So I have been pondering about this and I don't think this exists. I also understand that my logic my be counter with what stylesheets are trying to accommodate, but let's give it a go:
Take the following example:
// Example "template style"
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
So let's say I want to add that to my footer I would in my HTML go:
<div class="blue_bold" id="footer">
// Content goes here
</div>
This is perfect, but what if I want to add that element to a number of my elements. Say I want to add it to my navigation as well, I would then have to add that class to each element:
<div class="blue_bold" id="navigation">
// Content
</div>
....
<div class="blue_bold" id="footer">
// Content
</div>
My question is, as appose to declaring it via a class or style, is there no way to "attach" the style to another style within my stylesheet? (as example:)
#navigation, #footer {
attach_style(".blue_bold");
}
That way I can minimize my code by creating "base styles" and then attach those styles to individual styles within my stylesheet? This is again just a question, not something I wish to impliment, but I figure that given the above it would be a "nice to have" for people working with say brand guideline documents and want to attach specific styles to individual styles without going to the html to do it.
Any ideas? Does this exists?
You can't do it with pure CSS. You'll need to use LESS, or SASS/SCSS to generate your CSS.
Syntax examples here :
LESS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
.blue_bold;
}
SCSS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
#extend .blue_bold;
}
you will need to have a look on sass or less they are your best options.
sass here
less here
You can use sass or less but a more basic slight workaround is just to list the elements in your css like so:
#navigation,
#footer,
.some-other-element,
.another-element
{
// css styles go here that you want to apply to each element listed above
}
Can't see any benefits. What you're asking for is not a standard CSS.
You can define this for all elements with class blue_bold
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
For this block
<div class="blue_bold" id="navigation"></div>
You can simply add another declaration like this:
#navigation, #footer {
background: black;
color: red;
}
Everything from .blue_bold will be used unless overwritten. What's wrong about it?
Given a css file, is there a way to scope the entire file so that it only applies to elements within a given element:
e.g. given:
<div id="container">
<span class="some_element"/>
<!-- etc -->
</div>
Is there a way to scope an entire css file to apply to all elements within "container" without prepending #container to every single css clause?
I’m afraid not. Some CSS pre-processors allow you to write code that achieves the same thing though.
E.g. LESS implements nested rules:
/* This LESS code... */
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* ...produces this CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
And Andy mentioned SASS, which does the same thing.
You can use the scoped attribute on a <style> element, although there's little to no browser support for it. In your example:
<div id="container">
<style scoped>.some_element{}</style>
<span class="some_element"></span>
</div>
Here's a jQuery Polyfill: http://thingsinjars.com/post/360/scoped-style/
There are 2 ways you could approach this:
1) In HTML5, (not widely supported yet) there is to be a scoped attribute you can put on a <style> tag. Here is a brief article on the subject.
2) You could use a dynamic stylesheet language (like LESS or SASS) that allow you to nest related CSS rules together.
Not with CSS alone, but you can use Sass, which compiled into CSS.
You could use BEM naming notation -- http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ ("block, element, modifier").
Your example would become:
<div id="container">
<span class="container__some_element"/>
<!-- etc -->
</div>
Yes, if you don't use an abbreviation, you're writing the same number of characters in your CSS... but your styles will have less specificity -- which can be beneficial.
Hopefully browser support for <style scoped> will get better in the coming years!
You could load the page in with php and throw whatever tag you want in dynamically, or do the same with javascript/jQuery... although that's fairly clumsy. There's no built in method to do this as CSS is always applied to the entire page.
I have only a basic knowledge of css, is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags.
The reason I want to do this is to make it easier to maintain multiple styles.
You can define common styles for two elements at once like so:
p, a {
font-size: 1em;
}
And then extend each one with their individual properties as you want:
p {
color: red;
}
a {
font-weight: bold;
}
Keep in mind: Styles defined later in a style sheet generally override properties defined earlier.
Extra: If you haven't already, I recommend getting the Firebug Firefox extension so you can see what styles the elements on your page are receiving and where they are inherited from.
No CSS doesn't have any way to inherit styles. But there are several ways you can share styles. Here are a few examples:
Using multiple classes
<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>
p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Use the comma operator in your styles
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Using container elements
<div class="container">
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
</div>
div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
None of these are exactly what you are looking for, but using these techniques will help you keep CSS duplication to a minimum.
If you are willing to use server side code to preprocess your CSS, you can get the type of CSS inheritance you are looking for.
http://wiki.framwurk.org/documents:csspp/
http://mail.python.org/pipermail/python-list/2006-August/397266.html
http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer
Yes.
You should understand how the cascade in CSS works, and also understand how inheritance works. Some styles will inherit (like the font face) and some styles wont (like the border). However, you can also tell styles to inherit from their parent elements inside the DOM.
Of some help here is knowledge of how style rules are specified. This site about the CSS Specifity Wars might help (Note: this site is currently down, but hopefully it will be back soon).
Additionally, I find it sometimes helps to overload styles like this:
h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...
"...is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags."
The link tags will automatically use the fonts from the paragraph, if, and only if, they are within a paragraph. If they are outside of a paragraph (say in a list) they will not use the same font, etc.
For instance this css:
* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }
will generate links and paragraphs that are sized at .75em. But it will display links within paragraphs at about .56em (.75 * .75).
In addition to the specificity reference cited by Jonathan Arkell, I recommend the CSS Tutorial at W3Schools.
CSS will automatically inherit from the parent style. For example, if you say in your body style that all text should be #EEE and your background should be #000 then all text, whether it’s in a div or a span will always be #EEE.
There has been quite a bit of talk about adding inheritance the way you describe in CSS3, but that spec isn’t out yet, so right now we’re stuck repeating ourselves quite a bit.