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...
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'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.
A webpage I'm working on for a client www.afterthemagic.com (slightly NSFW) looks OK in Firefox & IE but I can't for the life of me make it look properly in Chrome or Safari. I'm trying to mess with different variables the following element in style.css, but can't seem to get it to go.
#banner-text .left span {
font-size: 96px;
font-style: normal;
text-transform: uppercase;
position: static;
}
Any pointers on how to get the "THE" text to look fine in Chrome or Safari?? Thanks!
I would argue that you're going about this layout incorrectly.
Semantically speaking, you shouldn't be combining your H1 heading with the 'begin reading' link.
Your heading, 'begin reading' and author subsections should be floated and styled independently. Otherwise, I'm not sure what you mean by 'look properly'. Your h1 heading has a font-size of 200px, and your h1 .left span has a font-size of 96px. If you're referring to the text alignment, try:
#banner-text h1 .left span {
display:inline-block;
margin:0 0 10px 0;
font-size: 96px;
font-style: normal;
text-transform: uppercase;
}
Play with the margins until you get the alignment you're looking for.
This is a good resource to better understand the CSS 'display' property:
http://css-tricks.com/almanac/properties/d/display/
in Aptanastudio 3 . the CSS formatter formats like this :
H1 {
color: white;
background: teal;
FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif;
FONT-SIZE: 18pt;
FONT-STYLE: normal;
FONT-VARIANT: normal
}
I´m trying to edit it to write the code like this (all in one line) :
H1 { color: white; background: teal; FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 18pt; FONT-STYLE: normal; FONT-VARIANT: normal}
under the CSS formatter options, i can edit the spaces between commas, semikolon, e.t.c. .. but i cant find how to edit the code to look the way i want it.
When you type H1 {} instead of hitting enter when it auto completes the curly braces just start typing your rules out. Also don't rely on (or use) the auto formatter. With rare exceptions (Aptana not being one of them, I love Aptana for web applications and use it every day) auto formatters for code will not do exactly what you want them to.
I strongly advise against writing your css the way you desire. The first way is much easier to read. Also most hosting solutions and even a lot of frameworks (like Rails for example) will minify your code for you. And even if your's doesn't you can minify it yourself pretty easily.
When developing: 'readability = maintainability' which is always of greater value then a few saved bytes here and there.
I'm trying to use Bootstrap inside a sharepoint site. Unfortunately the CSS styles are applying to the template's HTML which is messing with the design a fair amount.
I know that everything I want affected by bootstrap is within #s4-workspace - does anyone know any CSS tricks I can use to apply bootstrap only to children of that element?
I'm not beneath shudder recompiling the LESS code encasing it like so:
#s4-workspace {
#import "reset.less"
// etc
}
But, naturally, I'd like to find a better solution if I can. That particular approach also doesn't seem to work.
I cannot alter the CSS of the Sharepoint master site.
Any advice welcome!
Thanks,
The only real way of doing this is by using iframes or jQuery, if you want to apply only specific elements of the bootstrap perhaps edit the CSS rules so they apply to a different ID/Class.
For example, where it says body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
In the bootstrap.css file simply change it to read .bootbody(or#bootbody) {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
Joseph Silber said it better in this question.