Video Transcript:
Hello and welcome to CSS Videos.com. My name is Ashton Sanders I’m going to explain the CSS Property: Font-Weight.
Font-Weight is the CSS property to make text bold or not bold.
(You would think this is the most simple, straight-forward CSS property, but it’s not. In this case, it is a bit more complicated than it needs to be, giving you just a bit more functionality than you’d expect or think you’d need. The bad news is that some browsers don’t currently pay attention to this extra functionality.)
CSS Font-Weight has the values you’d expect: “bold” and “normal”, and honestly, that’s all you really need to know, but here’s the…
CSS Bold Details
CSS Font-Weight also has a sliding scale of not-bold to bold. It starts at 100 (not bold) and increases by increments of one hundred up to 900 (bold). At this point almost none of the modern browsers care about this sliding scale, but maybe one day, you’ll be able to accurately make your text just a little bit bolder with font-weight: 300. Until then, 100 to 500 count as not bold and 600 to 900 count as bold.
(There is also a “lighter” and a “bolder” value, but it might as well be “normal” and “bold” for all intensive purposes.)
Below this video, I’ll show each of the CSS font-weight (CSS bold or not bold) values in effect (and in two fonts) so you can see how each one looks in your browser (and in this video, I’ll show you what the font-weight values looks like in Firefox 12):
Font: Trebuchet | Font: Arial | ||
normal | bold | normal | bold |
lighter | bolder | lighter | bolder |
100 | 600 | 100 | 600 |
200 | 700 | 200 | 700 |
300 | 800 | 300 | 800 |
400 | 900 | 400 | 900 |
500 | 500 |
You’ll also notice in some browsers (including FireFox 12) that Font-Weight 800 and 900 for the font Arial changes from “Arial Bold” to “Arial Black”.
The final possible value for CSS font-weight is “inherit” which acts as all other inherit values: allowing your element to inherit its bold or not bold state from its parent element. (This is what all elements do on default.)
That is the long winded explanation of how to bold text with CSS.
Thank you for watching, and please subscribe in the left sidebar if you want to get notified when I post new CSS Tutorials. There are advanced CSS Videos in the works, so stay tuned!
Ashton Sanders
CSSVideos.com
“to inherit it’s bold or not bold state from it’s parent element.”
Both it’s’s should be just its. It’s arbitrary but that’s the way English does its thing, here acting as a kind of secret-handshake of the cult of grammarians.
Thanks.
Looking forward to more CSS tutorial videos!
You misspelled “functionality” in the video 🙂
Doh… Thanks.
Great site Ashton! I’m learning alot! let me know when you post more vids! Happy Holidays!
Matt