Mixing
CSS Specificity - External Stylesheet vs Internal Stylesheet using just classes
I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external stylesheet, I'm using .c-headline-1 and in an internal stylesheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.
I thought internal stylesheets had higher specificity than external stylesheets or no?
css css-specificity
asked Aug 29 '18 at 9:20
bhoodbhood
90211
add a comment |
I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external stylesheet, I'm using .c-headline-1 and in an internal stylesheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.
I thought internal stylesheets had higher specificity than external stylesheets or no?
css css-specificity
asked Aug 29 '18 at 9:20
bhoodbhood
90211
add a comment |
I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external stylesheet, I'm using .c-headline-1 and in an internal stylesheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.
I thought internal stylesheets had higher specificity than external stylesheets or no?
css css-specificity
asked Aug 29 '18 at 9:20
bhoodbhood
90211
I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external stylesheet, I'm using .c-headline-1 and in an internal stylesheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.
I thought internal stylesheets had higher specificity than external stylesheets or no?
css css-specificity
css css-specificity
asked Aug 29 '18 at 9:20
bhoodbhood
90211
asked Aug 29 '18 at 9:20
bhoodbhood
90211
asked Aug 29 '18 at 9:20
bhoodbhood
90211
asked Aug 29 '18 at 9:20
bhoodbhood
90211
asked Aug 29 '18 at 9:20
bhoodbhood
90211
90211
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.
answered Aug 29 '18 at 9:30
clonedcloned
64768
Thanks @cloned here's MDN reference confirming your answer: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:15
add a comment |
External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order
The last one declared gets the highest priority
Ultimately the order is the following
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
- Browser default
To learn more you can check the Cascading Order section of this page
https://www.w3schools.com/css/css_howto.asp
answered Jan 2 at 18:45
LorenzoLorenzo
1112
add a comment |
Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.
- Inline styling
- Internal stylesheets (style withing head element)
- External stylesheets (link href="style.css" etc.)
Please correct me if I'm wrong.
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding.
– Alohci
Aug 29 '18 at 11:39
@Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52073885%2fcss-specificity-external-stylesheet-vs-internal-stylesheet-using-just-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.
answered Aug 29 '18 at 9:30
clonedcloned
64768
Thanks @cloned here's MDN reference confirming your answer: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:15
add a comment |
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.
answered Aug 29 '18 at 9:30
clonedcloned
64768
Thanks @cloned here's MDN reference confirming your answer: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:15
add a comment |
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.
answered Aug 29 '18 at 9:30
clonedcloned
64768
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.
answered Aug 29 '18 at 9:30
clonedcloned
64768
answered Aug 29 '18 at 9:30
clonedcloned
64768
answered Aug 29 '18 at 9:30
clonedcloned
64768
answered Aug 29 '18 at 9:30
clonedcloned
64768
64768
Thanks @cloned here's MDN reference confirming your answer: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:15
add a comment |
Thanks @cloned here's MDN reference confirming your answer: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:15
Thanks @cloned here's MDN reference confirming your answer: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:15
Thanks @cloned here's MDN reference confirming your answer: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:15
add a comment |
External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order
The last one declared gets the highest priority
Ultimately the order is the following
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
- Browser default
To learn more you can check the Cascading Order section of this page
https://www.w3schools.com/css/css_howto.asp
answered Jan 2 at 18:45
LorenzoLorenzo
1112
add a comment |
External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order
The last one declared gets the highest priority
Ultimately the order is the following
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
- Browser default
To learn more you can check the Cascading Order section of this page
https://www.w3schools.com/css/css_howto.asp
answered Jan 2 at 18:45
LorenzoLorenzo
1112
add a comment |
External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order
The last one declared gets the highest priority
Ultimately the order is the following
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
- Browser default
To learn more you can check the Cascading Order section of this page
https://www.w3schools.com/css/css_howto.asp
answered Jan 2 at 18:45
LorenzoLorenzo
1112
External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order
The last one declared gets the highest priority
Ultimately the order is the following
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
- Browser default
To learn more you can check the Cascading Order section of this page
https://www.w3schools.com/css/css_howto.asp
answered Jan 2 at 18:45
LorenzoLorenzo
1112
answered Jan 2 at 18:45
LorenzoLorenzo
1112
answered Jan 2 at 18:45
LorenzoLorenzo
1112
answered Jan 2 at 18:45
LorenzoLorenzo
1112
1112
add a comment |
add a comment |
Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.
- Inline styling
- Internal stylesheets (style withing head element)
- External stylesheets (link href="style.css" etc.)
Please correct me if I'm wrong.
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding.
– Alohci
Aug 29 '18 at 11:39
@Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:13
add a comment |
Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.
- Inline styling
- Internal stylesheets (style withing head element)
- External stylesheets (link href="style.css" etc.)
Please correct me if I'm wrong.
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding.
– Alohci
Aug 29 '18 at 11:39
@Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:13
add a comment |
Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.
- Inline styling
- Internal stylesheets (style withing head element)
- External stylesheets (link href="style.css" etc.)
Please correct me if I'm wrong.
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.
- Inline styling
- Internal stylesheets (style withing head element)
- External stylesheets (link href="style.css" etc.)
Please correct me if I'm wrong.
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
answered Aug 29 '18 at 10:47
TimpaninhoTimpaninho
13
13
You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding.
– Alohci
Aug 29 '18 at 11:39
@Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:13
add a comment |
You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding.
– Alohci
Aug 29 '18 at 11:39
@Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:13
You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding.
– Alohci
Aug 29 '18 at 11:39
You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding.
– Alohci
Aug 29 '18 at 11:39
@Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:13
@Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: developer.mozilla.org/en-US/docs/Web/HTML/Element/style
– bhood
Aug 29 '18 at 12:13
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52073885%2fcss-specificity-external-stylesheet-vs-internal-stylesheet-using-just-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
