I want to reduce the text size of the top left slider from the linked page.It is set to H2 on default and I can't figure a way to change it. The text size is too big for it and it looks stupid. I tried with the CSS below, but it only reduces the text size, unfortunately the spacing between the lines and words stays like in H2, which doesnt look appropriate either. Please help!
.fusion-flexslider.flexslider-posts .slide-excerpt h2 a {
color: #fff;
font-size: 20px !important;
line-height: 0.5 !important;
}
It's because the <a> derives font-related styling from the <h2>
Try this selector .fusion-flexslider.flexslider-posts .slide-excerpt h2, it works for me https://prnt.sc/v52pmy
If you set the a element style to include display: inline-block the element will then use the CSS styling you are giving it (though I guess you probably want to set line-height back to normal rather than try 0.5). I have tested this on your site using browser dev tools.
The reason is (to me) a quite complex one - why it doesn't work as you might expect on inline blocks. An explanation is given at https://stackoverflow.com/questions/22816123/why-cant-you-set-line-height-on-an-anchor-element-with-a-background
I am trying to see if there is a way to conditionals a variable in my scss. The scenario being for a fallback font loader throwing a class on my body when all fonts are loaded - so I could switch out fonts.
So the idea is I have my _variables.scss file set up, and inside it has all my site fonts looking something like this -
$primary-font-family: 'Font1', sans-serif;
$primary-font-normal: 400;
$primary-font-bold: 700;
$secondary-font-family: 'Font2', serif;
$secondary-font-normal: normal;
$secondary-font-bold: normal;
This has been working great for me, but I am looking for an easy way to swap them out without added class listeners in the css to every instance where I am consuming these fonts. So I was wondering if there might be a way to conditionalize these variables -
// if .fonts-loaded class is on body, use loaded font
$primary-font-family: 'Font1', sans-serif;
// else use system default font
$primary-font-family: 'defaultSystemFont', sans-serif;
Unsure if something like this would be possible, does anyone know of a way to achieve this. Thanks for reading!
Sass would never know if something was loaded on the page like JS would.
Once it compiles, Sass becomes static CSS and doesn't necessarily communicate according to changes made on the page (beyond knowing it should style things a certain way according to a pre-defined pseudo-class.)
Also, the more we keep telling a page to "think more" - the less it benefits in terms of loading time.
Since CSS is "cascading", you can always set a default font stack such as:
.stuff {color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1em;}
...and then, lower in the CSS (possibly within a partial that's imported after the global layout, as part of the theme):
.stuff {font-family: "SuperSpecialFont";}
It will then load, as it's read, setting the default foundation and then progressively enhancing it. Sass won't ever be aware of a page's loading status, however, it will deliver style based on what's available and when - which allows you to have a fallback until everything it's supposed to present is in place.
===
According to your comment, there doesn't seem to be a reason for a conditional in this case.
Fundamental CSS would handle it with .thisClass .thatClass or .thisClass > .thatClass - depending on how strict you want to be. So, for example, in Sass:
.thatClass {
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
.thisClass {
.thatClass {
font-family: 'SuperSpecialFont';
}
}
If it's nested inside of .thisClass, then it will apply those properties. If not, it will stay as it was originally defined.
I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.
Here's another SO question about the issue.
ace editor cursor behaves incorrectly
My problem may have something to do with using a Bootstrap theme, but I'm not entirely sure.
When I open chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template is using the fonts
input, textarea, input[type="submit"]:focus, div {
outline: 0 none;
font-family: 'Open Sans', sans-serif;
}
If I add to my css
.ace-editor {
font-family: monospace !important;
}
I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.
Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.
If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works.
Going to the computed properties, is shows the font-family to once again be 'Open Sans'.
So the question I'm trying to answer, is how can I either figure out what font is ACTUALLY being used when I cancel out the textarea entry from Bootstrap? Or why is this not accepting the monospace font when it is specified.
I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.
The issue is caused by div included in bootstrap rule.
It is too broad and breaks character width measurements for ace.
You can add
.ace_editor div {
font: inherit!important
}
as a workaround. Would be good to also report an issue to the creator of your bootstrap template.
I was wondering if there is a way to give a page title a different color and font in the page tab. Something like:
title{ color: red; font: 12px tahoma;}
Just thought it would be fun to add into sites. I tried the above and it didn't work in my CSS file. Also tried giving it a class="title"giving it a CSS style of .title{ color: red; font: 12px tahoma;} but that didn't work either.
Answer is NO you cannot do that in any way....you cannot apply any styles to page title, btw you can just blink the titles
Blinking Titles
More Info On CSS Which You Are Using:
If you are declaring something like this
title{ color: red; font: 12px tahoma;}
You don't need to define any class as you are targeting specific title tag which is only 1 in your whole document
And if you are using .title than your CSS should be
.title{ color: red; font: 12px tahoma;}
The previous answers are correct, but, you can sort of get different fonts if they are defined in unicode. I don't know how to explore this, but, for example, there's the regularly written word javascript and then there's this title I coped from reddit.com/r/javascript source code: ππππππππππ - notice how they are slightly different.
Regular without code delimiters: javascript
Reddits title without code delimiters: ππππππππππ
You can copy past these characters anywhere and they are going to look different, because they are technically _different characters. There's a and then there's π - I grabbed this from the javascript word I previously pasted.
I don't know where these characters came from. I don't know how to type them. I don't know where one could copy paste them from.
But it proves an interesting point - any emoji can be used in these titles, you can copy paste from https://www.emojicopy.com/
If you are talking about the <title></title> section then no you can't style it.
If you are talking about the title of a page as in a header tag such as h1 or h2 then yes you can style those using normal CSS styling techniques such as
.title { color: #1A1A1A }
<h1 class="title">My Awesome Title</h1>
You can style the <title> tag, just add "display:block" or "display:inline" to it.
title {
display:block;
color:red;
font:12px tahoma, serif;
}
that way it should appear inside your page with the same content of the tab on the browser, for instance.
As for the Page Title, i have seen that it is possible to style it, someway. probably with shadow dom.
After applying a CSS reset, I want to get back to 'normal' behavior for html elements like: p, h1..h6, strong, ul and li.
Now when I say normal I mean e.g. the p element adds spacing or a carriage return like result when used, or the size of the font and boldness for a h1 tag, along with the spacing.
I realize it is totally up to me how I want to set the style, but I want to get back to normal behavior for some of the more common elements (at least as a starting point that I can tweak later on).
YUI provides a base CSS file that will give consistent styles across all 'A-grade' browsers. They also provide a CSS reset file, so you could use that as well, but you say you've already reset the CSS. For further details go to the YUI website. This is what I've been using and it works really well.
One of the rules in applying CSS styles is "last in wins." This means if your CSS reset styles set elements to margin:0; padding:0 you can then override these rules by declaring your desired values for the same elements afterwards.
You can do this in the same file (YUI offers a one-liner reset I think so I sometimes include it as the first line in my CSS file) or in a separate file that appears after the reset CSS <link/> tag.
I think by normal behavior you mean "the defaults for my favorite browser." Your building up CSS rules for these elements is a part of the reset exercise.
Now you might want to look into Blueprint CSS or other grid frameworks. These grid frameworks almost always first reset styles to nothing, then build up the typography for common elements, etc. This could save you some time and effort.
You mean like:
* {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
margin-bottom: 1em;
}
?
Actually, sorry I mis-read your question, you're after something more like Eric Meyer's total reset # http://meyerweb.com/eric/tools/css/reset/
Rather than using a total CSS reset, think about using something like Normalize, which "preserves useful defaults".
To find out what your browser thinks of as default, open a plain HTML file with lists and view the lists with a CSS debugger like Firebug, and look under the Computed tab.
Check out YUI (Yahoo's open source user interface conventions).
They have a base stylesheet that undoes their own reset css.
They dont actaully recommend you use it in production - since its counter productive but definitely might be worth checking out the file to get relevant snippets for what you want to 'undo'.
I recommend you watch the 40 minute talk to get up to speed.
Heres a short snippet of their base.css file :
ol li {
/*giving OL's LIs generated numbers*/
list-style: decimal outside;
}
ul li {
/*giving UL's LIs generated disc markers*/
list-style: disc outside;
}
dl dd {
/*giving UL's LIs generated numbers*/
margin-left:1em;
}
th,td {
/*borders and padding to make the table readable*/
border:1px solid #000;
padding:.5em;
}
th {
/*distinguishing table headers from data cells*/
font-weight:bold;
text-align:center;
}
Download the full stylesheets below or read full documentation.
Yahoo reset css | Yahoo base (undo) reset css
I'm personally a big fan of BlueprintCSS. It resets styles across browsers and provides some really convenient defaults (that are what you want 90% of the time). It also provides a layout grid, but you don't have to use that if you don't need it.
If you want to see the css defaults for firefox, look for a file called 'html.css' in the distribution (there should be some other useful css files in the same directory). You could pick out the rules that you want, and apply them after a reset.
Also, the CSS2 standard has a sample stylesheet for html 4.
Normal behaviour for WebKit h1:
h1 {
display: block;
font-size: 2em;
margin: .67__qem 0 .67em 0;
font-weight: bold
}
Normal behaviour for Gecko h1:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}
The rest of the elements should be there if you search the files.
"After applying a CSS reset, I want to get back to 'normal' behavior for html elements..."
If you've applied a reset, you would then have to add the rules for what you believe to be normal behavior. Since normal behavior varies from browser to browser this question is something of a non sequitur. I like #da5id's answer - use one of the many available resets and tweak it to suit your needs.
Once you have assigned a value to a CSS property of an element, there is no way getting back the βnormalβ value for it, assuming βnormalβ means βbrowser defaultβ, as it seems to mean here. So the only way to have, say, an h1 element have the browser default font-size is to not set the property at all for it in your CSS code.
Thus, to exempt some properties and elements from CSS reset, you need to use a more limited CSS reset. For example, you must not use * { font-size: 100% } but replace * by a list of selectors, like input, textarea { font-size: 100% } (the list could be rather long, but e.g. browser defaults for font-size differ from 100% for a few elements only).
It is of course possible to set properties to values that you expect to be browser defaults. There is no guarantee that this will have the desired effect on all browsers, current and future. But for some properties and elements, this can be relatively safe, because the defaults tend to be similar.
In particular, you might use section Rendering in HTML5 CR. It describes βexpected renderingβ β not a requirement, though browser vendors may decide to claim conformance to them if they so wish, and generally this will probably keep implementations rather similar in this respect. For example, for h1 the expected settings are (collected here into one rule β in HTML5 CR they are scattered around):
h1 {
unicode-bidi: isolate;
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-size: 2.00em;
font-weight: bold;
}
(There are additional contextual rules. E.g., nesting h1 inside section is expected to affect the settings.)
I'm not resetting all the elements by default because the default styles are somehow browser depended, so they varies from browser to browser. Instead of using something like ul, ol { list-style: none; }, I'm adding a CSS class like r or reset and then I specify that if that is a ul which has a r class, reset it or otherwise please leave it to be untouched.
By the way you need to add class="reset" (for example) to all of those elements, which is extra work and code, however you'd have all of your default styles untouched at the end in return!