Arrangement of font shorthand in css [closed] - css

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 months ago.
Improve this question
Why should the shorthand for font property be in this sequence?
font: font-style font-weight font-size font-family
Why should the style and weight come before the size?

The answer might not be what you're looking for, but it is an answer nonetheless.
The reason why is because that is how the specification defines the font property.
Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
The specification states that font-style, font-variant, and font-weight must come before font-size.
The specification further states:
The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.
So, while many short-hand properties typically only require a specific order when the values are of a similar type, the font shorthand is defined in a specific order because they wanted to keep consistency with how other applications and software had defined font properties.

Related

Overriding Bootstrap variables vs overriding classes [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
What's the benefit of overriding Bootstrap SCSS variables vs just overriding Bootstrap's CSS class rules?
For example,
Overriding variables:
$custom-font-size: $input-font-size;
Overriding class:
.someClass {
font-size: $input-font-size;
}
For one, duplication of output. If you override classes then that will mean that in your CSS you'll be including both the Bootstrap definition and the overriding definition. Not ideal, so on a smaller scale this works fine.
But on the bigger scale though, overriding potentially hundreds of classes (if not more) will be both a waste of resources for any end users (since there will be more data to download) but also a waste of time because you have to go and find every single instance where you want to override the use of that variable. Changing just the variable once will change every instance of where that variable is used, and you don't get the extra output. A win-win.

Is it a good idea to use monospace font in html forms? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
The textarea is in html styled as font-family: monospace; If I wanna have consistent appearance I apply this also for my text inputs.
For me it looks like good. But the question if it's "correct"?
Cause on the web it's usual to use for presentation (= what is on the screen style) some sans-serif font.
This monospace actualy have these little ends of letter similar to serif, which is better for printing (=>beter on paper).
So back to my question: Is the use monospace in this case in accordance with the customs of the Web or is it a mistake? I mean something that is good in this case to use?
"Good" is whatever you want it to be. Think about two things:
your user.
Does your choice of font make their life easier (more readable etc)?
your 'brand': do you want this to be your "look"?
There is no right or wrong answer - except "it depends".

CSS selector notation [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
maybe a silly question but as far as I like standards I'd like to know, how should we write CSS selectors:
.my-selector-for-div (breaks)
.mySelectorForDiv (camel case)
Is there a standard which of those ( or any other ) should be used ?
Here is a website of css name convention (with examples):
http://www.realdealmarketing.net/docs/css-coding-style.php
There are some interesting articles about code formating (about CSS and BEM methodology):
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
I'd go with matching the language. In CSS' case it uses hyphenation regularly so for selectors I would also use hyphens even though I personally find them ugly.
Not sure if there's a proper style guide for them though.
edit: Can I use camel-case in CSS class names seems to also say use hyphens for class names.

Advantages and disadvantages of using ID selectors in CSS? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
This post talked about the disadvantage about using ID selectors in CSS. Do you more about the advantages and disadvantages about using ID selectors in CSS? When should I use ID selectors and when should I use class selectors? Thanks.
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
#para1
{
text-align:center;
color:red;
}
Reference : Ref
It simply identifies one instance for an ID, a class will be inherit in the overall website, higher lvls of importance.
IDs have a higher level of specificity than classes in CSS. This helps to create strong reference points for children selectors. They're faster and easier to identify in the DOM versus a class.
Although, this really means nothing! ID's and classes are more abstract concepts than anything. General rule:
Multiple Elements - Class
Element Singleton - ID
Does it really matter? Not really.

CSS: #import: why must it come first? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
The book "CSS and Documents" by O'Reilly states:
"CSS requires the #import directive to come before any other rules in a style sheet."
I wonder, why was CSS designed in this way? After all, if the import came after
some other palin text CSS rules then why couldn't it simply be set to override
them or extend them in the middle of the document style rules?
Thanks.
As per the official documentation:
The '#import' rule allows users to import style rules from other style sheets. In CSS 2.1, any #import rules must precede all other rules (except the #charset rule, if present).
It must be placed there, before the other CSS rules, or else it won't work at all.An #import rule that follows one or more rule sets will be ignored.

Resources