Changing the CSS defaults

I don’t have a specific question to one of the exercises, but I was wondering, whether it is possible to change the meaning of some of the default keywords in css.

For example the small, medium thick keywords for border. Where are they defined?

I do understand, that when you want to change those to a specific size you should define that size for a certain class or the <p> elements and so on.

But when I want to save time, can i somewhere define, that all “medium” “font-size” should be for example 24px? Then I can use that, because it is the default font-size.

Not with CSS, but you can do something like that with SASS. Keyword interpretation is implemented according to the browser specification, and cannot be overridden. However SASS allows devs to define and use variables in stylesheets that are then compiled to CSS.

If you wanted to do something like font-size: medium = 24px; in CSS, it’s totally invalid, but if you set $font-med: 24px; then use font-size: $font-med; in SASS, and compile it, every instance of font-size: $font-med; will magically become font-size: 24px;

if by “medium” font-size you mean the default size of your text then there is a very simple way. You can affect your entire document with a wildcard as such:

* {
  font-size: 24px;

That will change the font size of the entire page unless overwritten by other styles

thanks, I haven’t gotten to that yet. But then I will just wait patiently for the SASS parts. Although it still seems to be somewhat convoluted - when I then have to write font-med everytime, then I still have to think of it. My intention was to overwrite the default, so that I (and everyone else) can then just write medium and it is taken care of.

Yes thank you, I thought of that. The problem there is, that it only works for that case. I want to overwrite the default, so that I and everyone else doesn’t have to think of the styleguide or anything like that anymore after that, because it would be taken care of. But maybe I am getting ahead of myself, since I just started with Web Development.

SASS is a standalone course, found here. It isn’t a part of the CSS course, or Front-End, Full Stack, or the old Web Dev career paths. You can take it as soon as you’ve completed the CSS prerequisite, or whenever you’d like afterwards.

You might be able to use $medium as the variable name. Since the $ marks it as a variable, it seems likely medium wouldn’t be protected, it’s just that medium means one thing when dealing with font-size, another thing when dealing with border-size, etc, so if you want to change medium in other contexts, you’ll need to use different variable names.

1 Like