I am aware than ID rules are faster than class rules, which are faster than tag rules, which are faster than universal rules, as noted on MDN. My question pertains to CSS performance with respect to inheritance. For example, which of the following is more efficient?
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
or
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
.article-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
While there is only one <body> tag in the DOM, there could be hundreds of p.article-text elements. Since there is only one <body> tag, does that mean that a <body> style is more efficient, even though I'd be restyling the <h1> elements? Or is it more efficient to style the .article-text elements, since doing so would use a more specific selector and I wouldn't need to worry about restyling the <h1> elements?
Always wondered this. Thoughts?
I think that the MDN article you showed is written in a harmful way, as it proposes to focus on CSS micro-optimizations while almost always page speed can be increased in different ways (eg. Google Page Speed has interesting hints).
I can't remember any situation in my websites where CSS was a bottleneck. You might want to see "Timeline" in Chrome Developer Tools on some pages and notice that the amount of time spent on working with styles is usually insignificant compared to other events.
If I was to give advice, I'd rather go the other way and use CSS preprocessing tools like SASS or LESS to improve maintainability. This might even eventually help to reduce number of rules.
As mentioned by steveax. It's not worth worrying about.
Moreover, the answer really depends on the browser and on the HTML actually given.
i would say the top one is probably faster out of the two but tbh like everyone has said with the browsers we have ATM and devices and connections speeds you wouldn't notice a difference unless you have a huge site that has more than 40 - 50 pages that's when you should look into slim lining your code
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm facing a problem in changing the font size of the h1 tag with CSS. I have set the size to 4rem, but it doesn't change.
When I inspect the element in the dev-tools, h1 is showing font-size: 2.5rem;:
And the h1 title ("Meet new and interesting...") font size looks like this:
But I want the h1 tag to be bigger, like this:
I got that screenshot by editing the h1 CSS manually in dev-tools:
Why is my CSS for h1 not showing up automatically?
Code for CSS
#title {
background-color: #ff4c68;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 4rem;
Line-height: 1.5;
}
.container-fluid {
padding: 3% 15%;
}
Nenad Milosavljevic's answer is right, and I am just adding an explanation.
You might be having a CSS file in your HTML file which is overriding your internal CSS. To override that one, you need to put !important to your properties.
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 4rem !important;
Line-height: 1.5;
}
h1.hadeline {
font-family: 'Montserrat', sans-serif;
font-size: 4rem !important;
Line-height: 1.5;
}
<h1 class="hadeline">Meet your new and ....</h1>
Try to use !important:
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 4rem !important;
Line-height: 1.5;
}
While OP accepted Lokesh's answer about using !important, and others answered the same, you should treat any time you want to use !important as a code smell that you might be not playing the CSS game correctly, fighting against your other styling.
Simple specificity is better than !important
#Ashtrix is correct that increasing specificity is better than the !important sledgehammer — you can see in dev-tools that the matched CSS rule is single specificity h1, .h1, so even a single added class would make your rule be selected.
And the truth is, you are not looking for a standard h1, where all the h* sizes are proportionally bigger than the next one. So make a style h1.huge or something like that.
Not fighting against your styling library is even better
But even then, you'd be fighting against the styling library you're using!
I think you should pay attention to #Ashtrix's point about
Seems like you have an external library Reboot that is taking over the styling.
The first search hit for "reboot css" leads you to https://getbootstrap.com/docs/4.0/content/reboot/, which mentions "responsive type-scaling". If you set 4rem manually, you've lost any responsive scaling, that is to say: the library styles h1 smaller on phones than on desktop, which is a good thing.
So you need to ask the documentation, "How do I make a really big title font-size in this styling library?
And the answer is as simple as
Click on the Typography link in the docs
Skim the docs page to see its options for font size
There's 3 options that it presents to you:
Increase the whole font size by changing $font-size-base. I do not think this is what you want.
Use the Display headings class, and adjust its styling if you want. This is targeting exactly what you're looking for:
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading
Make your manual h1.huge, but make it responsive. There's a concrete example in the Responsive Typography section
It seems like you have an external library, Reboot, that is taking over the styling. You need to increase the specificity of your tag.
<h1 class="title">Meet your friends</h1>
h1.title {
font-family: 'Montserrat', sans-serif;
font-size: 4rem;
Line-height: 1.5;
}
You can also use !important, but it is not considered a good practice, at least in simple use cases like this one where adding a class will suffice.
I've been having this problem for a while now, but I notice a lot of websites seem to have a very ... it is hard to explain, their fonts have a sort of "strength" to them. Like a bold, crisp, sharp definition. For example, I cite this page:
CSS-TRICKS
The way it looks comes out beautiful; Even the image that I embedded here does not do it justice. Spending time, I traced the exact font, exact settings, EXACT everything - I tried to reproduce it, but I get a COMPLETELY different result, even in the same browser.
Using the same font, same size, same everything I know of to match, this is how it looks on my end.
The specific code I am matching is the font, sizing, weight, and line height; which is;
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
I have attempted to dig deeper, and using FireFox I found a bit more context, I tried emulating that as well with some more specific code it serves up; Which is...
#font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
src: local("Noto Sans"), local("NotoSans"), url("http://themes.googleusercontent.com/static/fonts/notosans/v4/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
But that continues to deliver the same results.
This is true of almost every time I have ever tried to reproduce that crisp feeling from production websites - and I literally have no idea what is going on. Can anyone explain to me why my fonts never match up with these sites, even using the same code?
Using Firebug, can you confirm that the #import CSS is actually being fetched over the network?
Here's what the Firebug console looked like for me when I tried this in a simple test page that rendered the font just fine on my system: (I'm not allowed to post images yet but you can see the screen shot here: http://i.imgur.com/PW8nU3L.png)
Here is the HTML I was testing with:
<html>
<head>
<style type="text/css">
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
</style>
</head>
<body>
Hello, world
</body>
</html>
The other thing you might want to check is if it's browser-specific, i.e. does this work okay with Chrome?
I was searching here and in Google for a couple of hours but I could not find any clue on my issue, or I found some answers with non stable or poor supported solutions.
To make it short and clear I have a web page with a menu bar, where I use a condensed font from "Google Web Font":
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin">
Then I have a CSS like this:
.menu {
font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-size: 23px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
What I want to do is to have font-size: 23px; assigned to font-family: 'Yanone Kaffeesatz' and font-size: 18px; assigned to font-family: 'Trebuchet MS', etc for the others.
Why I want to do that? Because if the user is offline or is unable to download the font from http://fonts.googleapis.com the layout get messed up, because 23px is right for the condensed font 'Yanone Kaffeesatz', but is very large for the others (almost the double in width).
Is there a way to do something like this? (just to explain the concept)
font-family: 'Yanone Kaffeesatz'[size:23px], 'Trebuchet MS'[size:18px], Arial[size:20px], Helvetica, Sans-Serif;
Sass can't really help here since it doesn't actually run on the client. Sass simply compiles into CSS. Also, I'm pretty sure there's no real way to get CSS to set various font-family/size pairs either.
I know this doesn't really address your "with the same class" bit, but as far as I know, the best way to do this is going to be JavaScript, which is pretty unfortunate because setting typeface/sizing pairs is something more people should do. David Walsh wrote an article about the Google Fonts API and mentions some of the methods the JavaScript font loader provides.
By defining an alternate body class with the non-webfont styles, you can use the inactive callback to fire off a function to apply that class.
There are methods of doing what you're asking, but not reliably, and not with Google Webfonts, since you have no control over the request made to Google's server.
You can try it with Sass, a CSS pre-processor. Sass provides the conditional implementation of CSS styles.
Here's:
Conditionals & Control Structures
https://gist.github.com/chriseppstein/674726
This question already received answer on SO. For example:
css different font sizes on different families
Specifying different font-sizes for different font-families
Assigining different font-size per each font in one font-family
In addition, there are several external references like:
Specifying different font-size for different fonts in a font-family
Setting Multiple Font Values
Hope these help :-)
I'm having trouble with some CSS.
Currently I'm using #fontface which works fine and dandy.
However for the times that it doesn't I have implemented other fonts to be read however I'd like to style them all a bit differently.
For an example, if Rockwell is displayed I'd like the font-weight to be set to bold. But not if it is Times New Roman.
Furthermore, I'd only like the "letter-spacing: -4px;" to apply if Times New Roman is being displayed.
Is this even possible? And if so, please assist with some code.
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }
You have expressed yourself clearly, don't worry.
I do not think there is a direct solution, however in some cases you can use this workaround.
Embed font.
Detect if you succeed (http://www.lalit.org/lab/javascript-css-font-detect/)
If yes/no add to <html> class="fontName" attribute.
In CSS add special declarations, like .fontName body { font-weight:bold; } - be prepared it means a lot of work. Especially with bolding - keep in mind how does <strong> will look like.
Good luck ;)
As every workaround it has some issues - like JS availability and so on. Maybe it will work for you.
What you are trying to do is definitely possible. In order for your script to work as you have it written. You need to follow the steps below:
Upload the font to your CSS directory (if thats where you want to host the font). (You can't just call the ChunkFive font without uploading the font to the directory your CSS is in based on your code)
Specify the #font-face above all your other CSS styles where you plan on using the font.
#font-face {
font-family: "ChunkFive";
src: url('chunkfive.ttf'); // Or whatever the font name is
}
Once you have accomplished steps 1 and 2 you can then call your font like you specified above :
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia}
For a more definitive guide into font-face and CSS3 fonts I suggest reading this very thorough and informative blog post:
http://webdesignerwall.com/general/font-face-solutions-suggestions
Cheers and goodluck
Use two classes, one for each font
.font1 { font-family: 'Chunkfive'; font-weight: bold; }
.font2 { font-family: 'Times New Roman'; letter-spacing: -4px; font-weight: normal; }
Then in your HTML, use them like
<h1 class="font1">...</h1>
<div class="font2">...</div>
Is using more than one
<strong>
tag actually make the word stronger?
i.e. is
<strong><strong>abc</strong></strong>
stronger than
<strong>abc</strong>
?
I'm asking this because if you view the HTML source of the official website of North Korea,
http://www.korea-dpr.com/ you will see it has many strong tags. Is this supposed to be something like an IE hack?
Thanks in advance.
Yes, you can nest strong tags and the more you nest, the stronger it becomes. Although I'd say beyond 2-3 nested is extraneous.
The relative level of importance of a
piece of content is given by its
number of ancestor strong elements;
each strong element increases the
importance of its contents.
Source: HTML 5 spec
Some modern user agents will apply font-weight:bolder; to strong, though since it's already bold you won't really notice a visual difference. If you want, you can apply a rule such as the % so nested strong elements become larger, as indicated in the other answer.
Some screen readers might dictate the word out more loudly.
Seems like JAWS/Window Eyes screen readers don't indicate importance, according to this.
Theoretically, I think it could be made to do this with a relative CSS declaration like such:
strong { font-size: 120%; }
<strong> is a semantic tag, as all HTML tags. It don't say that that word is bold, but that have a strong emphasis. You have to use CSS to style the element.I suggest you to read this CSS Property: font-weight and the whole website.
Anyway usually web fonts don't have more than one level of "boldness" so you have to denote emphasis in another way (font size, color, etc...)
Like other have said, use a percentage if you want each nested one to make it even larger. If you want (I don't know why you would) to control explicitly how many deep you can go and what other attributes that entails, then you could also say
strong { font-weight: 100; }
strong strong { font-weight: 300; font-size: 1.1em }
strong strong strong { font-weight: 500; font-size: 1.1em; color: red; }
edit: by percentage, i meant to use font-weight: bolder... not percentage font-weights (which I'm not sure are supported)
I don't think nesting <strong> tags will make it stronger.
Edit Guess I was wrong about nesting bold tags make the font stronger based on other answers.
I would recommend using CSS with class names instead of <strong>. The CSS font-weight property offers a variety of options that you can use to incrementally bold a word
.strong
{
font-weight: bold;
/* Other options bold, bolder, lighter, normal, 100...900 */
}
.stronger
{
font-weight: bolder;
}
.strongest
{
font-weight: 900;
}