trying to change the font of this link
<a class="navbar-brand text-uppercase" id="TopBrand" href="#Console"> Console System</a>
Whats the proper css for this?
???
a:link#TopBrand{
font-family: 'Revalia';
font-size: 12px;
}
The below solution which you've provided does work. However, there are also other options with which you can take.
a:link#TopBrand{
font-family: 'Revalia';
font-size: 12px;
}
Example:
you could use the declared id of TopBrand to target that specific anchor ( a ) element like so:
#TopBrand{
font-family: 'Revalia';
font-size: 12px;
}
or if you want to apply the CSS rules to all anchor ( a ) elements then use this:
a{
font-family: 'Revalia';
font-size: 12px;
}
EDIT
My problem was the position I had it in the link. OK so using
google fonts does it belong at the bottom or the top of my head links?
Before or after Bootstrap css and or my own custom css? I've seen
examples both ways!
Typically, placing it at the bottom of the head element should do the job.
Related
I have seen conflicting information about how to use a master style sheet and have experienced some bugs when testing methods. Just want to get clarification on the proper way to do this.
I would like to store cross website branding styles in a master global.css sheet and make page specific adjustments on a second .css file.
For example, this code would live on the master sheet:
#headline1{
font-family: 'Roboto', sans-serif;
font-size: 96px;
letter-spacing: -1.5px;
}
and this code would be page specific:
.headline {
color: #FFFFFF;
text-align: center;
}
I have recently read something that said you should not use ID in this manner. I've also run into issues when using it multiple times in the same grouping. I initially tried doing this using just classes instead of the ID, but it never worked. Not sure why.
Is this method considered proper? If not what is the proper way to do this?
If you create a master.css with:
.headline {
font-family: 'Roboto', sans-serif;
font-size: 96px;
color:#000
letter-spacing: -1.5px;
}
You can build upon/replace it per page as long as your custom css comes after the master.css
.headline {
font-size: 45px;
color: #FFFFFF;
text-align: center;
}
Quick example of a page:
<link rel="stylesheet" type="text/css" href="master.css"/>
<style>
.headline { //
font-size: 120px; // size overides master
color: #FF0000; // color overides master
text-align: right; // added alignment, which is overiding the browsers base css
}
</style>
I'm not sure if this is quite what you are looking for, but I hope it helps
In the example you provided a can only assume you have something along the lines of:
<div id="headline1"><span class="headline">Title</span></div>
This would basically mean any style applied to the div, the span would inherit unless told otherwise.
To further expand on this, you can also use inline styles <span style="color:#FFF"> which will dominate any other styling UNLESS an !important; has been added to a style element.
I built a website with a WYSIWYG website builder using a template provided by the program. I have since abandoned the template and use CSS to style everything, but for some reason I cannot change the default text color of the whole site.
I thought that simply changing the body color in the CSS would change the default color:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #ff9900;
background-color: #750204;
So I tried changing the color: #ff9900 to "b6b6b6" but that didn't work.
Then I literally replaced every instance of ff9900 in the CSS file to b6b6b6 and still the website shows the color ff9900. I don't get how that's possible.
Obviously I don't really know what I'm doing so be gentle. Thanks for any advice.
EDIT: here is what I see when I inspect the live page:
Why your code is not working
Although your code logically is correct, you must take into account how CSS works, especially in how it sets styles. If you have a certain element with that has color: blaa;, then it will always set that after what it inherits. So when you use body {blaa...}, you will only be able to see the results if nothing else later on overrides that. Here is a diagram to show you this:
For an element with the ID of "ID" in something like: body > nav > #ID then the styles will be applied like this:
BODY STYLES:
NAV STYLES
#ID STYLES or .CLASS STYLES
* STYLES
In this, if you specify a rule like: body { color:red }, and then #id { color:blue } then the color will be blue as it is the latest out of the 2 in the list above.
Why dooj sahu's answer has been down voted
This is because !important is not the best to use when there are other ways to go without it.
The way to do it
The best way to solve your problem is by using;
* {
color: #b6b6b6
}
* {
color: #b6b6b6
}
If you are begineer, i add a precision:
"*" target entire website, you can change background-color for example and whatever property you want.
Simply use !important:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #b6b6b6 !important;
background-color: #750204;
}
On this website, I'm unable to remove the bold property from the bold text (text starts with "Conforme o art. 43...").
What is most intriguing is that the font-weight command below applies normally to all parts of the referred site, except for the bold part.
I'm using the following code in Stylebot (Chrome Extension):
div {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
How can I get this done? Thanks in advance!
Please let me know if this is what you are looking for.
div > * {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
or
* {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
Edit: Maybe this is more what you are looking for->
.q-question-enunciation > span{
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
The text you are referring to ("Conforme o art. 43...") is inside a span tag that has an inline style style="font-weight: bold,".
An inline style like this will override every CSS rule that you define in an external style sheet or in a <style> tag inside the header of your page, so you need to
...either erase this style tag in the HTML code (if it's actually there), or
...if it's not there, it's inserted via javascript. So you need to find out which javascript inserts this code into the HTML code and erase or deactivate that code.
EDIT / Additional note: The code of the answer which you just accepted will apply that CSS rule either to all direct children elements of any div or (second option) even apply it to all elements in your page. I strongly doubt that you want either of this, since most likely your pages will consist of more than what you showed us...
i'm relatively new with this stuff, but i can't seem to figure out why the size isn't formatting?
CODEPEN: https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 4rem;
font-weight: 200;
text-align: center;
}
It's because you have written the link tag inside the HTML section of the codepen.
To add any external css make use of GearIcon on the CSS Section and add the links there. Doing so, make the libraries get added on top of the webpage and your css written in the CSS section can override those styles.
Just as Josan already commented: There is a rule for ".jumbotron p" in bootstrap CSS defining "font-size". To make your CSS override that, link your external style sheet after bootstrap.
So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.